ladybird icon indicating copy to clipboard operation
ladybird copied to clipboard

LibWeb: Make input boxes use natural width/height

Open Arben-Sear opened this issue 8 months ago • 12 comments

This is a copy of this pull request from the Serenity repo, created June 6th, 2024. Below is the text of that pull request:

Text input boxes inside a parent with no defined width, such as the following, appear too short in Ladybird.

<div style = "float:left">
    <input style = "width:auto">
</div>

See issue, which this fixes.

The fix was two parts: remove some hacky code from HTMLInputElement::adjust_computed_style() that set the width of any input box container with <... width:auto> and instead use set_natural_width() and set_natural_height() in the Layout::BlockContainer constructor.

NOTES/Pending issues

  • Despite setting natural height to 1lh, some text boxes (such as the one on the ladybird home screen) are now too short. I believe natural width and height might ignore padding/margins/borders, but I'm not sure. Fixed

Arben-Sear avatar Jun 06 '24 17:06 Arben-Sear