search

andybrewer / mvp

MVP.css — Minimalist classless CSS stylesheet for HTML elements
https://andybrewer.github.io/mvp/
MIT License
4.98k stars 192 forks source link

How to make input width same as the card container #81

Closed zemian closed 2 years ago

zemian commented 2 years ago

Hi, I am trying make the input width same width as the card container. Looking at the example: https://andybrewer.github.io/mvp/mvp.html, the input width has size="20", but if I remove it, and add style="width: 100%;", it will not aligned correctly. Is there a quick way to do this?

Thanks!

andybrewer commented 2 years ago

I just tried in Chrome and style="width: 100%;" does increase the width of the input for me.

Screen Shot 2022-09-12 at 8 34 33 AM
andybrewer commented 2 years ago

Oh, I misread your comment. I see how it's not aligned.

You could use style="width: calc(100% - 1.6rem);"

<input> has 0.8 rem left & right padding.

Screen Shot 2022-09-12 at 8 37 46 AM
zemian commented 2 years ago

Okay, thanks for the workaround Andy! It would be nicer to not have to do that explicitly. But I guess we can't have everything. :)

Cheers!

andybrewer commented 2 years ago

Actually, I think you're right! I've updated it here: https://github.com/andybrewer/mvp/releases/tag/v1.10.1