bengr Posts - Answer Overflow

bengr

•Created by bengr on 8/29/2024 in #front-end

Don't expand auto-sized grid column?

I'm trying to get a behavior where hovering over an item adds a button inside (in reality it's a table cell, placed inside a CSS Grid for the whole table), without causing the cell to expand, but rather have the inner text truncate to accommodate the newly added button. All of this, without setting a hardcoded width (or similar) on .two, of course - since that defeats the purpose. This is my current state of things - when hovering/tabbing into button.two, the .badge should not increase .two's size in the grid, but rather have "Two Hundred" (.text.truncate) to truncate: https://codepen.io/bengry/pen/qBzyygd?editors=1100 Any help would be much appreciated here.

14 replies

KPCKevin Powell - Community

•Created by bengr on 3/20/2023 in #front-end

`CSS.supports` not working for `transition-property: grid-template-rows`

I'm trying to implement a Collapse/Expander element using CSS Grid by animating grid-template-rows. However, I need to know if it's supported first, but it seems like CSS.supports always returns true for transition and transition-property. e.g.

CSS.supports('transition: grid-template-rows') // true
CSS.supports('transition: grid-template-rowssss') // also true
CSS.supports('transition-property', 'grid-template-rowssss') // also true

CSS.supports('transition: grid-template-rows') // true
CSS.supports('transition: grid-template-rowssss') // also true
CSS.supports('transition-property', 'grid-template-rowssss') // also true

Is there a way to check if this is supported or not?

11 replies

KPCKevin Powell - Community

•Created by bengr on 12/20/2022 in #front-end

How to recreate this resize handle in CSS?

6 replies

Gaming

Programming