Styled-Select dropdown, positioning the option box - html

Question

I have this styled-select dropdown, which shows only 5 options out of all existing options:
<div style="background:grey; height:400px; width: 400px;">
<div class="styled-select">
<select id="campaignListId" name="campaignId" onmousedown="if(this.options.length>5){this.size=5;}" onchange='this.size=0;' onblur="this.size=0;">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
<option value="5">Fifth</option>
<option value="6">Sixth</option>
<option value="7">Seventh</option>
</select>
</div>
</div>
And this is how my css looks like:
.styled-select select {
position: absolute;
background: transparent;
width: 200px;
padding-top: 5px;
font-size: 32px;
font-weight: bold;
font-family: 'PT Sans', sans-serif;
color: #4F9DD0;
line-height: 1;
border: 0;
border-radius: 4;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
z-index: 2;
}
.styled-select {
background: url(resources/img/campaignSelector.png) no-repeat right #ddd;
background-color: white;
width: 200px;
height: 50px;
position: relative;
margin: 0 auto;
}
.styled-select option {
font-size: 20px;
background-color: white;
}
I want it to act like this picture, I mean when I click on the main box in order to select one option, the window of options open starting from the below of main select box:
But this is what happens, which overlaps the main window:

Answer 1

The problem is with your script
onmousedown="if(this.options.length>5){this.size=5;}" onchange='this.size=0;' onblur="this.size=0;"
So you can remove it and just hide the extra options using css:
options:nth-child(n+6) {
display:none;
}
Demo:
.styled-select select {
position: absolute;
background: transparent;
width: 200px;
padding-top: 5px;
font-size: 32px;
font-weight: bold;
font-family: 'PT Sans', sans-serif;
color: #4F9DD0;
line-height: 1;
border: 0;
border-radius: 4;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
z-index: 2;
}
.styled-select {
background: url(resources/img/campaignSelector.png) no-repeat right #ddd;
background-color: white;
width: 200px;
height: 50px;
position: relative;
margin: 0 auto;
}
.styled-select option {
font-size: 20px;
background-color: white;
}
option:nth-child(n+6) {
display:none;
}
<div style="background:grey; height:400px; width: 400px;">
<div class="styled-select">
<select id="campaignListId" name="campaignId" >
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
<option value="5">Fifth</option>
<option value="6">Sixth</option>
<option value="7">Seventh</option>
</select>
</div>
</div>
Update
Apparently, you can't hide an option tag using css on Mac OS, so in this case I suggest to use a plugin like select2
$('select').select2({
minimumResultsForSearch: Infinity
});
select {
width:100%;
}
.select2-results__options li:nth-child(n+6) {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<div style="background:grey; height:400px; width: 400px;">
<div class="styled-select">
<select id="campaignListId" name="campaignId" >
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
<option value="5">Fifth</option>
<option value="6">Sixth</option>
<option value="7">Seventh</option>
</select>
</div>
</div>
Keep attention about multiple selects in the same page. In this demo, all of the select's items with index greater than 5 will be invisible.
If you want to hide those options in specific select, you can add class to it and add the selector this class.
Demo:
var con = $('select').select2({
minimumResultsForSearch: Infinity
}).data('select2').$results.addClass("wrap");
select {
width:100%;
}
.wrap.select2-results__options li:nth-child(n+6) {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<div style="background:grey; height:400px; width: 400px;">
<div class="styled-select">
<select id="campaignListId" name="campaignId" >
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
<option value="5">Fifth</option>
<option value="6">Sixth</option>
<option value="7">Seventh</option>
</select>
</div>
</div>
Update 2
Another solution (a little bit pache) that not required a plugin but use javascript (that's the requirement).
The idea is:
button to keep the selected value and will show/hide the select by click.
select with size=5 which be hidden by default and toggle when user click on the button.
In the first click, the select will be displayed.
In the second click, the select will be hidden again and the selected value will by the text in the button.
Demo:
For unknown reason this snippet doesn't work right now, so you can see the effect in this bin
$('button').click(function() {
$('select').toggle();
});
$('select').change(function(){
var sel = $(this).hide();
$('#text-holder').html(sel.val());
}).trigger('change');
.wrapper {
cursor:pointer;
position:relative;
display:inline-block;
}
select {
display:none;
position:absolute;
left:0;
width:100%;
}
button {
text-align:left;
}
#text {
border:1px solid;
width:120px;
}
.arrow {
float:right;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<div class="wrapper">
<button id="text">
<span id="text-holder"></span>
<span class="arrow">▼</span>
</button>
<select size="5">
<option selected>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</div>

Answer 2

I tried you code and realized there is something not required for your expected output.
onmousedown="if(this.options.length>5){this.size=5;}" onchange='this.size=0;' onblur="this.size=0;"
The above shown statement can be removed and it works fine.