Develop Reference

How do I change my css dropdown to change sizes according to the size of the text?

.dropdown select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: blue;
font-weight: bold;
text-decoration: underline;
font-size: 20px;
line-height: 1.75;
display:inline-block;
background-color: #ffffff;
background-image: none;
border-style: none;
background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat right;
}
<div class="col-md-8 offset-md-2">
<span class="header"> COMPARE </span>
<span class="dropdown">
<select class="select_box" id="opts">
<p></p>
<option value="default">Select a dataset</option>
<option value="population">POPULATION</option>
<option value="popdensityperacre">POPULATION DENSITY</option>
<option value="percapitaincome">INCOME</option>
<option value="percentnonwhite">RACIAL DIVERSITY</option>
<option value="percentinpoverty">POVERTY</option>
<option value="medianhomevalue">HOME VALUE</option>
<option value="unemploymentrate">UNEMPLOYMENT</option>
<option value="percapitacriminalarrests">CRIME</option>
<option value="percapitaencampments">HOMELESSNESS</option>
<option value="medianhoursofsummerfog">FOG</option>
<option value="percentinliquefaction">LIQUEFACTION</option>
</select>
</span>
<span class="header"> BY NEIGHBORHOOD </span>
</div>
How do I get it so the box changes sizes depending on which selection is chosen? I thought it might work if I make it an inline-block and then set width to 100%.
The reason I'd like the box-size to change is that I'd like the dropdown arrow to be right next to the text, instead of staying in a fixed location.

So if I got it right, the solution would be to just add some :hover css to a class.
Look at this example on w3school:
https://www.w3schools.com/howto/howto_custom_select.asp
I clicked on "Try it yourself" and altered the code as I believe you want to.
With the following css code you can alter the div option as you want when you hover it.
.select-items div:hover {
background-color: rgba(0, 0, 0, 0.1);
height: 50px;
}
Hope it helped.
Explore the example for more things, they have css for all the parts of a selection menu.

How to remove an OnClicked class when the parent div is collapsed?

I've accordion kind of menu strips. Initially all the menu will be collapsed. When a menu is clicked, that particular menu will expand for further options. When any other menu is clicked, the previous one will be collapsed. I'm able to do this. The problem goes here (after the code) :
HTML:
<script>
function showParagraph1(){
var x=document.getElementsByClassName("box1");
x[0].innerText="Hello JavaScript!";
}
function showParagraph2(){
var y=document.getElementsByClassName("box2");
y[0].innerText="Hello JavaScript!";
}
</script>
<div class="title"><p>First Option</p></div>
<div class="selectionPanel">
Select the Duration <select id="duration" required>
<option value="30">last 1 month</option>
<option value="60">last 2 months</option>
</select>
<input type="button" class="button" value="View" onclick="showParagraph1()">
<div class="fillBlue"></div>
<div class="box1"></div>
</div>
<div class="title"><p>Second Option</p></div>
<div class="selectionPanel">
Select the Duration <select id="duration2" required>
<option value="30">last 1 month</option>
<option value="60">last 2 months</option>
</select>
<input type="button" class="button" value="View" onclick="showParagraph2()">
<div class="fillBlue"></div>
<div class="box2"></div>
</div>
CSS
.title{
width:100%;
height:auto;
background-color: #aaa;
padding:5px 0px 5px 0px ;
margin-top:10px;
cursor:pointer;
}
.title p{
font-family:verdana;
text-align:center;
font-weight: bold;
font-size:1.2em;
color: #000;
}
.selectionPanel{
height:auto;
width:100%;
background-color: blue;
padding:10px 0px 0px 0px;
text-align:center;
display:none;
}.box1{
width:100%;
height:auto;
background-color: #fff;
}
.box2{
width:100%;
height:auto;
background-color: #fff;
}.fillBlue{
height:10px;
background-color:blue;
}
JQuery
$(document).ready(function(){
$(".selectionPanel").slideUp();
$(".title").click(function(){
$(this).next(".selectionPanel").slideToggle("slow").siblings('.selectionPanel').slideUp();
});
})
JS FIDDLE here
When a menu is expanded, it shows further options with a button called view. It has an onclick event attached with it to display a text.
When ever any other menu is clicked, the expanded div gets collapsed. Again when the collapsed div is opened, it displays the text message that was added with button click event.
I want to delete that particular class which displays text on button click as soon as it's parent div is collapsed.
To reproduce the problem in fiddle,
1:Click on First Option
2:Click View Button
3:Click Second Option
4:Click First Option
I don't want to display Hello Javascript here. It has to be displayed only when clicked on View Button
I tried this, but it didn't work
$(this).next(".selectionPanel").slideToggle("slow").siblings('.selectionPanel').slideUp().removeClass(".selectionPanel");

