Why resize: both does not work on fieldset?

user_342095 0
Viewed 51

Why does it not enable resize control on the fieldset?

Docs only say that

resize does not apply to the following:

  • Inline elements
  • Block elements for which the overflow property is set to visible

fieldset {
  resize: both;
  overflow: hidden;
}
<fieldset>
  <legend>Controls</legend>
  <label>Input: </label><input type="number" value="20"/>
</fieldset>

I tried wrapping fieldset in a div and also wrapping everything in fieldset with a div and made that resizeable. That kind of works but the drag handle is many pixels off the fieldset border. Also when resizing it looks weird and sometimes hides the fieldset borders.

css html
1 Answers

Check this, it may help you.

There are several special styling considerations for .

Its display value is block by default, and it establishes a block formatting context. If the is styled with an inline-level display value, it will behave as inline-block, otherwise it will behave as block. By default there is a 2px groove border surrounding the contents, and a small amount of default padding. The element has min-inline-size: min-content by default.

If a <legend> is present, it is placed over the block-start border. The shrink-wraps, and also establishes a formatting context. The display value is blockified. (For example, display: inline behaves as block.)

There will be an anonymous box holding the contents of the <fieldset>, which inherits certain properties from the <fieldset>. If the

is styled with display: grid or display: inline-grid, then the anonymous box will be a grid formatting context. If the `` is styled with display: flex or display: inline-flex, then the anonymous box will be a flex formatting context. Otherwise, it establishes a block formatting context.

You can feel free to style the <fieldset> and <legend> in any way you want to suit your page design.

src: link

user_161682650
Related