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

Table within panel not 100% full width in Chrome #11000

Closed
jeroennoten opened this Issue Oct 9, 2013 · 19 comments

Comments

Projects
None yet
9 participants
@jeroennoten

When you place a table within a panel, there is one pixel between the right side of table and the panel border with Google Chrome.
You can see this in the Bootstrap documentation: http://getbootstrap.com/components/#panels-tables
When the background colors are the same, it is not a big deal, but it is not nice when you use .danger or .success or one of the other color classes to the table rows or cells.

table within panel

Browser: Chrome 30.0.1599.69
Operating System: OS X 10.8.5

(I am not that good with CSS to come up with a solution.)

@stubbornella

This comment has been minimized.

Show comment
Hide comment
@stubbornella

stubbornella Oct 9, 2013

Contributor

I'm on Chrome 30.0.1599.69 too and I was unable to reproduce this bug.

I tried putting the background color on the table, tr, td, and th. I even tried adding the "danger" class to the tr. I still couldn't see a gap. Can you provide a working code example? (maybe a jsbin)

Contributor

stubbornella commented Oct 9, 2013

I'm on Chrome 30.0.1599.69 too and I was unable to reproduce this bug.

I tried putting the background color on the table, tr, td, and th. I even tried adding the "danger" class to the tr. I still couldn't see a gap. Can you provide a working code example? (maybe a jsbin)

@jeroennoten

This comment has been minimized.

Show comment
Hide comment
@jeroennoten

jeroennoten Oct 9, 2013

Hmm.. maybe it is only on the Mac OS X version?

Hmm.. maybe it is only on the Mac OS X version?

@juthilo

This comment has been minimized.

Show comment
Hide comment
@juthilo

juthilo Oct 9, 2013

Member

No, I could, for example, reproduce this on Chrome 30.0.1599.69 on Windows XP.

Member

juthilo commented Oct 9, 2013

No, I could, for example, reproduce this on Chrome 30.0.1599.69 on Windows XP.

@slpixe

This comment has been minimized.

Show comment
Hide comment
@slpixe

slpixe Oct 11, 2013

Could not replicate on OSX 10.6.8
With Chrome 30.

Could you inspect the TR and the table, and confirm they are both rendering at the same width ?

slpixe commented Oct 11, 2013

Could not replicate on OSX 10.6.8
With Chrome 30.

Could you inspect the TR and the table, and confirm they are both rendering at the same width ?

@jeroennoten

This comment has been minimized.

Show comment
Hide comment
@jeroennoten

jeroennoten Oct 11, 2013

Yes. The TABLE is already 1 pixel too small. And the TR follows, of course.
I checked this by the 'Inspect element' option in Chrome and looked at the color markings.

Yes. The TABLE is already 1 pixel too small. And the TR follows, of course.
I checked this by the 'Inspect element' option in Chrome and looked at the color markings.

@richardthombs

This comment has been minimized.

Show comment
Hide comment
@richardthombs

richardthombs Oct 13, 2013

Looks fine on Chrome 31 OS X 10.8.5.

Looks fine on Chrome 31 OS X 10.8.5.

@tagliala

This comment has been minimized.

Show comment
Hide comment
@tagliala

tagliala Oct 13, 2013

Contributor

It seems only happen when body has an odd number of pixels, try in the documentation page with (e.g.):

$('body').width(1030)
$('body').width(1031)

I suppose it's blink's fault

Contributor

tagliala commented Oct 13, 2013

It seems only happen when body has an odd number of pixels, try in the documentation page with (e.g.):

$('body').width(1030)
$('body').width(1031)

I suppose it's blink's fault

@stubbornella

This comment has been minimized.

Show comment
Hide comment
@stubbornella

stubbornella Oct 13, 2013

Contributor

IE used to have a similarish bug where it could only calculate 

position: absolute 
bottom: 0
right: 0 

of even height/width parents. At odd heights or widths there was a 1px gap.

@Geremia - do you want to make a super simple test case and submit a bug? I'm sure we can get blink to fix it, especially if no other browsers behave this way.

Contributor

stubbornella commented Oct 13, 2013

IE used to have a similarish bug where it could only calculate 

position: absolute 
bottom: 0
right: 0 

of even height/width parents. At odd heights or widths there was a 1px gap.

@Geremia - do you want to make a super simple test case and submit a bug? I'm sure we can get blink to fix it, especially if no other browsers behave this way.

@tagliala

This comment has been minimized.

Show comment
Hide comment
@tagliala

tagliala Oct 13, 2013

Contributor

@stubbornella

it seems happen only in certain % width (75% is one (col--9), 58.333% (col--7) is another). I think there are some kind of binary math/rounding issues involved.

Here it is a fiddle showing the issue with the minimum amount of markup and style: http://jsfiddle.net/tagliala/2z3Zc/

Sorry, I will not submit a bug to /dev/nu... ehm... chromium :)

Contributor

tagliala commented Oct 13, 2013