You don't add any class, you just add text. So remove it with $("div[class^='box']").text('');.
$(document).ready(function() {
$(".selectionPanel").slideUp();
$(".title").click(function() {
$(this).next(".selectionPanel").slideToggle("slow").siblings('.selectionPanel').slideUp(400, function() {
$("div[class^='box']").text('');
});
});
})
.title {
width: 100%;
height: auto;
background-color: #aaa;
padding: 5px 0px 5px 0px;
margin-top: 10px;
cursor: pointer;
}
.title p {
font-family: verdana;
text-align: center;
font-weight: bold;
font-size: 1.2em;
color: #000;
}
.selectionPanel {
height: auto;
width: 100%;
background-color: blue;
padding: 10px 0;
text-align: center;
display: none;
}
.box1 {
width: 100%;
height: auto;
background-color: #fff;
margin: 10px 0 -10px;
}
.box2 {
width: 100%;
height: auto;
background-color: #fff;
margin: 10px 0 -10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function showParagraph1() {
$('.box1').text('Hello JavaScript!');
}
function showParagraph2() {
$('.box2').text('Hello JavaScript!');
}
</script>
<div class="title">
<p>First Option</p>
</div>
<div class="selectionPanel">
Select the Duration
<select id="duration" required>
<option value="30">last 1 month</option>
<option value="60">last 2 months</option>
</select><input type="button" class="button" value="View" onclick="showParagraph1()">
<div class="box1"></div>
</div>
<div class="title">
<p>Second Option</p>
</div>
<div class="selectionPanel">
Select the Duration
<select id="duration2" required>
<option value="30">last 1 month</option>
<option value="60">last 2 months</option>
</select>
<input type="button" class="button" value="View" onclick="showParagraph2()">
<div class="box2"></div>
</div>

I changed your showParagraph you don't need 2 classes .box1 and .box2. You need only 1 class don't copy paste styles. if it's basicly the same thing ther's no point assigning some different name. Showparagraph now sends the parent div to the function and the function find the .box element inside it and puts the html. To show it or hide it it adds css display:block or display:none depending on the situation.
<script>
function showParagraph(el){
var el = $(el).find(".box");
el.css("display","block");
el.text("Hello JavaScript!");
}
$(document).ready(function(){
$(".selectionPanel").slideUp();
$(".title").click(function(){
$(this).next(".selectionPanel").slideToggle("slow").siblings('.selectionPanel').slideUp();
$(".box").css("display", "none");
});
})
</script>
<div class="title"><p>First Option</p></div>
<div class="selectionPanel">
Select the Duration <select id="duration" required>
<option value="30">last 1 month</option>
<option value="60">last 2 months</option>
</select>
<input type="button" class="button" value="View" onclick="showParagraph(this.parentNode)">
<div class="fillBlue"></div>
<div class="box"></div>
</div>
<div class="title"><p>Second Option</p></div>
<div class="selectionPanel">
Select the Duration <select id="duration2" required>
<option value="30">last 1 month</option>
<option value="60">last 2 months</option>
</select>
<input type="button" class="button" value="View" onclick="showParagraph(this.parentNode)">
<div class="fillBlue"></div>
<div class="box"></div>
</div>
<style>
.title{
width:100%;
height:auto;
background-color: #aaa;
padding:5px 0px 5px 0px ;
margin-top:10px;
cursor:pointer;
}
.title p{
font-family:verdana;
text-align:center;
font-weight: bold;
font-size:1.2em;
color: #000;
}
.selectionPanel{
height:auto;
width:100%;
background-color: blue;
padding:10px 0px 0px 0px;
text-align:center;
display:none;
}
.box{
width:100%;
height:auto;
background-color: #fff;
}
.fillBlue{
height:10px;
background-color:blue;
}
</style>

I've updated your fiddle to work like you want.
I didn't want to change your code too much but I've did a few changes.
First of all I think that it's better to have just one function for the showingParagraph action.
I've modified to receive the box to show as a param (and I'm using ID's, check also the css for the box styling)
function showParagraph(box){
var x = document.getElementById(box);
x.innerText = "Hello JavaScript!";
}
You could do the same for the innerText.
Then the jQuery part of the toggle looks like this now:
$(document).ready(function(){
$(".selectionPanel").slideUp();
$(".title").click(function() {
$(this).next(".selectionPanel").slideToggle("slow").siblings('.selectionPanel').slideUp();
$('.box').each(function() {
$(this)[0].innerText = '';
})
})
});
You replace the innerText of each box for an empty string.
You can check the working fiddle here https://jsfiddle.net/3h8kLbak/8/

If this is the behavior you're looking for I'll explain what I've done.
updated to use.empty instead of .text('')
$(".title").click(function() {
$('.selectionPanel').not($(this).next('.selectionPanel')).slideUp();
$(this).next(".selectionPanel").slideToggle("slow");
$('input').closest('.selectionPanel').find('.box').empty();
});
$("input").click(function() {
if ($(this).val() === 'View') {
$(this).closest('.selectionPanel').find('.box').text('Hello JavaScript!');
}
})
.title{
width:100%;
height:auto;
background-color: #aaa;
padding:5px 0px 5px 0px ;
margin-top:10px;
cursor:pointer;
}
.title p{
font-family:verdana;
text-align:center;
font-weight: bold;
font-size:1.2em;
color: #000;
}
.selectionPanel{
height:auto;
width:100%;
background-color: blue;
padding:10px 0px 0px 0px;
text-align:center;
display:none;
}.box1{
width:100%;
height:auto;
background-color: #fff;
}
.box2{
width:100%;
height:auto;
background-color: #fff;
}.fillBlue{
height:10px;
background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title"><p>First Option</p></div>
<div class="selectionPanel">
Select the Duration <select id="duration" required>
<option value="30">last 1 month</option>
<option value="60">last 2 months</option>
</select>
<input type="button" class="button" value="View">
<div class="fillBlue"></div>
<div class="box box1"></div>
</div>
<div class="title"><p>Second Option</p></div>
<div class="selectionPanel">
Select the Duration <select id="duration2" required>
<option value="30">last 1 month</option>
<option value="60">last 2 months</option>
</select>
<input type="button" class="button" value="View">
<div class="fillBlue"></div>
<div class="box box2"></div>
</div>
Fiddle
https://jsfiddle.net/Hastig/3h8kLbak/10/

select2 alignment not working

select2-3.5.2 was working fine. but as soon as i upgrade to 4.0.3 it is suddenly appearing on left side of the page. I am using jquery-UI, hoping these two will play well together.
float:right; is having no impact on select2-4.0.3
<div style="position:absolute; top:0px; left:0px; width:100%" class="ui-widget infobar-wrapper">
<div name="ibar1" id="ibar1" class="ui-widget-header infobar">
<select name="themes" id="themes" style="float:right;"> <!--margin-top:-3px;-->
<option></option>
<option value="black-tie">black-tie</option>
<option value="trontastic">trontastic</option>
<option value="ui-darkness">ui-darkness</option>
<option value="ui-lightness">ui-lightness</option>
</select>
</div>
</div>
as i do this in JS:
$("#themes").select2({dropdownAutoWidth:true,placeholder:'Change theme'});
css:
.infobar {
height:27px;
font-weight:bold;
overflow:hidden;
border:0px;
}

Appear to, yet it also appears the float should be moved to another item.
CSS
.infobar {
height: 27px;
font-weight: bold;
overflow: hidden;
border: 0px;
}
.infobar .select2-container {
float: right;
}
Working Example: https://jsfiddle.net/Twisty/Lq7q5xxj/

select tag with invisible option

I want my select tag to be completely invisible, but still clickable, because I have a colored div representing the area that is clickable, and once clicked, the select options will be displayed. I have got it to the point where it is invisible, except for the initial text that shows before you click the select tag. I just need make that text invisible. Here is the code I have:
css of the coloured div:
.residentPanel {
text-align: center;
line-height: 100px;
border: 1px solid #666;
background-color:#65A3EB;
width:100%;
height:100px;
margin-bottom:20px;
}
html:
<div class="residentPanel" style="background-color:#C991BE;" onclick="showSingleMeasurement()">
<select style="left:0; width:100%;height:100px;background-color:transparent; -webkit-appearance: none;" id="allMeasurementsDropDownTablet" onclick="selectClick($('#allMeasurementsDropDownTablet'), measurementClick);"></select>
</div>
Here is a JsFiddle
I just need the black text in the purple div to disappear. Thanks.

add an empty option
<div class="residentPanel" style="background-color:#C991BE;" onclick="showSingleMeasurement()">
<select style="left:0; width:100%;height:100px;background-color:transparent; -webkit-appearance:none;outline:none;" id="allMeasurementsDropDownTablet" onclick="selectClick($('#allMeasurementsDropDownTablet'), measurementClick);" value="">
<option disabled selected style="display:none;"></option>
<option>Durr</option>
<option>jgbfj</option>
<option>zzzzzz</option>
<option>aaaaaa</option>
<option>yyyyyy</option>
</select>
</div>
other
<div id="content">
<div id="centered"></div>
<select id="selectToCenter" onmousedown="this.value='';">
<option value="1">Durr</option>
<option value="2">jgbfj</option>
<option value="3">zzzzzz</option>
<option value="4">aaaaaa</option>
<option value="5">yyyyyy</option>
</select>
</div>
css
#content{
position:relative;
background-color:#C991BE;
height:100px;
width:100%;
z-index:1;
}
#centered{
position:absolute;
text-align: center;
font: bold 18pt calibri;
line-height:100px;
background:red;
width:100%;
height:100%;
z-index:-1;
}
#selectToCenter{
height:100px;
background-color:transparent;
-webkit-appearance:none;
outline:none;
width: 100%;
font: bold 18pt calibri;
text-indent: 5px;
color:transparent !important;
}
option{
color:black !important;
}
js
$('#selectToCenter').on('change', function () {
$('#centered').text($(this).find('option:selected').text());
});
JSFIDDLE

