Kevin Powell - Community•2mo ago

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.

Ben Grynhaus

CodePen

Grid without grow?

...

9 Replies

ἔρως•2mo ago

thats only possible in 2 ways: 1- use visibility: hidden instead of display: none 2- keep using display: none but consider making it a popover with position: absolute or position: fixed

Chris Bolson•2mo ago

I can't see how you could do this without defining the width somewhere 🤔

ἔρως•2mo ago

even with defining a width, it wont work because of mobile devices

Chris Bolson•2mo ago

I'm not sure how it might affect mobile devices but you could get the width on load via JS and define it as an inline style (or custom property). This way it would be dynamic in that it depends on the visible content width (on load) but then won't change when revealing the hidden element. Something like this works on your codepen:

const button = document.querySelector('.two');
const buttonWidth = button.offsetWidth;
button.style.width = buttonWidth + 'px';

const button = document.querySelector('.two');
const buttonWidth = button.offsetWidth;
button.style.width = buttonWidth + 'px';

Of course your actual code may be different so this might have undesirable side-effects. [udpate] This method of getting the button width using getcomputedStyle() seems to be a bit more accurate as it takes into account the CSS properties more accurately:

const button = document.querySelector('.two');
button.style.maxWidth = window.getComputedStyle(button).width;

const button = document.querySelector('.two');
button.style.maxWidth = window.getComputedStyle(button).width;

ἔρως•2mo ago

or just use visibility instead of display, to hide it instead of obliterating it out of the rendering and you will always have that little space there, guaranteed

Chris Bolson•2mo ago

No need to obliterate anything or have any unwanted spaces. Assuming the OP is ok with using JS, I might do this like this: https://codepen.io/cbolson/pen/mdZjQmV

ἔρως•2mo ago

that is nice but you can do that without js

Chris Bolson•2mo ago

How could that be done without JS within the restrictions of the original post (no hardcoded width)? This JS gets round that by defining the width, whatever it may be according to the contents, after page load so, in a way, it is still dynamic.

ἔρως•2mo ago

one thing that can be done is to translate the element outside the space you can translate by -100%, which doesnt care about width

Gaming

Programming

Don't expand auto-sized grid column?