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

Controlgroup float on chrome #7793

Closed
zzart opened this Issue Oct 20, 2014 · 27 comments

Comments

Projects
None yet
4 participants
@zzart

zzart commented Oct 20, 2014

  1. Controlgroup" data-type="horizontal" doesn't float ( left) properly on Chrome 40 ( attached 2 screens one of firefox other chrome)
    Platforms: linux Chrome 40 , comparing with Firefox 35
<html class="ui-mobile"><head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>

</head>
<body>

<div data-role="page">
    <div data-role="header">

<div data-role="controlgroup" data-type="horizontal" data-mini="true">
    <a href="#" class="ui-btn ui-corner-all">No icon</a>
    <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-left">Left</a>
    <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-right">Right</a>



    <label for="select-h-6a">Select A</label>
    <select name="select-h-6a" id="select-h-6a">
        <option value="#">One</option>
        <option value="#">Two</option>
        <option value="#">Three</option>
    </select>
    <label for="select-h-6b">Select B</label>
    <select name="select-h-6b" id="select-h-6b">
        <option value="#">One</option>
        <option value="#">Two</option>
        <option value="#">Three</option>
    </select>
    <label for="select-h-6c">Select C</label>
    <select name="select-h-6c" id="select-h-6c">
        <option value="#">One</option>
        <option value="#">Two</option>
        <option value="#">Three</option>
    </select>


    <label for="select-h-6a">Select A</label>
    <select name="select-h-6a" id="select-h-6a">
        <option value="#">One</option>
        <option value="#">Two</option>
        <option value="#">Three</option>
    </select>
    <label for="select-h-6b">Select B</label>
    <select name="select-h-6b" id="select-h-6b">
        <option value="#">One</option>
        <option value="#">Two</option>
        <option value="#">Three</option>
    </select>
    <label for="select-h-6c">Select C</label>
    <select name="select-h-6c" id="select-h-6c">
        <option value="#">One</option>
        <option value="#">Two</option>
        <option value="#">Three</option>
    </select>


    <label for="select-h-6a">Select A</label>
    <select name="select-h-6a" id="select-h-6a">
        <option value="#">One</option>
        <option value="#">Two</option>
        <option value="#">Three</option>
    </select>
    <label for="select-h-6b">Select B</label>
    <select name="select-h-6b" id="select-h-6b">
        <option value="#">One</option>
        <option value="#">Two</option>
        <option value="#">Three</option>
    </select>
    <label for="select-h-6c">Select C</label>
    <select name="select-h-6c" id="select-h-6c">
        <option value="#">One</option>
        <option value="#">Two</option>
        <option value="#">Three</option>
    </select>


    <label for="select-h-6a">Select A</label>
    <select name="select-h-6a" id="select-h-6a">
        <option value="#">One</option>
        <option value="#">Two</option>
        <option value="#">Three</option>
    </select>
    <label for="select-h-6b">Select B</label>
    <select name="select-h-6b" id="select-h-6b">
        <option value="#">One</option>
        <option value="#">Two</option>
        <option value="#">Three</option>
    </select>
    <label for="select-h-6c">Select C</label>
    <select name="select-h-6c" id="select-h-6c">
        <option value="#">One</option>
        <option value="#">Two</option>
        <option value="#">Three</option>
    </select>

</div>
</div>
</div>

</body>
</html>

Screens

Firefox 35
screen_1
Chrome 40
screen_2

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Oct 20, 2014

Member

@zzart thank you for reporting this however we wont fix issues until a browser is released and since current is still 38 40 is still a little while out and likely to have bugs still.

I'm going to close this for now but if this still exists when 40 is released we will re-open it.

Member

arschmitz commented Oct 20, 2014

@zzart thank you for reporting this however we wont fix issues until a browser is released and since current is still 38 40 is still a little while out and likely to have bugs still.

I'm going to close this for now but if this still exists when 40 is released we will re-open it.

@arschmitz arschmitz closed this Oct 20, 2014

@zzart

This comment has been minimized.

Show comment
Hide comment
@zzart

