Split list icon CSS bug #1900

zephster opened this Issue Jun 22, 2011 · 6 comments


None yet

5 participants


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.


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


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

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

@gseguin gseguin was assigned 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).


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.


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