2

My html page has a container, a left div and a right div. Both of left and right div are enclosed within the container, having width as 20% and 80% respectively.

The Problem

In #right div I have a fieldset who's width is set as auto. This fieldset have two html elements of class .form-label and .form-input both having a equal width of 48%. The problem is that if one of my label has large text (not larger than the space available in right div and with respect to all rules) than the fieldset is only expanded upto a particular width and after that my label and input element instead staying on same line are moved into two different lines. This happens even if there is still the space for the div to expand.

Note: I want to point out that even though the issue is applicable to both firefox and chrome but, the issue is more visible in chrome even with mid lenght of text as given in the example.

Here is the code: [Please see the output at fullscreen to understand the issue]

.container
{
    box-sizing: border-box;
    max-width: 100%;
    position:relative;
    float:bottom;
    height: 100%;
    margin: 6rem 0 1.5rem 0;
    overflow-x: auto;
    clear: both;
    display: -webkit-flex;  
    display: -ms-flexbox;  
    display: flex;
    flex-wrap:nowrap;
    flex-basis:0;
    align-items:stretch;
    justify-content: center;
   
}

#left{
    margin: 0;
    width:20%;
    padding: 4px 4px 4px 4px;
    color: #000011;
    font-weight:bold; 
    text-align: center;
    order:0;
    flex-order: 0;
    -webkit-order: 0;
    -ms-flex-order: 0;
    align-self:stretch;
}

#right{
    margin-top: 0;
    width: 80%;
    padding: 4px 4px 4px 6px;
    text-align: center;
    flex-order: 1;
    order:1;
    -webkit-order: 1;
    -ms-flex-order: 1;
    align-self:stretch;
    overflow: auto;
}
.form{
    text-align:right !important;
    
}

.form-input{
    width:48%;
    margin-left:0.5rem !important;
    margin-bottom: 0.5rem !important;
    vertical-align: middle;
    display: inline-block;
    text-align: left;
}
.form-label{
    width:48%;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    vertical-align: super ;
}
.form-button{
    width:auto;
    margin-top: 1rem;
}

fieldset{
    width: auto;
    max-width: 100%;
    display:inline;
    margin: 1rem auto 2rem auto;
    border-radius: 0.5rem;
    border: 3px double #000000;
}
<div class="container">
  <div id="left">
     blah blah balah blah blah.......
   </div>

  <div id="right">
    <fieldset class="form">
            <legend class="fit-title-blackgrad">Defaulter List Selection</legend>
            <div>
                <label class="form-label">Select Semester</label>
                <select class="form-input selecttodiv" name="dsem" id="dsem" tabindex="1" required=""><option value="">------</option><option value="I">I</option><option value="II">II</option><option value="III">III</option><option value="IV">IV</option><option value="V">V</option><option value="VI">VI</option><option value="VII">VII</option><option value="VIII">VIII</option>                </select>
            </div>
            <div>
                <label class="form-label">From (Month)</label>
                <select class="form-input" name="dfmonth" id="dfmonth" tabindex="2" required=""><option value="">------</option><option value="7">July</option>            </select>
            </div>
            <div>
                <label class="form-label">Cut-Off Percentage........................</label>
                <input class="form-input" type="number" min="50" max="75" name="dcutoff" id="dcutoff" tabindex="4" value="75" required="">
                
            </div>
            <div>
                <input type="submit" class="button form-button" value="Load">
            </div>
                    
           </fieldset>
  
    </div>
  </div>

I have gone through various post, however I am unable to find a solution.

I hope somebody helps me here.

Thanks in advance for any help.

UPDATE

Let me explain in detail what is happening exactly.

The width of #right container is 1071px in fullscreen. fieldset which is the container of form elements in #right div is an inline element, because I don't want it to occupy fullscreen but, in case if it have that much content. Hence fieldset can occupy max-width of 100%. Now the total width of fieldset is distributed equally among .form-input and .form-label (viz width:48%). Both of the said element is enclosed in the div which does not have any css property assigned to it except overflow:hidden;'. Hence considering the width of 1066px, each of.form-inputand '.form-label should be able to occupy maximum width of 511px. But this does not happen in mycase.

If you see the given example in full screen. You will find that even if the total space of 1066px available in #right div. My cut-off percentage... label occupy only 272px and the corresponding input occupies around 229px. This two elements appears on two different line even though they should appear on same line. Also the sum of their width's+margins+paddings+borders=524px which is much less than the total space available i.e. 1066px. Even if I add padding,margin and border of fieldset, the total width comes out to be 550px.

So my question is that why does the fieldset does not expand as per the width of its inner content and what could i do to overcome this without hampering my site layout.

Note: I don't want label to break into separate line, so display:inline-block; alone is not an option in this case. I had also tried setting white-space:nowrap but, this lead to truncation of my string i.e it keeps flowing towards right until it is made hidden by coming input element at right.

