My webpage layout includes the following code:
<body>
<div class="pollid" >
<select class="pollid" id="pollid" size="[2]" >
[options]
</select></div>
<div class="seperator"></div>
<div class="options">
<select class="options" id="options" disabled="disabled" size="2">
<option id="deadoption">Select a poll to enable this box.</option>
</select></div>
<div class="seperator"></div>
<div class="options2" id="options2">
</div>
</body>
I have implemented a jQuery script that loads content into a specific div when an option is selected:
$("#options2").load("ajax/newOption.html");
The newOption.html file contains the following code:
<input type="text" id="newopt" label="Option: " />
<button id="submit" type="button" value="Submit" />
In terms of CSS styling, I have defined the following:
select {
height: 100%;
width: 100%;
}
div.pollid {
height: 100%;
width: 30%;
display: inline-block;
}
div.options {
height: 100%;
width: 30%;
display: inline-block;
}
div.options2 {
height: 100%;
width: 30%;
display: inline-block;
}
.seperator {
height: 100%;
width: 3%;
display: inline-block;
}
While the functionality works as intended, there is an issue when the content is loaded. The div containing the input field shifts down, pushing it to the bottom of the screen rather than maintaining its position within the layout. This unintended scrolling behavior is not desirable. How can I resolve this and ensure that the div remains in place without causing any scrolling?