css problems between 1.2.0.alpha.1 and 1.2.0.rc.1 #5008

joejoint opened this Issue Sep 14, 2012 · 6 comments


None yet

3 participants


The following page renders fine with jquery.mobile-1.2.0-alpha.1.css
but fails with both jquery.mobile-1.2.0-beta.1.css and jquery.mobile-1.2.0-rc.1.css



    <div data-role="page" id="test">
        <div data-role="content"  >
            <ul data-role="listview" data-inset="true" style="margin-top:0">
            <li data-role="list-divider">  </li>
                <div data-role="navbar" id="line_bar_r" data-theme="c">
                        <li><a href="#" class="ui-btn-active">Item 1</a></li>
                        <li><a href="#" >Item 2</a></li>
                        <li><a href="#" >Item 3</a></li>

            <div id="div_line_r" style="padding-bottom:5px" >
                <select  name="line" id="line_r" value="" data-mini="true" />                   
                    <option >0</option>
                    <option >1</option>


Thanks for reporting the issue. This is a regression from 7f312da :(
Looking into it.


.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li { min-height:40px }; seems to sort it, don't know if you're using min-height on jqm or not though...


Overflow hidden set on the UL made sure the navbar get a height while the LI's (buttons) are floating.
We removed that because of an issue on Android ICS, but maybe it can be set for the ui-navbar div. Have to test that.
Otherwise setting a min-height could be a solution indeed.


Good call :) Yeah, overflow: hidden; on the .ui-navbar div sorts the issue like you said.


Setting overflow hidden on ui-navbar results in the same problem (#4663) on Chrome on Android ICS and JB.
Setting a min-height of 38px isn't the solution either, because when you use icons positioned above the text you will still have an issue.

All I can think of now is using a "clearfix":

.ui-navbar ul:before, .ui-navbar ul:after { content: " "; display: table; }
.ui-navbar ul:after { clear: both; }
.ui-navbar ul { /*... other properties ... */ zoom: 1; }

I see...Yeah I guess you have to think of all the different posibilities :)

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