min-widthandmax-width` are removed because it does not serve any purpose as i have realized while discussing the problem with @Ankush

geeksal
  • 4,856
  • 3
  • 24
  • 47

2 Answers2

2

Okay so I ran your code snippet in full-screen and played a bit with the width property, and the problem is with you values of the width of form-label and form-input.

Firstly, you have specified max-width, min-width property along with the width property for both of them. But when you specify a specific width value by defining width:48% , then defining min-width and max-width have no sense as you have defined a fixed width for the container, so min-width and max-width will have no effect.

But the main problem is with defining the width for a label tag. Label tag is an inline element. Hence you can't really define it's width.

So what is happening in your case is that when the width of text in the label tag exceeds the defined width value initially, then the sum of widths of form-input and form-label exceeds the 100% value.

So now the fieldset tries to increase its width, but this act of increasing of width of fieldset results in increased overall width of form-label(which works in our favor) AND also the width of form-input(which doesn't works in favor as it reduces the total available space).

So now the increased width of form-label due to increased width of fieldset is not sufficient enough to accommodate the width of text in label tag as that width of text is already greater than and will always be greater than the increased width you get due to increase in the width of fieldset.

So if you want your your label tag to follow the width you defined, then you can simply define the display as inline-block

But then this will split the label text into muliple lines as soon as it exceeds the defined width, which you din't want in the very first place as it will kill the purpose of auto increament of fieldset's width.

So the most appropriate solution i see is to limit the max-width of form-input in rem and commenting out fixed width value of form-input as this will help you eliminate that FACTOR I mentoined above which was not working in our favor.

Ankush Raghuvanshi
  • 1,392
  • 11
  • 17
  • If I do as you say the problem goes but it effects my layout, because input elements differ in size due to this. This is the reason to keep `width:48%` so that all input elements align to same line also all label align to the same line. So can you improve the answer to mitigate this concern – geeksal Jul 31 '16 at 11:21
  • @geeksal, what exactly do you mean by "input elements differ in size due to this" ? Do you mean to say that the possible options in the select box vary a lot in size and that max length of an option won't fit in one line if you reduce the width from 48%? Is that what you mean to say? – Ankush Raghuvanshi Jul 31 '16 at 11:35
  • Coz if you know what is the max width that any of the option text in the select box will occupy, then what you can do to keep your input elements and labels aligned is that comment out the width:48% from form-input and increase the min-width of form-input to say upto 18rem, i.e., a fixed value of min-width according the width of max length of text of all the options, but in px or rem, not in %. Try it. Hopefully it should fix your alignment. – Ankush Raghuvanshi Jul 31 '16 at 11:41
  • ok I removed `min-width`. I wanted the input elements and labels to be of equal width. I cannot keep width in pixel becoz it hampers the responsive design of my site. My actual question is that in-spite of ample of space available why the feildset does not expand and what it is the solution to that. – geeksal Jul 31 '16 at 12:29
  • Firstly, I asked you to comment out **width** and not the **min-width** and to give a fixed **min-width**. If you can't keep min-width in pixels, then use rem, but not in %. And fieldset won't expand until the width of form-label + form-input is less than 96% (i.e., 48 + 48). So, what happens is that when you define 48% fixed width of both, then as the size of fieldset increases, then the equivalent 48% value for both of them increases. Hence the form-input also increases in size, due to which the sum of form-input width and form-label width always exceeds the available space. – Ankush Raghuvanshi Jul 31 '16 at 12:51
  • Hence they are never in the same line ever after. I hope you understand what i'm trying to say. – Ankush Raghuvanshi Jul 31 '16 at 12:52
  • Ok i just checked one more thing. The **label** tag is an **inline** element, which means that its **width can't be defined**. So even if you define width of both form-input and form-label as some fixed value say 30% each, and then give a value to form-label which exceeds the 30% width, then the text of form-label won't split into two lines as its an inline element. So the when the width of the text of form-label(in %) + width of form-input(in %) exceeds the width of the fieldset, then obviously it will remain greater than that ever after that Hence they are never aligned in the same line. – Ankush Raghuvanshi Jul 31 '16 at 13:06
  • So if you want the text of your form-label to split after reaching a particular width then you can define the css propert **display: inline-block** for form-label. See this -> http://stackoverflow.com/questions/2820586/how-can-i-control-the-width-of-a-label-tag Even i was confused initially, coz even after making all the boders and margins 0, it was not getting aligned in the same line. I'll edit my answer for you. :) – Ankush Raghuvanshi Jul 31 '16 at 13:08
  • I appreciate your effort but, the problem persist. I'll edit the question in detail give me some time – geeksal Jul 31 '16 at 13:21
  • Ya, i realized that if you'll make it as inline block, then the form-label will keep splitting the text into lines, which is what inline block will do, but then you din't want that to happen in the first place as it will kill the purpose of auto increasing the width of fieldset. As of,now the initial solution that i suggested, of commenting the **width** for form-input and defining the appropriate **min-width** in **rem** according to the longest text in options is the best solution for you. Coz now you even know why adjusting the width of a **label** tag is not working & nor will inline block – Ankush Raghuvanshi Jul 31 '16 at 13:37
  • see my updated question for clarification. Your theory is wrong in my case, at least mathematically. – geeksal Jul 31 '16 at 14:44
  • Okay, in your updated question, you've mentioned that I suggested to remove min-width and max-width, which is not the case. Firstly, I pointed out that min-width and max-width won't work when you have specified the width attribute in css as width, min-width and max-width are three different properties in css. Secondly, i specifically suggested you to comment out the **width** of form-input and define the **min-width** for the same in rem. I suppose you should correct the same in your question. Meanwhile I'll check the mathematical part of the same. – Ankush Raghuvanshi Jul 31 '16 at 15:01
  • I have removed min and max width from my stylesheet not because you have said. I mean because of your logic i realize that yes it does not server any purpose because my width is already set to 48%; also i always want both to have same width hence what is the need of setting max-with and min-width. I will edit my question words to reflect the context. – geeksal Jul 31 '16 at 15:13
  • Running the snippet now in both Firefox as well as Chrome shows some changes. The Cut-Off percentage........... label is one line and the input corresponding to the same is in other line. This has happened coz you removed min-width and max width on my instructions. But i apologize for the same as now when I add them back, say your width is 48% and now I add max-width as 44% then the input box width is reduced to 44%. So you should put back the max-width aspect to it. – Ankush Raghuvanshi Jul 31 '16 at 15:40
0

Change width and max-width of fieldset to %. like so:

.container
{
    box-sizing: border-box;
    max-width: 100%;
    position:relative;
    float:bottom;
    height: 100%;
    margin: 6rem 0 1.5rem 0;
    overflow-x: auto;
    clear: both;
    display: -webkit-flex;  
    display: -ms-flexbox;  
    display: flex;
    flex-wrap:nowrap;
    flex-basis:0;
    align-items:stretch;
    justify-content: center;
   
}

#left{
    margin: 0;
    width:20%;
    padding: 4px 4px 4px 4px;
    color: #000011;
    font-weight:bold; 
    text-align: center;
    order:0;
    flex-order: 0;
    -webkit-order: 0;
    -ms-flex-order: 0;
    align-self:stretch;
}

#right{
    margin-top: 0;
    width: 80%;
    padding: 4px 4px 4px 6px;
    text-align: center;
    flex-order: 1;
    order:1;
    -webkit-order: 1;
    -ms-flex-order: 1;
    align-self:stretch;
    overflow: auto;
}
.form{
    text-align:right !important;
    
}

.form-input{
    width:48%;
    max-width: 48%;
    min-width: 11rem;
    margin-left:0.5rem !important;
    margin-bottom: 0.5rem !important;
    vertical-align: middle;
    display: inline-block;
    text-align: left;
}
.form-label{
    width:48%;
    max-width: 48%;
    min-width: 11rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    vertical-align: super;
}
.form-button{
    width:auto;
    margin-top: 1rem;
}

fieldset{
    width: 90%;
    max-width: 90%;
    display:inline;
    margin: 1rem auto 2rem auto;
    border-radius: 0.5rem;
    border: 3px double #000000;
}
<div class="container">
  <div id="left">
     blah blah balah blah blah.......
   </div>

  <div id="right">
    <fieldset class="form">
            <legend class="fit-title-blackgrad">Defaulter List Selection</legend>
            <div>
                <label class="form-label">Select Semester</label>
                <select class="form-input selecttodiv" name="dsem" id="dsem" tabindex="1" required=""><option value="">------</option><option value="I">I</option><option value="II">II</option><option value="III">III</option><option value="IV">IV</option><option value="V">V</option><option value="VI">VI</option><option value="VII">VII</option><option value="VIII">VIII</option>                </select>
            </div>
            <div>
                <label class="form-label">From (Month)</label>
                <select class="form-input" name="dfmonth" id="dfmonth" tabindex="2" required=""><option value="">------</option><option value="7">July</option>            </select>
            </div>
            <div>
                <label class="form-label">Cut-Off Percentage........................</label>
                <input class="form-input" type="number" min="50" max="75" name="dcutoff" id="dcutoff" tabindex="4" value="75" required="">
                
            </div>
            <div>
                <input type="submit" class="button form-button" value="Load">
            </div>
                    
           </fieldset>
  
    </div>
  </div>
dNitro
  • 5,145
  • 2
  • 20
  • 45
  • Your output does not show the label on the single line even though the space is available., I don't want to break the words. I have a fairly large stylesheet, hence I forget to include the alignment of the button. However it is not the concern of OP. – geeksal Jul 31 '16 at 10:14
  • So just change the `width` and `max-width` of `fieldset` to `%`. answer UPDATED. – dNitro Jul 31 '16 at 10:46