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

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

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

Comments

Projects
None yet
3 participants
@joejoint

joejoint commented Sep 14, 2012

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Sep 15, 2012

Member

@joejoint

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

Member

jaspermdegroot commented Sep 15, 2012

@joejoint

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

@ghost ghost assigned jaspermdegroot Sep 15, 2012

@steven-fernandez

This comment has been minimized.

Show comment
Hide comment
@steven-fernandez

steven-fernandez Sep 15, 2012

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

steven-fernandez commented Sep 15, 2012

.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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Sep 15, 2012

Member

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.

Member

jaspermdegroot commented Sep 15, 2012

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

This comment has been minimized.

Show comment
Hide comment
@steven-fernandez

steven-fernandez Sep 16, 2012

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

steven-fernandez commented Sep 16, 2012

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

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Sep 16, 2012

Member

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; }
Member

jaspermdegroot commented Sep 16, 2012

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

This comment has been minimized.

Show comment
Hide comment
@steven-fernandez

steven-fernandez Sep 16, 2012

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

steven-fernandez commented Sep 16, 2012

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