Pontus Svedberg Pontus Svedberg - 1 year ago 91
HTML Question

HTML: Textbox and Select Dropdown are not level

I've been messing with this for a while now and I can simply not get the dropdown to be level with the textboxes! I've been changing the padding, margin, borders, height and all I can think of to make it be level both at the top and at the bottom.

What could be wrong?

enter image description here



.metricDateTextbox {
width: 130px;
padding: 11px;
border: 1px solid white;
color: transparent;
text-shadow: 0 0 0 black;
font-family: Verdana;
font-weight: 500;
background: #fff center right 10px no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAQCAYAAAAMJL+VAAAAjUlEQVR42rTTQQ6DIBBG4XcuOZlIMHri2gtMN2OKBAt05E/YsPheDBG+84DDPqfWZRsgwNsYcWqImgDseiHGiAOOzNoB5uzyn0gJF7W5ixyNkSqePnJvZGrFa5GpA/e1T14aInf40vpovyJmvBZ5PYGfCwUsP8H664eR+LlYwFceXhqJDFrsxkVk6PkMALMhvwVPjvl/AAAAAElFTkSuQmCC);
background-size: 12px 8px;
cursor: pointer;
user-select: none;
margin: 0;
}
::-webkit-input-placeholder {
color: grey;
font-weight: 500;
font-family: Verdana;
}
.dwmViewSelect {
width: 80px;
height: 40px;
top: -10px;
font-weight: bold;
border: 1px solid white;
margin: auto;
padding-top: unset 50px;
}
.showDateBtn {
width: auto;
padding: 10px;
text-align: center;
}

<form method="post" action="" name="form">
<div class="reportDateDiv">

<a class="blackColor fSize18">Reporting Period</a>

<input type="text" name="inputDate" spellcheck="false" class="datepicker metricDateTextbox capitalFirst" value="@inputDate" autocomplete="off" placeholder="@placeholderStartDate.ToString(" MMM d, yyyy ")" readonly="readonly" />

<a class="blackColor fSize16">to</a>

<input type="text" name="endDate" spellcheck="false" class="datepicker metricDateTextbox capitalFirst" value="@endDate" autocomplete="off" placeholder="@noEndDate.ToString(" MMM d, yyyy ")" readonly="readonly" />

<select name="hAxisType" class="dwmViewSelect">
<option [email protected](Request.Form[ "hAxisType"]=="1" ) value="1">Daily</option>
<option [email protected](Request.Form[ "hAxisType"]=="2" ) value="2">Weekly</option>
<option [email protected](Request.Form[ "hAxisType"]=="3" ) value="3">Monthly</option>
</select>

<input type="submit" value="Show" class="showDateBtn" />
</div>
</form>





See this fiddle as well!

https://jsfiddle.net/g6Ledf00/1/

Answer Source

select tag by default has a inline-block attribute, setting vertical aling to the top will align the element to the top here is some documentation

https://developer.mozilla.org/en/docs/Web/CSS/vertical-align

fiddle

.dwmViewSelect {
width: 80px;
height: 40px;
top: -10px;
font-weight: bold;
border: 1px solid white ;
margin: auto;
padding-top:unset 50px;
vertical-align: top;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download