@stubbornella

it seems happen only in certain % width (75% is one (col--9), 58.333% (col--7) is another). I think there are some kind of binary math/rounding issues involved.

Here it is a fiddle showing the issue with the minimum amount of markup and style: http://jsfiddle.net/tagliala/2z3Zc/

Sorry, I will not submit a bug to /dev/nu... ehm... chromium :)

@stubbornella

This comment has been minimized.

Show comment
Hide comment
@stubbornella

stubbornella Oct 13, 2013

Contributor

@tagliala - cool! looking at your fiddle, it looks like the table is actually pushing the parent '.panel' to be 1-2 px wider than it should be. Firefox 2ish had a bug like that, but it could be solved by wrapping the table in a div with the width set explicitly to 100%. That didn't help here. Nor did any attempts to modify box-sizing or padding on the table itself.

I can open a bug. ;)

Contributor

stubbornella commented Oct 13, 2013

@tagliala - cool! looking at your fiddle, it looks like the table is actually pushing the parent '.panel' to be 1-2 px wider than it should be. Firefox 2ish had a bug like that, but it could be solved by wrapping the table in a div with the width set explicitly to 100%. That didn't help here. Nor did any attempts to modify box-sizing or padding on the table itself.

I can open a bug. ;)

@stubbornella

This comment has been minimized.

Show comment
Hide comment
@stubbornella

stubbornella Oct 13, 2013

Contributor

Oops, ignore my last comment. The test was making the width different, rather than the content. Duh! :)

Contributor

stubbornella commented Oct 13, 2013

Oops, ignore my last comment. The test was making the width different, rather than the content. Duh! :)

@stubbornella

This comment has been minimized.

Show comment
Hide comment
@stubbornella

stubbornella Oct 13, 2013

Contributor

Oooh! It has the same bug for heights:

http://jsfiddle.net/2z3Zc/3/

So far, I can't find a way to fix it.

Contributor

stubbornella commented Oct 13, 2013

Oooh! It has the same bug for heights:

http://jsfiddle.net/2z3Zc/3/

So far, I can't find a way to fix it.

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Oct 14, 2013

Member

Oh snap, it's @stubbornella. 👋

For now I'll close this out as a browser bug due to pixel rounding. Do note though that Safari has long been known to shit the bed with percentages (especially compared to Chrome) and we already have a note in our docs regarding this.

Should I file a bug or did you already @stubbornella?

Member

mdo commented Oct 14, 2013

Oh snap, it's @stubbornella. 👋

For now I'll close this out as a browser bug due to pixel rounding. Do note though that Safari has long been known to shit the bed with percentages (especially compared to Chrome) and we already have a note in our docs regarding this.

Should I file a bug or did you already @stubbornella?

@mdo mdo closed this Oct 14, 2013

@stubbornella

This comment has been minimized.

Show comment
Hide comment
@stubbornella

stubbornella Oct 14, 2013

Contributor

Hi Mark! :)

Yup, I opened a bug: https://code.google.com/p/chromium/issues/detail?id=306878

I also updated the fiddle a bit to show the height issue and to simplify the example: http://jsfiddle.net/stubbornella/2z3Zc/5/

Contributor

stubbornella commented Oct 14, 2013

Hi Mark! :)

Yup, I opened a bug: https://code.google.com/p/chromium/issues/detail?id=306878

I also updated the fiddle a bit to show the height issue and to simplify the example: http://jsfiddle.net/stubbornella/2z3Zc/5/

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Oct 14, 2013

Member

<3<3<3

Member

mdo commented Oct 14, 2013

<3<3<3

@tagliala

This comment has been minimized.

Show comment
Hide comment
@tagliala

tagliala Oct 14, 2013

Contributor

@stubbornella

I think it's a dup of https://code.google.com/p/chromium/issues/detail?id=241198 (and many others)

but they are missing the info about even/odd width and height.

Contributor

tagliala commented Oct 14, 2013

@stubbornella

I think it's a dup of https://code.google.com/p/chromium/issues/detail?id=241198 (and many others)

but they are missing the info about even/odd width and height.

@stubbornella

This comment has been minimized.

Show comment
Hide comment
@stubbornella

stubbornella Oct 15, 2013

Contributor

@tagliala - thanks for finding that. I commented to link the bugs. I must have included "odd" in my search, it doesn't look like they were aware of this part of the problem.

Contributor

stubbornella commented Oct 15, 2013

@tagliala - thanks for finding that. I commented to link the bugs. I must have included "odd" in my search, it doesn't look like they were aware of this part of the problem.

@skope

This comment has been minimized.

Show comment
Hide comment
@skope

skope Jul 22, 2015

There's still no fix for this?

skope commented Jul 22, 2015

There's still no fix for this?

@cvrebert

This comment has been minimized.

Show comment
Hide comment
Member

cvrebert commented Jul 24, 2015

@twbs twbs locked and limited conversation to collaborators Jul 24, 2015

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