You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have a project where I have not changed the global default of box-sizing from content-box. I noticed I started having layout issues when introducing smooth-dnd and it's the result of these overqualified CSS selectors that set the box model all child elements of .smooth-dnd-container and .smooth-dnd-ghost:
This means that elements nested deep within my draggable items will have their box sizing changed. This is very difficult to override, since I do set some elements to border-box when it makes sense for how I want a specific element to behave. I can override this default, but my override will again break the children where I want to use border-box.
While border-box is commonly used, it's not suitable for all situations and I think a library intended to deliver very specific functionality should not set overqualified defaults like this. Without knowing all the details of how calculations of the library works, I think the selectors should only target the specific elements where this box sizing matters for the library functionality.
Perhaps it could be changed to direct descendants only:
I'm using smooth-dnd via vue-smooth-dnd, as a workaround I wouldn't mind just duplicating the CSS file with custom changes myself but it seems the CSS is automatically loaded via NPM, so I guess this doesn't work as a workaround.
The text was updated successfully, but these errors were encountered:
jerryjappinen
changed the title
Overqualified child CSS selectors break layout when not using border-box
Overqualified child CSS selectors break layout of content-box child elements
Aug 27, 2018
jerryjappinen
changed the title
Overqualified child CSS selectors break layout of content-box child elements
Overqualified CSS selectors break layout of content-box child elements
Aug 27, 2018
I have a project where I have not changed the global default of
box-sizing
fromcontent-box
. I noticed I started having layout issues when introducingsmooth-dnd
and it's the result of these overqualified CSS selectors that set the box model all child elements of.smooth-dnd-container
and.smooth-dnd-ghost
:This means that elements nested deep within my draggable items will have their box sizing changed. This is very difficult to override, since I do set some elements to
border-box
when it makes sense for how I want a specific element to behave. I can override this default, but my override will again break the children where I want to useborder-box
.While
border-box
is commonly used, it's not suitable for all situations and I think a library intended to deliver very specific functionality should not set overqualified defaults like this. Without knowing all the details of how calculations of the library works, I think the selectors should only target the specific elements where this box sizing matters for the library functionality.Perhaps it could be changed to direct descendants only:
I'm using
smooth-dnd
via vue-smooth-dnd, as a workaround I wouldn't mind just duplicating the CSS file with custom changes myself but it seems the CSS is automatically loaded via NPM, so I guess this doesn't work as a workaround.The text was updated successfully, but these errors were encountered: