-
Dec 3rd, 2015, 11:48 AM
#1
[RESOLVED] Select height is not consistant
I'm creating a contact form where I prompt for the user's city, state, and zip code. The markup is:
Code:
<input id="physicalStreet1" placeholder="123 Main St" type="text" />
<input id="physicalStreet2" placeholder="Apt 2" type="text" />
<div class="singleLine">
<input id="physicalCity" placeholder="Anytown" type="text" />
<select id="physicalState">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option selected="selected" value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<input id="physicalZip" placeholder="12345" type="number" />
They're all side by side and for some reason the select is shorter than the two inputs and since its sandwiched in between the two inputs, it's very obvious. How can I fix this?
-
Dec 3rd, 2015, 06:02 PM
#2
Re: Select height is not consistant
Are you using custom styles anywhere on these form elements? Looks fine in Firefox with just plain HTML. Chromium has the <select> a couple of pixels smaller in height, but hardly noticeable.
-
Dec 3rd, 2015, 06:06 PM
#3
Re: Select height is not consistant
No, I'm using IE11 and I haven't done any styling on them yet. The only thing I've done is setup the parent(div) and all its children with flexbox settings: http://jsfiddle.net/3mpxofem/1/
Also as a side note, I noticed that the flexbox isn't working in FireFox.
-
Dec 4th, 2015, 09:29 AM
#4
Re: [RESOLVED] Select height is not consistant
I'm marking the thread resolved because I found a solution to my original issue, I set the box-sizing to content-box and all is better. However, I still don't know why FireFox doesn't like the Flexbox styles I'm using in case anyone wants to make a stab at that.
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|