Skip to content
This repository

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

Closed
joejoint opened this Issue September 14, 2012 · 6 comments

3 participants

joejoint Jasper de Groot steven-fernandez
joejoint

Hi,
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

http://jsfiddle.net/joejoint/MvLPn/

http://jsfiddle.net/joejoint/99E8x/

    <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>
            <li>
                <div data-role="navbar" id="line_bar_r" data-theme="c">
                    <ul>
                        <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>
                    </ul>
                </div>                                          
            </li>
            </ul>

            <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>
                </select>                   
            </div>              
        </div>
    </div>
Jasper de Groot
Owner

@joejoint

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

steven-fernandez

.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...

Jasper de Groot
Owner

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.

steven-fernandez

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

Jasper de Groot
Owner

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; }
steven-fernandez

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

Jasper de Groot uGoMobi closed this in 446fed7 September 17, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.