almost there:
color: transparent;

Dropdown Box with expanding optgroup

Im looking for a select box that i can use that has expandible optgroups
The options in the groups should not display until the mouse is move over the optgroup label
<select>
<optgroup label="group 1">
<option>1</option> <!-- Options within this group hidden until mouseover its group label -->
<option>2</option>
<option>3</option>
<option>4</option>
</optgroup>
<optgroup label="group 2">
<option>1</option> <!-- Options within this group hidden until mouseover its group label -->
<option>2</option>
<option>3</option>
<option>4</option>
</optgroup>
<optgroup label="group 3">
<option>1</option> <!-- Options within this group hidden until mouseover its group label -->
<option>2</option>
<option>3</option>
<option>4</option>
</optgroup>
</select>
I want to be able to do this becuase am going to have some very large options and it will help break them down.
If i am unable to do this through an HTML select box + JS i would like to build a customised dropdown that will support this using DIV tags. If anyone knows where i can find any information about this or a tutorial that would be great.
Thanks

NVM i found a solution that works,
I had to use HTML, CSS and JS to achieve what i wanted.
I copied this tutorial
http://www.onextrapixel.com/2012/06/20/create-a-custom-select-box-with-jquery/
and added the extra bits i needed to generate the groups and functionality.
The code that works for me is below....
This is the HTML to generate the layout
<div class='selectBox'>
<span class='selected'>Reset Filter</span> <span class=
'selectArrow'>&#9660</span>
<div class="selectOptions">
<div>
<span class="selectOption c1" value="reset" group="0">Reset Filter</span>
</div>
<div>
<span class="selectOption c1" value="online_booking" group="1">Online
Booking</span>
</div>
<div>
<span class="selectOptionGroup" value="2">>> Services Offered</span>
<span class="selectOption" value="SERVICING" group="2">SERVICING</span>
<span class="selectOption" value="MOT TESTING" group="2">MOT TESTING</span>
<span class="selectOption" value="TYRES" group="2">TYRES</span>
</div>
<div>
<span class="selectOptionGroup" value="3">>> Car Manufacturer</span>
<span class="selectOption" value="ALFA ROMEO" group="3">ALFA ROMEO</span>
<span class="selectOption" value="ASTON MARTIN" group="3">ASTON MARTIN</span>
<span class="selectOption" value="AUDI" group="3">AUDI</span>
</div>
</div>
</div>
This is the Jquery JS code that creates the dropdown
function enableSelectBoxes(){
$('div.selectBox').each(function(){
$(this).children('span.selected').html($(this).children('div.selectOptions').children('span.selectOption:first').html());
$(this).attr('value',$(this).children('div.selectOptions').children('span.selectOption:first').attr('value'));
$(this).children('span.selected,span.selectArrow').click(function(){
if($(this).parent().children('div.selectOptions').css('display') == 'none'){
$(this).parent().children('div.selectOptions').css('display','block');
}
else
{
$(this).parent().children('div.selectOptions').css('display','none');
}
});
$(this).find('span.selectOption').click(function(){
$(this).parent().parent().css('display','none');
$(this).closest('div.selectBox').attr('value',$(this).attr('value'));
$(this).parent().parent().siblings('span.selected').html($(this).html());
$("#filter_type").val($(this).attr("group"));
$("#filter_value").val($(this).attr("value"));
});
$(this).find('span.selectOptionGroup').click(function(){
var group = $(this).attr("value");
$(this).parent().children("span[group='" + group + "']").each(function(){
if($(this).css("display") == "block") {
$(this).css("display", "none");
}
else {
$(this).css("display", "block");
}
});
});
});
}
And finally the CSS
div.selectBox {
position: relative;
display: inline-block;
cursor: default;
text-align: left;
line-height: 30px;
clear: both;
color: #888;
margin-top: 20px;
}
span.selected {
width: 167px;
text-indent: 20px;
border: 1px solid #ccc;
border-right: none;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
background: #f6f6f6;
overflow: hidden;
}
span.selectArrow {
width: 30px;
border: 1px solid #9FD573;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
text-align: center;
font-size: 20px;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
background: #9FD573;
}
span.selectArrow,span.selected {
position: relative;
float: left;
height: 30px;
z-index: 1;
}
div.selectOptions {
position: absolute;
top: 28px;
left: 0;
width: 198px;
border: 1px solid #ccc;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
overflow: hidden;
background: #f6f6f6;
padding-top: 2px;
display: none;
max-height: 400px;
overflow: auto;
}
span.selectOption, span.selectOptionGroup {
width: 80%;
line-height: 20px;
padding: 5px 10%;
}
span.selectOption{
display: none;
}
span.selectOption:hover, span.selectOptionGroup:hover {
color: #f6f6f6;
background: #4096ee;
}
span.selectOptionGroup {
display: block;
font-weight: bold;
font-style: italic;
}

I don't think this is possible with an html select box, because not all browsers support mouse events on option groups within a select box. A few things you may want to try would be:
Jquery accordion
$(document).ready(function() {$("#accordion").accordion();});
This is limited due to the fact that an accordion can only have one item open at a time. If the user wants to compare options, all at once, they're screwed. Check the docs for more.
Use a checkbox or something similar, in a separate field, to control what is selectable in the select box. This way you would be able to simply disable certain options , but they would still be visible so the user would know what they where missing out on. Or you could completely hide the options which would solve your problem of having huge options.
jqTree (github project here)
I've never used this, but it looks like just what you want, except for the fact that it doesn't use the standard html select box.
I noticed that you just answered your own question , but I'm going to post anyway because jqTree may be useful and others should know that a standard html select box does not support mouse events on optgroups.