I'm attempting to adjust the alignment of textboxes as the browser window reaches a specific size. My goal is to have all text boxes and dropdowns align to the right.
I've experimented with tweaking the paddingLeft and marginLeft of the Textbox, as well as adjusting the paddingRight and marginRight of the label.
I even tried setting innerHtml = ' ' and outerHtml = ' '.
For fun, I attempted using
insertAdjacentHTML('beforebegin', ' ')insertAdjacentHTML('afterbegin', ' ')
HTML Below with Embedded Javascript trying to re-align the textboxes:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
window.onresize = PositionElements();
function PositionElements() {
if (document.readyState == 'interactive') {
var inputAptNumber = document.getElementById('inputAptNumber');
if (fieldsetElement.clientWidth == 380) {
aptElement.innerHTML = '<br />';
/*fix the indentation of the screen*/
inputAptNumber.style.marginLeft = '20px';
}
}
}
</script>
<h1>Survey</h1>
<form id="personalInfoForm" runat="server" method="post">
<div id="nameDiv">
<!-- Personal Demographic Information -->
<fieldset id="surveyMainFieldset">
<legend>Personal Information</legend>
<div>
<span>
<label for="inputfirstName" id="labelFirstName">First Name: </label><input type="text" name="firstName" maxlength="50" id="inputFirstName" class="personalInfoInput" placeholder="First name" required="required" runat="server"/>
</span>
<span>
<label for="inputMiddleName" id="labelMiddleName">Middle Name: </label><input type="text" name="middleName" maxlength="50" id="inputMiddleName" class="personalInfoInput" placeholder="Middle name" runat="server"/>
</span>
<span>
<label for="inputLastName" id="labelLastName">Last Name: </label><input type="text" name="lastName" maxlength="50" id="inputLastName" class="personalInfoInput" placeholder="Last name" required="required" runat="server"/>
</span>
</div>
<div id="localAddressDiv">
<span id="streetElement">
<label for="inputStreetAddress" class="personalFormLabel" id="labelStreetAddress">Street Address: </label><input type="text" name="streetAddress" maxlength="150" id="inputStreetAddress" class="personalInfoInput" placeholder="Street address" runat="server"/>
</span>
<span id="aptElement">
<label for="inputAptNumber" class="personalFormLabel" id="labelAptNumber">Apt.#: </label><input type="text" name="aptNumber" maxlength="5" id="inputApt" class="personalInfoInput" placeholder="Apt.#" runat="server"/>
</span>
<span id="cityElement">
<label for="inputCity" class="personalFormLabel" id="labelCity">City: </label><input type="text" name="city" maxlength="50" id="inputCity" class="personalInfoInput" placeholder="City" runat="server"/>
</span>
</div>
<div id="stateAddressDiv">
<span id="stateElement">
<label for="StateDropdown" class="personalFormLabel" id="labelState">State: </label><select id="StateDropDown" name="stateSelection" runat="server" ></select>
</span>
<span>
<label for="inputZip" class="personalFormLabel" id="labelZip" >Zip code: </label><input type="text" name="zipNumber" maxlength="9" id="inputZip" class="personalInfoInput" placeholder="Zip code" runat="server"/>
</span>
</div>
</fieldset>
</div>
</form>
</body>
CSS Below
#personalInfoForm
{
width: auto;
margin-left: 25px;
margin-right: 25px;
margin-top: 15px;
margin-bottom: 15px;
height: 494px;
}
#personalInfoInput
{
overflow:hidden;
}
#personalInfoForm span
{
padding: 0px 0px 0px 10px;
}
#personalInfoForm #inputStreetAddress
{
width: 150px;
}
#personalInfoForm #inputApt
{
width: 50px;
}
#ageDropDown #childDropDown
{
width: 250px;
}
#localAddressDiv #nameDiv #stateAddressDiv
{
padding-top: 8px;
padding-bottom: 8px;
}
span
{
display:inline-block;
margin-top: 3px;
margin-bottom: 3px;
}
I seem to be missing where the issue lies. Any assistance would be valued.