zzart Oct 20, 2014

@arschmitz I can confirm this bug exist on chrome 38.0.2125.102 (mobile) as well .

zzart commented Oct 20, 2014

@arschmitz I can confirm this bug exist on chrome 38.0.2125.102 (mobile) as well .

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Oct 20, 2014

Member

@zzart if you can reproduce this on current versions please see our https://github.com/jquery/jquery-mobile/blob/master/CONTRIBUTING.md and use the jsbin test page linked there to create a simple test case reproducing the issue and we will re open this.

Member

arschmitz commented Oct 20, 2014

@zzart if you can reproduce this on current versions please see our https://github.com/jquery/jquery-mobile/blob/master/CONTRIBUTING.md and use the jsbin test page linked there to create a simple test case reproducing the issue and we will re open this.

@zzart

This comment has been minimized.

Show comment
Hide comment
@zzart

zzart Oct 20, 2014

I was able to reproduce it on Chrome 38.0.2125.102 (mobile) and Chrome 40.0.2194.0 (64-bit) http://jsbin.com/fesanekaxe

zzart commented Oct 20, 2014

I was able to reproduce it on Chrome 38.0.2125.102 (mobile) and Chrome 40.0.2194.0 (64-bit) http://jsbin.com/fesanekaxe

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Oct 20, 2014

Member

@jaspermdegroot want to take a look at this?

Member

arschmitz commented Oct 20, 2014

@jaspermdegroot want to take a look at this?

@arschmitz arschmitz reopened this Oct 20, 2014

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Oct 20, 2014

Contributor

The horizontal controlgroup is messed up, but only in the header. It works fine in the content:

http://jsbin.com/juget/

Contributor

gabrielschulhof commented Oct 20, 2014

The horizontal controlgroup is messed up, but only in the header. It works fine in the content:

http://jsbin.com/juget/

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Oct 20, 2014

Contributor

Also, a horizontal controlgroup consisting solely of anchors works fine both in the header and the footer.

Contributor

gabrielschulhof commented Oct 20, 2014

Also, a horizontal controlgroup consisting solely of anchors works fine both in the header and the footer.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Oct 20, 2014

Contributor

If you remove the class ui-header in Chrome dev tools, the problem fixes itself.

Contributor

gabrielschulhof commented Oct 20, 2014

If you remove the class ui-header in Chrome dev tools, the problem fixes itself.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Oct 20, 2014

Contributor

I've been able to fix the issue by putting a bunch of > in between .ui-header and .ui-btn*. So, I suspect the problem is that the special styling we give to buttons in a header is bleeding through to buttons inside a controlgroup inside a header, because we're not using direct descendancy.

Contributor

gabrielschulhof commented Oct 20, 2014

I've been able to fix the issue by putting a bunch of > in between .ui-header and .ui-btn*. So, I suspect the problem is that the special styling we give to buttons in a header is bleeding through to buttons inside a controlgroup inside a header, because we're not using direct descendancy.

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Oct 20, 2014

Member

@gabrielschulhof Interesting but if thats the case it SHOULD happen on firefox too. Lets figure this out and figure out which browser is actually doing the right thing here and file an issue on the one thats not.

Member

arschmitz commented Oct 20, 2014

@gabrielschulhof Interesting but if thats the case it SHOULD happen on firefox too. Lets figure this out and figure out which browser is actually doing the right thing here and file an issue on the one thats not.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Oct 20, 2014

Contributor

OK. I've narrowed down the rule causing the problem.

If you take out vertical-align: middle;, or if you write a separate rule restricting its application to .ui-header > .ui-btn, .ui-footer > .ui-btn, then that fixes Chrome.

I dare say this is a bug in Chrome, because vertical-align: middle should have no bearing on how floating elements are wrapped.

Contributor

gabrielschulhof commented Oct 20, 2014

OK. I've narrowed down the rule causing the problem.

If you take out vertical-align: middle;, or if you write a separate rule restricting its application to .ui-header > .ui-btn, .ui-footer > .ui-btn, then that fixes Chrome.

