custom-cards / button-card

❇️ Lovelace button-card for home assistant
MIT License
1.93k stars 233 forks source link

Add Option to Override CSS 'max-width' #757

Closed smartqasa closed 1 year ago

smartqasa commented 1 year ago

First and foremost, thank you for breathing life back into this add-on. It is amazingly powerful and eminently useful. Now for the request...

When using button-card within a CSS grid, the card will not stretch to the width limit of the grid cell due to the use of CSS max-width element.

The use of max-width: fit-contents overrides setting width to 100% when the button card is in a grid cell with a defined column-width. So this does not work: card:

I was able to locate and modify the code to set max-width: none and this accomplished my needs but it causes problems when button-card is used outside of the confines of a CSS grid.

953 if (configCardStyle.width) { 954 this.style.setProperty('flex', '0 0 auto'); 955 this.style.setProperty('max-width', 'fit-content'); 956 }

Specifying the following does not work because the style (max-width: fit-contents) is forced. Allowing the card to accept an override to max-width: fit-contents to none would do the trick. card:

RomRider commented 1 year ago

fit-content is only set when width is set in styles for the card object

smartqasa commented 1 year ago

I didn't realize that. So removing width: 100% will allow the card to expand to 100% of the grid-column-width? That works for me. I will close this FR