Best IT Recipes

Is there a way to have the width of a set of fields only as wide as the controls in them?

It seems that by default the field is set to 100% of its container. Is there a way that you can set the field to be as large as the widest control inside the field set?

+75
html css fieldset
Feb 20 2018-10-20
source share
12 answers

Use display: inline-block , although you need to wrap it inside a DIV so that it doesn't appear in the line. Tested in Safari.

 <style type="text/css"> .fieldset-auto-width { display: inline-block; } </style> <div> <fieldset class="fieldset-auto-width"> <legend>Blah</legend> ... </fieldset> </div>
+119
Feb 20 2018-10-20
source share

fieldset {display:inline} or fieldset {display:inline-block}

If you want to separate two fields vertically, use one <br/> between them. This is semantically correct and no more complicated than it should be.

+14
Feb 20 2018-10-18T10
source share

You can swim it, then it will only be as wide as its contents, but you will need to clear these floats.

+8
Feb 20 2018-10-20
source share

Unfortunately, neither display:inline-block nor width:0px worked in Internet Explorer prior to version 8. I did not try Internet Explorer 9. No matter how I want to ignore Internet Explorer, I cannot.

The only option that works in Firefox and Internet Explorer 8 is float:left . The only weak drawback is that you must remember to use clear:both for the element that follows the form. Of course, it will be very obvious if you forget; -)

+1
Feb 17 2018-12-12T00:
source share
  fieldset { min-width: 0; max-width: 100%; width: 100%; }
+1
Dec 05 '18 at 4:59
source share

You can always use CSS to limit the width of the set of fields, which would also limit the controls inside.

I find that I often have to limit the width of the select controls, otherwise the really long option text will make it completely unmanageable.

0
Feb 20 2018-10-20
source share

This also works.

 fieldset { width:0px; }
0
Jun 08 '11 at 13:25
source share

try it

 <fieldset> <legend style="max-width: max-content;" >Blah</legend> </fieldset>
0
Jul 30 '19 at 5:37
source share

I fixed my problem by redefining the legend style as below

 .ui-fieldset-legend { font-size: 1.2em; font-weight: bold; display: inline-block; width: auto;`enter code here` }
-one
Oct 12 '17 at 8:34 on
source share

Mihai's further solution, left-left alignment:

 <TABLE> <TR> <TD> <FORM> <FIELDSET> ... </FIELDSET> </FORM> </TD> </TR> </TABLE>

Aligned using cross browser:

 <TABLE> <TR> <TD WIDTH=100%></TD> <TD> <FORM> <FIELDSET> ... </FIELDSET> </FORM> </TD> </TR> </TABLE>
-2
Dec 20 '13 at 17:20
source share
  <table style="position: relative; top: -0px; left: 0px;"> <tr> <td> <div> <fieldset style="width:0px"> <legend>A legend</legend> <br/> <table cellspacing="0" align="left"> <tbody> <tr> <td align='left' style="white-space: nowrap;"> </td> </tr> </tbody> </table> </fieldset> </div> </td> </tr> </table>
-2
Dec 31 '14 at 2:09
source share

You can also put a set of fields inside a table, for example:

 <table> <tr> <td> <fieldset> ....... </fieldset> </td> </tr> </table>
-3
Oct 21 '13 at 8:50
source share


More articles:


All Articles