I dare say this is a bug in Chrome, because vertical-align: middle should have no bearing on how floating elements are wrapped.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Oct 20, 2014

Contributor

Here's some CSS added to the jsbin that fixes Chrome:

http://jsbin.com/sajuyi/1/

Contributor

gabrielschulhof commented Oct 20, 2014

Here's some CSS added to the jsbin that fixes Chrome:

http://jsbin.com/sajuyi/1/

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Oct 20, 2014

Contributor

Well, it fixes the wrapping problem, but for some reason, removing vertical-align: middle; introduces some space between the rows buttons inside the controlgroup.

Contributor

gabrielschulhof commented Oct 20, 2014

Well, it fixes the wrapping problem, but for some reason, removing vertical-align: middle; introduces some space between the rows buttons inside the controlgroup.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Oct 20, 2014

Contributor

Here's the same CSS added to the jsbin that fixes Chrome, but with an added comment explaining why the second rule is present:

http://jsbin.com/puxora/1/edit

Contributor

gabrielschulhof commented Oct 20, 2014

Here's the same CSS added to the jsbin that fixes Chrome, but with an added comment explaining why the second rule is present:

http://jsbin.com/puxora/1/edit

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Oct 20, 2014

Contributor

This is fixed in the latest Linux build of Chromium, so it should probably be out there in a couple of months.

Contributor

gabrielschulhof commented Oct 20, 2014

This is fixed in the latest Linux build of Chromium, so it should probably be out there in a couple of months.

@zzart

This comment has been minimized.

Show comment
Hide comment
@zzart

zzart Oct 27, 2014

This is not fixed in the latest Linux build . As I wrote at the beginning I was testing it on the latest Linux build 40.0.2194.0 (64-bit) and it didn't work. @gabrielschulhof example works indeed , but if you try and modyfy it so it includes some selects and no-icon buttons http://jsbin.com/bufeqizume it still doesn't work.
screen_3

zzart commented Oct 27, 2014

This is not fixed in the latest Linux build . As I wrote at the beginning I was testing it on the latest Linux build 40.0.2194.0 (64-bit) and it didn't work. @gabrielschulhof example works indeed , but if you try and modyfy it so it includes some selects and no-icon buttons http://jsbin.com/bufeqizume it still doesn't work.
screen_3

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Oct 29, 2014

Contributor

Hmmm ... I might've reduced the test case wrong. Dang!

Contributor

gabrielschulhof commented Oct 29, 2014

Hmmm ... I might've reduced the test case wrong. Dang!

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Oct 29, 2014

Contributor

D'oh! I downloaded the oldest available continuous build, not the newest ... /me facepalms

Contributor

gabrielschulhof commented Oct 29, 2014

D'oh! I downloaded the oldest available continuous build, not the newest ... /me facepalms

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Oct 29, 2014

Contributor

I've filed 428317 against Chromium.

Contributor

gabrielschulhof commented Oct 29, 2014

I've filed 428317 against Chromium.

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Dec 28, 2014

Member

This issue happens because the div.ui-btn inside div.ui-select gets display: inline-block:

.ui-header .ui-btn,
.ui-footer .ui-btn {
    font-size: 12.5px;
    display: inline-block;
    vertical-align: middle;
}

Chrome adds 3px margin at the bottom of inline block elements which makes the .ui-select wrapper div 3px higher than the other elements in the group. That's just browser default style, not a browser bug.

I will make a change in the CSS to make sure we override inline-block for the select button.

@zzart - As a quick fix you can add .ui-select > .ui-btn { display: block !important; } to your CSS.

Member

jaspermdegroot commented Dec 28, 2014

This issue happens because the div.ui-btn inside div.ui-select gets display: inline-block:

.ui-header .ui-btn,
.ui-footer .ui-btn {
    font-size: 12.5px;
    display: inline-block;
    vertical-align: middle;
}

Chrome adds 3px margin at the bottom of inline block elements which makes the .ui-select wrapper div 3px higher than the other elements in the group. That's just browser default style, not a browser bug.

I will make a change in the CSS to make sure we override inline-block for the select button.

