Is there any way to have a fieldset width only be as wide as the controls in them?

Question

It seems that fieldset defaults to 100% width of its container. Is there any way that you can have the field set just be as big as the widest control inside the fieldset?

score 133 · Accepted Answer · answered Feb 20 '10 at 14:47

133

Use display: inline-block, though you need to wrap it inside a DIV to keep it from actually displaying inline. 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>

answered Feb 20 '10 at 14:47

tvanfosson

524,688
99
697
795

Yeah, this is a better/ simpler idea than my answer if it works across all the browsers you care about. – Tom Mar 22 '11 at 18:12
3

FYI: `display: inline-block;` doesn't work in iE6 and IE7. Happy you if you don't have to care about them. :) – Diemo Jul 30 '11 at 16:06
Works great in IE8 and Firefox 10! – Ed Bayiates Feb 10 '12 at 04:40
What is the voodoo with the div. It appears necessary, but why? – superluminary Jan 06 '17 at 12:19
@superluminary Normally a `fieldset` will display as a block element the full width of the page. Making it inline, rather than block, allows the width to collapse to the content, but removes it's role as preserving the vertical flow of the page. Wrapping it in the `div`, another block element, compensates for that and preserves the vertical flow. – tvanfosson Jan 06 '17 at 13:04
1

The solution didn't work for me. I had to set `fieldset{ min-width: auto; }` as fieldset uses min-width as -webkit-min-content, as mentioned in the following post - https://stackoverflow.com/questions/27660423/fieldset-width-100-of-parent. – Naren Feb 16 '18 at 10:21

score 16 · Answer 2 · edited Feb 02 '17 at 20:26

16

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

If you want to separate two fieldsets vertically, use a single <br/> between them. This is semantically correct and no harder than it has to be.

edited Feb 02 '17 at 20:26

Denilson Sá Maia

47,466
33
109
111

answered Feb 20 '10 at 15:10

for IE 11, display:inline worked, but not display:inline-block – Gabe Halsmer Mar 26 '14 at 04:53

score 8 · Answer 3 · answered Feb 20 '10 at 14:49

8

You could float it, then it will only be as wide as its contents, but you'll have to make sure you clear those floats.

answered Feb 20 '10 at 14:49

Tom

22,301
5
63
96

score 1 · Answer 4 · edited Jun 08 '11 at 18:13

1

This also works.

fieldset {
  width:0px;
}

edited Jun 08 '11 at 18:13

lethalMango

4,433
13
54
92

answered Jun 08 '11 at 13:25

dan.s.ward

21
4

1

This doesn't work if you have multiple elements within the fieldset that should appear on the same line. – Matthew Schinckel Sep 21 '11 at 02:18
Sure it does, if you use a block element to wrap them or a combination of nowrap and explicit breaks. – dan.s.ward Sep 30 '11 at 15:39

score 1 · Answer 5 · edited Aug 25 '12 at 11:31

Unfortunately neither display:inline-block nor width:0px works in Internet Explorer up to version 8. I have not tried Internet Explorer 9. Much as I would like to ignore Internet Explorer, I can't.

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

score 0 · Answer 6 · answered Feb 20 '10 at 14:42

0

You can always use CSS to constrain the width of the fieldset, which would also constrain the controls inside.

I find that I often have to constrain the width of select controls, or else really long option text will make it totally unmanageable.

answered Feb 20 '10 at 14:42

Jonathan Julian

12,163
2
42
48

but i want to have it dynamic so the fieldset will "autosize" and not be a predetermined width – leora Feb 20 '10 at 14:46

score 0 · Answer 7 · answered Dec 05 '18 at 04:59

0

 fieldset {

    min-width: 0;

    max-width: 100%;

    width: 100%;
 }

answered Dec 05 '18 at 04:59

Trupti

627
5
9

3

Please add some explainations – Rarblack Dec 05 '18 at 06:22
Not even Tim Berners-Lee could tell you why this work but shit just works lol thanks! – lucasjohnson Apr 22 '19 at 00:33

score 0 · Answer 8 · edited Jun 30 '23 at 14:56

0

try this

<fieldset style="max-width: max-content;" >
   <legend>Blah</legend>
</fieldset>

edited Jun 30 '23 at 14:56

András Aszódi

8,948
5
48
51

answered Jul 30 '19 at 05:37

Love Kumar

1,056
9
10

I think you should apply style="max-width: max-content;" on the fieldset tag – Benoît Jun 30 '22 at 14:46
Yes, it works nicely, after applying @Benoît 's suggestion (which I edited into the answer). – András Aszódi Jun 30 '23 at 14:57

score 0 · Answer 9 · answered Apr 10 '23 at 08:37

0

width: fit-content; works.

answered Apr 10 '23 at 08:37

Hyunbin

423
4
6

score -1 · Answer 10 · answered Oct 12 '17 at 08:34

-1

i fixed my issue by override legend style as Below

.ui-fieldset-legend
{
  font-size: 1.2em;
  font-weight: bold;
  display: inline-block;
  width: auto;`enter code here`
}

answered Oct 12 '17 at 08:34

El Ghandor Yasser

345
4
8

score -2 · Answer 11 · answered Dec 20 '13 at 17:20

-2

Going further of Mihai solution, cross-browser left aligned:

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

Cross-browser right aligned:

<TABLE>
  <TR>
    <TD WIDTH=100%></TD>
    <TD>
      <FORM>
        <FIELDSET>
          ...
        </FIELDSET>
      </FORM>
    </TD>
  </TR>
</TABLE>

answered Dec 20 '13 at 17:20

Dgimeno

1

2

While this might work, tables aren't usually considered good practice for layouts...http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – StackExchange What The Heck Dec 20 '13 at 17:41
1

imagine doing this for 5 fieldsets? 10? 15??! don't do it! – Taylor Brown Mar 12 '15 at 20:09
1

For any new devs coming here. Don't do this. You'll use 10 times more code than you need. – superluminary Jan 10 '17 at 14:02

score -2 · Answer 12 · answered Dec 31 '13 at 14:09

            <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>

score -3 · Answer 13 · answered Oct 21 '13 at 08:50

-3

You can also put the fieldset inside a table, like so:

<table>
    <tr>
       <td>
           <fieldset>
           .......
           </fieldset>
       </td>
    </tr>
</table>

answered Oct 21 '13 at 08:50

Mihai

1

Is there any way to have a fieldset width only be as wide as the controls in them?

13 Answers13

Linked

Related