Opened 6 years ago

Closed 6 years ago

Last modified 5 years ago

#8442 closed bug (fixed)

CSS: ui-helper-clearfix bug within table with border spacing

Reported by: jesse.voogt Owned by:
Priority: minor Milestone: 1.10.1
Component: ui.css-framework Version: 1.8.18
Keywords: Cc:
Blocked by: Blocking:

Description

jquery-ui 1.8.18 css style ui-helper-clearfix :after and :before display:table creates unwanted empty space around any element with this class when that element is in the context of a table with border collapse and border spacing. For my example, I increased the border spacing, however the default settings of firefox and chrome would be enough.

Here's the js fiddle: http://jsfiddle.net/jessevoogt/nEHLK/

The fiddle includes my workaround, which basically sets the display to block within the context of a table.

Change History (10)

comment:1 Changed 6 years ago by Scott González

Component: ui.coreCSS Framework

comment:2 Changed 6 years ago by Scott González

Milestone: 1.9.01.10.0

comment:3 Changed 6 years ago by mikesherov

Status: newopen

comment:4 Changed 6 years ago by Scott González

From Nathan Smith:

Example of the bug:

http://codepen.io/anon/pen/gAfkJ

Example of the fix:

http://codepen.io/anon/pen/KoHGc

TL;DR — border-collapse:collapse on clearfix.

comment:5 Changed 6 years ago by tj.vantoll

Milestone: 1.10.0none

comment:6 Changed 6 years ago by Jörn Zaefferer

So I'd just add these two lines to the clearfix before/after block in jquery.ui.core.css:

/* see http://bugs.jqueryui.com/ticket/8442 */
border-collapse: collapse; 

Is there anything else?

comment:7 Changed 6 years ago by Scott González

I think that's it. We should inform H5BP as well, since I'm pretty sure we're just using their styles.

comment:8 Changed 6 years ago by Scott González

Milestone: none1.10.1
Summary: jquery-ui 1.8.18: ui-helper-clearfix bug within table with border spacingCSS: ui-helper-clearfix bug within table with border spacing
Version: 1.8.211.8.18

comment:9 Changed 6 years ago by Scott González

Resolution: fixed
Status: openclosed

Theme: Collapse border in .ui-helper-cleafix. Fixes #8442 - CSS: ui-helper-clearfix bug within table with border spacing.

Changeset: cb42ee7ccdf6e32be14341a34a037c7f4508c157

comment:10 in reply to:  description Changed 5 years ago by peter.hozak@…

Replying to jesse.voogt:

Here's the js fiddle: http://jsfiddle.net/jessevoogt/nEHLK/

Original case might be fixed, but when I had a problem with unaligned accordion vs. tabs placed in 2 display:table-cell; elements, above workaround fixed my issue.

Note: See TracTickets for help on using tickets.