@zzart - As a quick fix you can add .ui-select > .ui-btn { display: block !important; } to your CSS.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 4, 2015

Contributor

@jaspermdegroot isn't the fact that it does not wrap at the left edge when it starts the next row a bug though?

Contributor

gabrielschulhof commented Jan 4, 2015

@jaspermdegroot isn't the fact that it does not wrap at the left edge when it starts the next row a bug though?

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jan 5, 2015

Member

@gabrielschulhof - No it isn't. This is how floats work. Although it looks like all buttons in the row have the same height, the select ("One") is 3px taller. The button that doesn't fit in the first row bumps against that select when floating left.
If you use clear: left; (or both) it will go all the way to the left, but we can't use that of course because we don't know what button has to go to a new row.

Member

jaspermdegroot commented Jan 5, 2015

@gabrielschulhof - No it isn't. This is how floats work. Although it looks like all buttons in the row have the same height, the select ("One") is 3px taller. The button that doesn't fit in the first row bumps against that select when floating left.
If you use clear: left; (or both) it will go all the way to the left, but we can't use that of course because we don't know what button has to go to a new row.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 8, 2015

Contributor

@jaspermdegroot OK. I've created a very simple test case consisting of nothing but divs and one anchor which renders differently in FF than it does in Chrome:

http://jsbin.com/sifezo/1/

So, which one renders correctly? FF or Chrome?

Note that, in Chrome, if you set the .ui-btn padding to greather than, like, 0.9em, it starts to work the same way as FF. That's why I figured it was a Chrome bug - maybe a rounding error somewhere.

Contributor

gabrielschulhof commented Jan 8, 2015

@jaspermdegroot OK. I've created a very simple test case consisting of nothing but divs and one anchor which renders differently in FF than it does in Chrome:

http://jsbin.com/sifezo/1/

So, which one renders correctly? FF or Chrome?

Note that, in Chrome, if you set the .ui-btn padding to greather than, like, 0.9em, it starts to work the same way as FF. That's why I figured it was a Chrome bug - maybe a rounding error somewhere.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 8, 2015

Contributor

I've simplified the test even further, removing the anchor and replacing it with a plain div.ui-btn:

http://jsbin.com/sifezo/2/

Contributor

gabrielschulhof commented Jan 8, 2015

I've simplified the test even further, removing the anchor and replacing it with a plain div.ui-btn:

http://jsbin.com/sifezo/2/

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 8, 2015

Contributor

If you change the .ui-btn padding from .7em to .8em, it all of a sudden works the same way as FF.

Contributor

gabrielschulhof commented Jan 8, 2015

If you change the .ui-btn padding from .7em to .8em, it all of a sudden works the same way as FF.

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jan 8, 2015

Member

@gabrielschulhof - Using em values for top/bottom padding does give some unexpected results in Chrome and that is probably a rounding bug (has been reported).
I think the reason that the buttons in your test page don't have the same height is that for the first button inline-block is applied to an element that does have siblings, while in case of the other buttons it is applied to an element without siblings. Maybe Chrome's default browser style for inline-block elements is conditional or maybe there is a bug. I am not sure.
Comparing Firefox and Chrome isn't useful I think because their default style for inline-block can be different, without it being a bug.

Member

jaspermdegroot commented Jan 8, 2015

@gabrielschulhof - Using em values for top/bottom padding does give some unexpected results in Chrome and that is probably a rounding bug (has been reported).
I think the reason that the buttons in your test page don't have the same height is that for the first button inline-block is applied to an element that does have siblings, while in case of the other buttons it is applied to an element without siblings. Maybe Chrome's default browser style for inline-block elements is conditional or maybe there is a bug. I am not sure.
Comparing Firefox and Chrome isn't useful I think because their default style for inline-block can be different, without it being a bug.

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Jun 19, 2015

Member

This widget and css are all changed now so i'm going to close this.

Member

arschmitz commented Jun 19, 2015

This widget and css are all changed now so i'm going to close this.

@arschmitz arschmitz closed this Jun 19, 2015

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