CODEWITHSUNDEEP
htmlcss
user3307017
user3307017

Reputation: 121

HTML <Select> width not equal to other controls

I have a Select field that I want to take up as much space as every other field in my form, and they go down vertically.
When I set the width of my controls to 70% all controls assume this width, except Select.

HTML

<div>
<ul class="flex-container">
    <li class="flex-item">
        <input type="date" id="dateField" /> 
    </li>
    <li class="flex-item">
        <select type="text" id="areaField">
            <option value="">   Choose</option>
            <option value=" 1">  1</option>
            <option value=" 2">  2</option>
            <option value=" 3">  3</option>
            <option value=" 4">  4</option>
        </select>
    </li>
</ul>
</div>

CSS:

#dateField, #areaField{
   width: 70%;
}

.flex-container {
      list-style: none;
}

You can see a JSFiddle Demo of what I mean here.

Does anyone know what to do about that :)?

Upvotes: 2

Views: 1574

Answers (1)

Singular1ty
Singular1ty

Reputation: 2615

You'll want to invoke the box-sizing property and set it to border-box.

There are some good discussions about this issue on a previous thread. The suggested answer of content-box doesn't work unless you have a border surrounding the input/select, so border-box will work better for you in this situation.

#dateField, #areaField{
    width: 70%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

.flex-container {
	  list-style: none;
}
<div>
    <ul class="flex-container">
        <li class="flex-item">
            <input type="date" id="dateField" /> 
        </li>

        <li class="flex-item">
            <select type="text" id="areaField">
            	<option value=""> Choose</option>
            	<option value=" 1">1</option>
                <option value=" 2">2</option>
                <option value=" 3">3</option>
                <option value=" 4">4</option>
            </select>
        </li>
    </ul>
</div>

Upvotes: 4

Related Questions