New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Split list icon CSS bug #1900

Closed
zephster opened this Issue Jun 22, 2011 · 6 comments

Comments

Projects
None yet
5 participants
@zephster

Small visual bug in split-view lists, the horizontal bar on top. Appeared when upgrading to beta 1 on my project, but it also happens for me on a brand new, freshly downloaded blank test project.

Image: http://i.imgur.com/XE12R.jpg

Appears in every theme swatch.

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Jun 22, 2011

Contributor

This looks like the top "glow" border isn't getting the right border radius, we'll take a look. What device/version?

Contributor

toddparker commented Jun 22, 2011

This looks like the top "glow" border isn't getting the right border radius, we'll take a look. What device/version?

@zephster

This comment has been minimized.

Show comment
Hide comment
@zephster

zephster Jun 22, 2011

It does it in Chrome and Firefox on the desktop, and I've tested it on 2 iPhone 4's (4.3.1 and 4.3.3) and 1 iPod Touch 4th Gen.

It does it in Chrome and Firefox on the desktop, and I've tested it on 2 iPhone 4's (4.3.1 and 4.3.3) and 1 iPod Touch 4th Gen.

@zephster zephster closed this Jun 22, 2011

@zephster zephster reopened this Jun 22, 2011

@zephster

This comment has been minimized.

Show comment
Hide comment
@zephster

zephster Jun 22, 2011

Sorry, hit the wrong button, didn't mean to close it.

Sorry, hit the wrong button, didn't mean to close it.

@ghost ghost assigned gseguin Jun 22, 2011

@alumni

This comment has been minimized.

Show comment
Hide comment
@alumni

alumni Jun 22, 2011

I can confirm the issue also in Chrome/Firefox. When I set data-split-icon="radio-off", it will also have a bottom border. Removing the class ui-icon-shadow from the span with the icon will get rid of the bottom border. Removing the class ui-btn-inner from its parent span will also get rid of the top border (the one that @zephster reported).

alumni commented Jun 22, 2011

I can confirm the issue also in Chrome/Firefox. When I set data-split-icon="radio-off", it will also have a bottom border. Removing the class ui-icon-shadow from the span with the icon will get rid of the bottom border. Removing the class ui-btn-inner from its parent span will also get rid of the top border (the one that @zephster reported).

@MauriceG

This comment has been minimized.

Show comment
Hide comment
@MauriceG

MauriceG Sep 18, 2011

Contributor

in general the ui-btn-inner class sets a top border with a height of 1px and with white-color.
The icon is inserted in a span with this ui-btn-inner class.

if a style like
.ui-listview * .ui-btn-inner > .ui-btn > .ui-btn-inner { border-top: 0px; }
would be inserted into the jquery-mobile.css-file, this issue disappears.
I've tested this with Chrome 14.0, FF 6.2, Safari 5.0.5 and IE 9 all on Windows,
Safari 5.1 on OS X and Safari on iPad 2 with all swatches.

Contributor

MauriceG commented Sep 18, 2011

in general the ui-btn-inner class sets a top border with a height of 1px and with white-color.
The icon is inserted in a span with this ui-btn-inner class.

if a style like
.ui-listview * .ui-btn-inner > .ui-btn > .ui-btn-inner { border-top: 0px; }
would be inserted into the jquery-mobile.css-file, this issue disappears.
I've tested this with Chrome 14.0, FF 6.2, Safari 5.0.5 and IE 9 all on Windows,
Safari 5.1 on OS X and Safari on iPad 2 with all swatches.

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Sep 22, 2011

Contributor

The suggested fix from MauriceG landed a few days ago and this is fixed.

Contributor

toddparker commented Sep 22, 2011

The suggested fix from MauriceG landed a few days ago and this is fixed.

@toddparker toddparker closed this Sep 22, 2011

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment