How to make Fieldset as wide as its parent (match parent width)

Question

Let's take a look at this code:

<div style="width:100%;">
    <ul>
        <li><a>ردیف سند حسابداری</a></li>
    </ul>
    <div style="width:100%; overflow-x:scroll;">
        <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
    </div>
</div>

This is what I want.

I want the child not to be wider than its parent and if it is, then it must scroll. But when I use a fieldset, every thing mixes up. Take a look at this:

<div style="width:100%;">
<fieldset style="width:100%;">
    <ul>
        <li><a>test</a></li>
    </ul>
    <div style="width:100%; overflow-x:scroll;">
        <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
    </div>
</fieldset>

and the JS Fiddle here:

correct

wrong

What should I do?

It is just a test for stackoverflow. just a demo. but in my project i should use. there isn't any other way! — ConductedClever, Jul 23 '15 at 09:30
Do you use any kind of normalize.css? Fieldsets by default do have alot of browser styling to them so this could be the source of your breakage. Can you add a broken JSFiddle? — Dan Gamble, Jul 23 '15 at 09:30
@DCdaz there is n't any need to the real code. it is asp web form and i should use fieldset. the css is't needed. the code i gave you is enough. — ConductedClever, Jul 23 '15 at 09:32
actually there is your css is pretty vital considering you dont appear to have a reset in place or any css at all to do with fieldset and you are asking what the issue is. — , Jul 23 '15 at 09:43
@DCdaz i mean this code is enough. see the jsfiddle and reach that this is enough. — ConductedClever, Jul 23 '15 at 09:45

score 2 · Answer 1 · 2015-07-23T12:03:47.320

2

Fieldset's are one of many tag's that come with browser defined styles this is why we use reset's.

I have my own reset but you can pick one's up online like html5docs (put this at the top of your CSS file.)

The reason you need a reset is because if you look at the source code for fieldset in say Chrome you will see that Chrome automatically applies these rules to fieldset.

fieldset {
    display: block;
    -webkit-margin-start: 2px;
    -webkit-margin-end: 2px;
    -webkit-padding-before: 0.35em;
    -webkit-padding-start: 0.75em;
    -webkit-padding-end: 0.75em;
    -webkit-padding-after: 0.625em;
    border: 2px groove threedface;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    min-width: -webkit-min-content;
}

The reason browser's automatically apply style rules to certain elements is because these element's are meant to be used in specific way's and the browser applies there common usage styling so that when placed in a document they are recognizable for what they are.

In your case a fieldset which shows a group of fields that can be edited by the user.

update

Your Question was really unclear so.

Fieldset is a block level element you are wanting it to act like and inline element so give it display:inline;

edited Jul 23 '15 at 12:03

answered Jul 23 '15 at 09:46

so. what is the property i should reset? what causes the problem? – ConductedClever Jul 23 '15 at 09:51
so let me pull you out of shock. i copied that code and used to style my fieldset element but nothing changed! i mean that which property of fieldset i should change to reach the result? – ConductedClever Jul 23 '15 at 09:56
js fiddle me what you have done – Jul 23 '15 at 09:58
because it works fine https://jsfiddle.net/xLf1Lxuz/1/ – Jul 23 '15 at 09:59
I saw the jsfiddle you gave but it was not correct!!! i tested just as you did in jsfiddle. – ConductedClever Jul 23 '15 at 10:03
What are you talking about. You need that reset on your site. there is no two ways about it. otherwise you are going to keep hitting walls like this. the reset doesnt just effect Fields. this answer has been voted up 5 times think about it it's not wrong. actually look at the css notice how the very first set of rules effect fieldset and many other styles. – Jul 23 '15 at 10:06
I am talking about the problem that is not fixed yet. you gave me jsfiddle and i saw it but take a look and you will see that still "the width of fieldset does not match it's parent". am i wrong? my question from the start was how make the fieldset as wide as its parent and i am seeking for the answer of that and nothing else. your answer about reseting css styles was awsome but not the answer i wanted and still ... . – ConductedClever Jul 23 '15 at 11:43
you have three elements at 100%..... So it is actually the same width. do you mean that you want this to happen https://jsfiddle.net/xLf1Lxuz/3/ – Jul 23 '15 at 11:49
"inspect element" it and you will see that the width of fieldset is not equal to its parent and it is much bigger. – ConductedClever Jul 23 '15 at 11:54
then why do you want a scroll? check my answer again – Jul 23 '15 at 12:01
see the answer i've added and you'll got it. thanks. – ConductedClever Jul 23 '15 at 12:06
Fieldset is a block level element you are wanting it to act like and inline element so give it display:inline; like in my answer – Jul 23 '15 at 12:49

score 2 · Accepted Answer · edited Mar 21 '19 at 22:44

Finally I found the answer. The answers of the friends who answered here was helpful to me and the answer was very far from my mind! This is the corrected html:

<div style="width:100%;">
<fieldset style="width:97%; min-width:0;">
    <ul>
        <li><a>test</a></li>
    </ul>
    <div style="width:100%; overflow-x:scroll;">
        <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
    </div>
</fieldset>

You see? the min-width is the problem! I don't know how it mixes every thing up but it does! The answer here helped me (my question will be a duplicate).

score 0 · Answer 3 · answered Jul 23 '15 at 09:41

0

<div style="width:100%; overflow-x:scroll;">
<fieldset style="width:100%">
<ul>
<li><a>test</a></li>
</ul>
<div style="width:100%">
 <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</fieldset>
</div>

you can try to put overflow-x:scroll; on your div

answered Jul 23 '15 at 09:41

ar em

434
2
5
18

I have tested this too before. but the thing is, the code you gave solves the whole page scrolling but the fieldset width is still stretched! Agree? – ConductedClever Jul 23 '15 at 09:44
ok or you can decrease the width of your div like
– ar em Jul 23 '15 at 09:51
it doesn't work. thanks. – ConductedClever Jul 23 '15 at 10:03

How to make Fieldset as wide as its parent (match parent width)

3 Answers3