How to fix overflow of a dropdown? - html

I've 3 dropdowns. The options are coming well for the first dropdowns but the options for the last dropdown is kind of messy.
Here is my css
select option {
background: #E6EABF;
color: #000000;
overflow-y: scroll;
z-index: 100;
}
Please the last one is a multi-select dropdown.
Any kind of help is appreciated!


Give the select an size would have worked: size="8"
Since its not hard coded use js:
var select = document.getElementById('select');
select.size = select.length;
select option {
background: #E6EABF;
color: #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select" multiple size="return this.length();">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

Related

Opening html based on a formular

How to open a web page consisting of values submitted to the selection manu, please?
For instance, Saab, Volvo, and Audi are chosen. After clicking OK, I want to open another HTML page with the chosen words. Thank you
<!DOCTYPE html>
<html>
<body>
<h1>CAR</h1>
<label for="cars">Choose a car:</label>
<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select><br><br>
<label for="cars">Choose a car:</label>
<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select><br><br>
<label for="cars">Choose a car:</label>
<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select><br><br>
<input type='submit' value='OK'>
// After clicking OK, href consisted of choosen values is open
<p>Open</p>
</body>
</html>

I think if you wrap your html in a Form element it should work.
And also make sure you add a target parameter to the form element:
target="_blank"
An example:
<h1>CAR</h1>
<form
target="_blank"
action="https://www.lipsum.com"
method="get"
>
<label for="car1">Choose a car 1:</label>
<select id="car1" name="car1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select><br><br>
<label for="car2">Choose a car 2:</label>
<select id="car2" name="car2">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select><br><br>
<label for="car3">Choose a car 3:</label>
<select id="car3" name="car3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select><br><br>
<input type='submit' value='OK'>
</form>
How do you get the values
To get the values back from the URL, use window.location.search.
An example:
const searchQuery = window.location.search;
/* '?car1=Volvo&car2=Audi' */
const values = searchQuery.split('?').pop().split('&').map(query => query.split('=').pop());
/* ['Volvo', 'Audi'] */

Select menu opening over DIV below

I was wondering if its possible to get a select menus options to push down any DIVS below them? I have managed to do it with mobile menus etc but have no success with a simple select menu.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body{
font-size: 15px;
font-family: 'Open Sans', sans-serif;
background-color: #f6f6f6;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div >
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<div style="width:100%; height:100px; background-color:#F12B2E;"></div>
</body>
</html>
In the example below the menu overlaps the red div box below. Can this be done? Will it work flawlessly on all browser types? Am I better off using a jquery UI? Thanks in advance

custom scroll-bar for select box

I want to add the custom scrollbar for select box, I have tried with following code but I don't want to use the default scrollbar in the select box, I want to apply custom scrollbar and I also don't want to use size attribute on the select element.
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
Please help how to add the custom scrollbar.

You can do this:
.wrapper{
border: 1px dashed red;
height: 150px;
overflow-x: hidden;
overflow-y: scroll;
width: 150px;
}
.wrapper .selection{
width:150px;
border:1px solid #ccc;
}
<div class="wrapper">
<select class="selection" size="15">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>

How to edit a dropdown scrollbar with CSS?

I am working on a dropdown menu and am having difficulty adjusting the scrollbar when the menu is clicked. I have tried targeting everything but I can't seem to get it to work. (I set the width to 20px so I can easily tell if it has adjusted the scrollbar). I am using Google Chrome. I'm sure it's a simple fix that I'm missing. Thank you for your time.
select::-webkit-scrollbar {
width: 20px;
background-color: #cccccc;
}
<div class="dropdown-container">
<select class="dropdown">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
<option value="10">Ten</option>
<option value="11">Eleven</option>
<option value="12">Twelve</option>
<option value="13">Thirteen</option>
<option value="14">Fourteen</option>
<option value="15">Fifteen</option>
<option value="16">Sixteen</option>
<option value="17">Seventeen</option>
<option value="18">Eighteen</option>
<option value="19">Nineteen</option>
<option value="20">Twenty</option>
</select>
</div>

I would add a size to the select, then the bar shows up and your css should work. You just need to pick how many you want to show up by default.
Also check out this page for more options https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp
<div class = "dropdown-container">
<select class="dropdown" size="5">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
<option value="10">Ten</option>
<option value="11">Eleven</option>
<option value="12">Twelve</option>
<option value="13">Thirteen</option>
<option value="14">Fourteen</option>
<option value="15">Fifteen</option>
<option value="16">Sixteen</option>
<option value="17">Seventeen</option>
<option value="18">Eighteen</option>
<option value="19">Nineteen</option>
<option value="20">Twenty</option>
</select>
</div>
select::-webkit-scrollbar {
width: 20px;
background-color:#cccccc;
}

Can I make it so that some rows in a select cannot be clicked?

I have a standard type of select list:
<select>
<option value="cars1">Cars 1</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="cars2">Cars 2</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
This is just an example but what I would like to do is to make Cars 1 and Cars 2 in the list as headings that cannot be selected.
Is there some way that I can do this?

Sure, it's called an <optgroup>: fiddle
<select>
<optgroup label="Cars 1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="Cars 2">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

Another way is to use disabled attribute:
<select>
<option value="cars1" disabled>Cars 1</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="cars2" disabled>Cars 2</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Live demo: Tinkerbin

Use optgroup tag
<select>
<optgroup label="Cars 1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="Cars 2">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

I'm guessing you are looking for optgroup:
<select>
<optgroup label="Cars 1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="Cars 2">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select> ​
FIDDLE