Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

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

Closed
joejoint opened this Issue · 6 comments

3 participants

@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>
@jaspermdegroot
Collaborator

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

@jaspermdegroot
Collaborator

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.

@jaspermdegroot
Collaborator

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 :)

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.