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>
Related
I have a dropdown menu of checkboxes and some checkboxes with a <select> dropdown.
I have successfully used the e.stopPropagation() on the checkboxes.
The problem is that selecting an option in the <select> also closes the dropdown. I have tried adding it to the $(document).on('click', '.oneClass .anotherClass', function(e) but it still closes the dropwdown. I have tried other answers but they don't seem to apply.
This is the Code:
$(document).on('click', '.allow-focus', function(e) {
e.stopPropagation();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="preciplist" class="dropdown-menu allow-focus scrollable-menu" style="width:300px;">
<li id="nump1box"><label><input type="checkbox" name="numprecip1box" id="numprecip1box" checked>Number of Days</label><br>
<select id="snowliq1" name="1snowliq" style="width: min-content; color:#ffffff; background-color:#2c3e50; display:inline;" class="parameterInput form-control input-sm">
<option value="snow">Snow</option>
<option selected value="liq">Liquid</option>
</select>
<select id="NumPrecip1" name="1precipval" style="width: min-content; color:#ffffff; background-color:#2c3e50; display:inline;" class="parameterInput form-control input-sm">
<option value="">select one</option>
</select>
</li>
</ul>
Any ideas?
Thanks Dave
I have 2 <select> inside a hidden <div> which is revealed by a hover function in jQuery. The problem is that once the <div> is visible, if I click on any of the <select>s and move the cursor to the options inside, they collapse this <div> making it impossible to interact with them. This is an issue that I've been experiencing only in Firefox.
If anyone can give me a clue of what's causing the problem that'd be greatly appreciated.
<div id="tester-container">
<div class="options-container">
<select id="tester-fs">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3" selected>Option 3</option>
</select>
<select id="tester-align">
<option value="left" selected>Left</option>
<option value="center">Center</option>
<option value="right">Right</option>
</select>
</div>
<div class="font-tester">
<div style="font-size: 80px;">hover here</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".options-container").hide();
});
$('#tester-container').hover(mouseEnter, mouseLeave);
function mouseEnter() {
$(".options-container").show(200);
};
function mouseLeave() {
$(".options-container").hide(200);
};
</script>
This is the reported issue in firefox. However I have made few changes on mouseleave event and also have updated the functions and now it will work fine on any browser also in firefox.
$(document).ready(function() {
$(".options-container").hide();
});
$('#tester-container').mouseenter(function() {
$('.options-container').show(200);
});
$('#tester-container').on('mouseleave', function(event) {
if ($('.options-container').has(event.target).length > 0) {
event.stopPropagation();
return;
} else {
$('.options-container').hide(200);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tester-container">
<div class="options-container">
<select id="tester-fs">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3" selected>Option 3</option>
</select>
<select id="tester-align">
<option value="left" selected>Left</option>
<option value="center">Center</option>
<option value="right">Right</option>
</select>
</div>
<div class="font-tester">
<div style="font-size: 80px;">hover here</div>
</div>
</div>
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()));
});
I have following markup that renders HTML dropdown. On my web page the dropdown is placed at extreme right side of the container. Dropdown contains some lengthy text.
When open in chrome, dropdown opens correctly starting from right towards left, thus showing the lengthiest option clearly. Where in firefox dropdown starts off from left towards right, thus some of the option text goes out of the screen.
Is there any way/css to change this behavior in firefox.
<div style="float:right;">
<select id="select_1" style="width:100px;" name="select_1">
<option value="-1" selected="selected">Browse options</option>
<option value="-1">------------------------------------</option>
<option value="224">Option 1</option>
<option value="234">Longer title for option 2</option>
<option value="242">Very long and extensively descriptive title for option 3</option>
</select>
</div>
Just use this may help you
#-moz-document url-prefix() {
select {
direction: rtl;
}
option{
text-align: left;
}
}
The problem is caused by setting the select element with a fixed width (100px)
Remove that and the select element will work correctly in all browsers.
Fiddle
If it's important for you to keep the width, then you can use firefox-only CSS to change the width back to auto in Firefox.
NB: It is generally frowned upon to rely on hacks like these in production code. Use with caution!
Fiddle
select {
width: 100px;
}
/* firefox-only CSS..
WARNING: Use at your own risk */
#-moz-document url-prefix() {
select {
width: auto;
}
}
<div style="float:right;">
<select id="select_1" name="select_1">
<option value="-1" selected="selected">Browse options</option>
<option value="-1">------------------------------------</option>
<option value="224">Option 1</option>
<option value="234">Longer title for option 2</option>
<option value="242">Very long and extensively descriptive title for option 3</option>
</select>
</div>
I have to remove background of selectbox, I have used code like this
<select style="background:none;border:none">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
But In the output arrow appeared.How can I hide that arrow.
Add -webkit-appearance:none
<select style="background:none;border:none; -webkit-appearance:none">
or add div around and give max width.
<div style="width:80px; overflow:hidden">
<select style="background:none;border:none; width:97px">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</div>
Updated DEMO
Make select width more than 100% and apply overflow:hidden
select {
overflow:hidden;
width: 120%;
}
See this link and the 2nd answer seems more what you are after!
How to remove the arrow from a select element in Firefox