CODEWITHSUNDEEP
htmlcssfieldset
leora
leora

Reputation: 196539

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

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?

Upvotes: 85

Views: 119686

Answers (14)

zjffun
zjffun

Reputation: 1243

max-inline-size: max-content may help you, example:

<fieldset style="max-inline-size: max-content">
  <legend>Legend</legend>
  <div><input type="text" style="width: 100px" /></div>
  <div>
    <input type="text" style="width: 200px" />
  </div>
  <div>
    <input type="text" style="width: 50px" />
  </div>
</fieldset>

BTW, <fieldset> has min-inline-size: min-content by default. So if you meet width or max-width 'seems' does not take effect, you can set min-inline-size: 0 to fix this.

See: Styling with CSS - : The Field Set element - HTML: HyperText Markup Language | MDN

Upvotes: 0

Love Kumar
Love Kumar

Reputation: 1124

try this

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

Upvotes: 1

Hyunbin
Hyunbin

Reputation: 733

width: fit-content; works.

Upvotes: 0

Trupti
Trupti

Reputation: 657

 fieldset {

    min-width: 0;

    max-width: 100%;

    width: 100%;
 }

Upvotes: 0

El Ghandor Yasser
El Ghandor Yasser

Reputation: 384

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

Upvotes: -1

user164226
user164226

Reputation:

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.

Upvotes: 17

Prakash Bayas
Prakash Bayas

Reputation: 1

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

Upvotes: -2

Dgimeno
Dgimeno

Reputation: 1

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>

Upvotes: -2

Mihai
Mihai

Reputation: 1

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

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

Upvotes: -3

Paul D
Paul D

Reputation: 11

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

Upvotes: 1

dan.s.ward
dan.s.ward

Reputation: 21

This also works. 

fieldset {
  width:0px;
}

Upvotes: 1

Tom
Tom

Reputation: 22841

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.

Upvotes: 8

tvanfosson
tvanfosson

Reputation: 532465

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>

Upvotes: 134

Jonathan Julian
Jonathan Julian

Reputation: 12264

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.

Upvotes: 0

Related Questions