I have a multi-select box with size 3, when I scroll up using mouse inside the box the options scroll, as soon as the first element is at the top of the box, the page itself will scroll even though the mouse pointer is inside the box. same if I scroll down.
<div class="form-group">
<label >Speciality<span class="required">*</span></label>
<p style="font-size:11px;">Hold down Ctrl (windows) / Command (Mac) and click to select multiple options </p>
<select style="height: auto; "class="form-control" multiple size='3' required>
<option value="">None</option>
<option value="1">X</option>
<option value="2">Y</option>
<option value="3">z</option>
</select>
</div>
Related
Could someone tell me how I could change the width of the default drop-down menu that appears whenever I click on the search bar?
Image of the drop-down menu on search bar
Update: Thanks #bowlowl for letting me know that the default drop-down menu can not be edited.
You can set width of dropdown by
.dropdown-menu {
width:100%;
}
You can try jQuery onfocus event.
$(document).ready(function(){
$( ".searchbox" ).focus(function() {
$('#dropdown').css('width','100%');
});
});
<div>
<input type="text" placeholder="Type to search" class="searchbox">
<br>
<select id="dropdown">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
One parent page I have an icon, clicking which a new modal window opens. In that window there's a drop-down list and the value selected from the drop-down should appear in the parent page text-box.
Parent page html:
<input type="text" id="editGroupName" class="form-control"
style="width: 250px;" placeholder="Group Name"
ng-model="srchDealer.groupId" />
<i class="glyphicon glyphicon-new-window"
style="margin-top:10px; margin-left:10px; float:right; font-size:larger; cursor:pointer"
ng-click="createNewGroupModal()"></i>
Modal window html:
<select id="srchDealerGroup" ng-model="srchDealer.groupId"
ng-options="gr.id as gr.name for gr in dlrGroups"
style="width: 75%;" class="form-control">
<option value="" selected>Select Group</option>
</select>
How do I bind the drop-down list value from the modal window with the text field in the parent window?
Why cant we just do it with jQuery
$('#srchDealerGroup').change(function() {
$('#editGroupName').val(this.val());
// OR
$('#editGroupName').val(this.val($('#srchDealerGroup').val()));
});
Multiple divs, each with a label and a dropdown. What is the simplest way to force the dropdown/label pair to always be on the same line, and force the next pair down to the next line depending on the size of the screen?
So far I have:
<div style="display:inline-block; vertical-align:middle; width:100%;">
<div style="float:left; width:40%; display:block;">
<label for="zone"><b><%=zonestr%></b></label>
<select id="zone" name="zone" onchange="getDIV();start();">
<option value=""><%=selectstr%><%=zonestr%></option>
<option value="1">value1</option>
<option value="2">value2</option>
<option value="3">value3</option>
</select>
</div>
<div style="float:left; width:60%;">
<label for="district"> <b><%=resultstr%></b> </label>
<select id="district" name="district">
<option value=""><%=selectstr%><%=resultstr%></option>
<option value=""></option>
</select>
</div>
</div>
You can use bootstrap grid as per codepen link have:
codepen.io/greatzspido/pen/YrvQry
If you don't want to include complete bootstrap, you can use ultimate light weight grid structure of https://neat.bourbon.io/.
My label is not aligning with my select box. Instead, it is sitting below the previous div, which is in the middle of the page.
The select box sits to the far left. The for and name values match, so I don't understand why they are separated.
I am using style="display:inline;" on the previous div and style="display:inline-block;vertical-align:top" on the div following.
Even if I replace label with span it still sits under the previous div in the centre of the page. Any ideas?
This is the whole problem div.
<div class="form-group">
<div class="dropdown" dropdown>
<label class="label-text" for="unit" >Cm/Inch</label>
<select class="form-control" id="unit" style="width:150px;"
(ngModelChange)="onUnitChange($event)"
[(ngModel)]="job_entry.units" name="unit">
<option disabled hidden [value]="undefined">select unit </option>
<option value="cm">centimeters</option>
<option value="inch">inches</option>
</select>
</div>
I have made three drop down menu. I want to align one after the other. Below is the code I am using. But its not coming in the same line. What I want is first should go on left, second should go on center and third should go on right.
First is
<div style="float:left;">
<FORM name="mapform" method="POST">
<SELECT name="jump" size="1">
<OPTION value="" SELECTED>Select the Category</option>
<OPTION value="http://www.fe dri.com/posting.php?mode=post&f=1">Ask a Question</option>
<OPTION value="http://www.fe dri.com/posting.php?mode=post&f=4">Vehicle for Sale</option>
</SELECT>
<INPUT type=button onClick= "location = '' + document.mapform.jump.options[ document.mapform.jump.selectedIndex ].value;" value="Place an Ad!">
</FORM>
</div>
Second is
<div style="float:center;">
<FORM name="mapform2" method="POST">
<SELECT name="jump2" size="1">
<OPTION value="" SELECTED>Select the Category</option>
<OPTION value="http://www.fe dri.com/discuss">General Discussion</option>
</SELECT>
<INPUT type=button onClick= "location = '' + document.mapform2.jump2.options[ document.mapform2.jump2.selectedIndex ].value;" value="Quick View !">
</FORM>
</div>
Third is
<div style="float:right;">
<FORM name="mapform1" method="POST">
<SELECT name="jump1" size="1">
<OPTION value="" SELECTED>Select the Category</option>
<OPTION value="http://www.fe dri.com/posting.php?mode=post&f=16">Start New General Discussion</option>
<OPTION value="http://www.fe dri.com/posting.php?mode=post&f=28">Start New Event</option>
</SELECT>
<INPUT type=button onClick= "location = '' + document.mapform1.jump1.options[ document.mapform1.jump1.selectedIndex ].value;" value="Start a Discussion!">
</FORM>
</div>
I am getting it as in the image
There is no float:center. Float your first two divs left, and the last one right. This should fix the problem, assuming you have enough space for all your elements on one line.
Here is a demonstration: http://jsfiddle.net/MCRUX/
In case you missed it in the example, I have set the width of each of the container divs to 30%:
<div style="float:left;width:30%;">
Use a table having 3 columns to align the drop down box.
<table width="100%">
<tr>
<td align="left">{drop down box 1}</td>
<td align="center">{drop down box 2}</td>
<td align="right">{drop down box 3}</td>
</tr>
</table>
As #Asad said, there is nothing called float:center. If the size of the parent element in which you are placing your divs has a fixed size, you can do some mathematical calculation and decide the size of the divs you are gonna place.
for example, if i have a parent box of 960px and want to place 3 divs inside it, i ll do something like this...
div.children {
width:313.33px;
margin-right:10px;
float:left;
}
div.children:last-child {
margin-right:0;
}
Since 313.33 X 3 ~ 940 plus total margin will be 20px and both will add upto 960px.