Is it possible to show all <select> <option>s as a toggle?

Is it possible to show all <select> <option>s as a toggle? - javascript

This is a bit of a weird request, so I haven't seen any examples for it anywhere. Basically I want to 'unfold' a <select> so its options are visible, basically turning it into a toggle, of sorts. Here's my original <select>:
<span><input type="checkbox" className="onlyCheckbox" value={this.state.only}
onChange={this.handleOnlyChange.bind(this)} />
<label htmlFor="onlyIdentityBox">Only</label>
<select value={this.state.operator} onChange={this.handleOperatorChange.bind(this)} >
<option value="AND">AND</option>
<option value="OR">OR</option>
</select></span>
Ideally the solution would be css-only, but I'm not sure if that's possible (I've searched but not found any examples). Here's an image of what I'd like:
Is this doable?
edit: added context for the <select>'s surrounding elements.

To do this with a select box is rather..... odd. But sure it can be done. This should be enough to get you started:
.toggle{
font-size:18px;
height:1.4em;
overflow:hidden;
border:1px solid black;
border-radius:5px;
padding:0px;
box-sizing:border-box;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
.toggle option{
display:inline-block;
float:left;
width:50%;
min-width:50px;
height:100%;
text-align:center;
box-sizing:border-box;
}
<select size='2' class='toggle'>
<option value="AND" selected>AND</option>
<option value="OR">OR</option>
</select>

If You can add some extra markup into your code then you can also try the following code:
Please check the fiddle for Demo. Fiddle Link
HTML
<select id="select-box">
<option value="AND" selected>AND</option>
<option value="OR">OR</option>
</select>
<div class="toggle-effect">
<label class="and">AND</label>
<label class="or">OR</label>
</div>
CSS
select {
margin-bottom: 40px;
}
.and {
border: 1px solid black;
background:red;
color: white;
}
.or {
border: 1px solid black;
background:blue;
color: white;
}
JS
$('.toggle-effect').on('click', '.and,.or', function(){
var textInLabel = $(this).text();
$('#select-box').val(textInLabel);
$('#select-box').trigger('change');
});

After some tinkering around at CodePen I came up with this, I added some JS to add the scroll effect.
var select = document.getElementById('select');
select.addEventListener('mouseup', function(e) {
e.preventDefault();
});
select.addEventListener('mousewheel', function(e) {
select.selectedIndex = select.selectedIndex + 1;
});
select {
overflow: hidden;
size: 2;
height: 18px;
}
option {
display: inline;
}
<select id="select" multiple>
<option>1</option>
<option>2</option>
</select>

Related

$(event.target).closest().length to hide div doesn't always work. Any alternatives?

I use $(event.target).closest("#divID").length to hide a div when the user clicks outside of it but in the case that the div is visible and I click on a date (datepicker) it won't hide the div.
Also if I click on a <select> sometimes it hides it sometimes it doesn't.
Is there a better solution to hide a div when something else is clicked?
Is my implementation wrong?
ps: #log_in is the login button, #log_in_form is the form that I want to hide on outside click and #log_in_container is the div that contains #log_in and and #log_in_form
UPDATE: I just noticed that the disappearance isn't the same on windows 10 and linux ubuntu 16.04. On a pc with windows 10 using google chrome the form disappears on the first click i do on a select(thats the desirable functionality) but still doesn't disappear if i choose a date. While on linux ubuntu 16.04 on google chrome it is as i described above (doesn't disappear on date choice and also doesn't disappear on the first click you do on select)
Example based on Andrei's answer with snippet
$(document).on('click', function(e){
if($(e.target).closest('#log_in').is('#log_in'))
{
$('#log_in_form').fadeIn();
}
else if(!$(e.target).closest('#log_in_container').is('#log_in_container'))
{
$('#log_in_form').fadeOut();
}
})
#log_in_container{
display:inline-block;
width:122px;
height:58px;
margin-left:60px;
background-color:gray;
}
#log_in{
display:block;
width:120px;
height:28px;
text-align: center;
border: 1px solid red;
font-size:16px;
background-color:yellow;
vertical-align: top;
}
#log_in_form{
display:none;
position:absolute;
width:120px;
height:28px;
text-align: center;
background-color: green;
border: 1px solid blue;
}
.type{
display:inline-block;
width:120px;
height:30px;
text-align: center;
border: 1px solid red;
font-size:16px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- ~~~~~~~~~~~~~~~Date picker ~~~~~~~~~~~~~~~ -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function()
{
$( "#datepicker" ).datepicker();
});
</script>
<title></title>
</head>
<body>
<select class="type">
<option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select hero</p></option>
<option value="0">Spiderman</option>
<option value="1">Iron man</option>
<option value="2">Deadpool</option>
</select>
<select class="type">
<option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select food</p></option>
<option value="0">Kebab</option>
<option value="1">Mousaka</option>
<option value="2">Noodles</option>
</select>
<div id="log_in_container">
<div id="log_in">Log_In_button</div>
<div id ="log_in_form">login_form</div>
</div>
<div id="datepicker"></div>
</body>
</html>
In the above snippet if you click at Log_in_button the Log_in_form appears. If then you click on a date it doesn't disappear, then click
on a select the Log_in_form still doesn't disappear, after that click on the next select the Log_in_form is still visible. I would like to make it so that it disappears in these occasions (like select pop up does). Is this possible?

jQuery works only with event bubbling (the event starts at the target element and works up the DOM tree, raising click events until it reaches the top level document). The potential issue with this, as you can see with the ui-datepicker, is that elements can cancel the bubbling by using event.stopPropagation(), and the document never gets it.
Instead you need to use raw Javascript event capturing instead, where the top-level element captures the event happening and passes it down the DOM tree.
The diagram on the W3C site explains the capture and bubble flow nicely, and see this question for more details and cross-browser implementation.
The change required to your code is minimal, you are just using document.addEventListener instead of $(document).on:
document.addEventListener("click", function(e){
if($(e.target).closest('#log_in').is('#log_in'))
{
$('#log_in_form').fadeIn();
}
else if(!$(e.target).closest('#log_in_container').is('#log_in_container'))
{
$('#log_in_form').fadeOut();
}
}, true);
#log_in_container{
display:inline-block;
width:122px;
height:58px;
margin-left:60px;
background-color:gray;
}
#log_in{
display:block;
width:120px;
height:28px;
text-align: center;
border: 1px solid red;
font-size:16px;
background-color:yellow;
vertical-align: top;
}
#log_in_form{
display:none;
position:absolute;
width:120px;
height:28px;
text-align: center;
background-color: green;
border: 1px solid blue;
}
.type{
display:inline-block;
width:120px;
height:30px;
text-align: center;
border: 1px solid red;
font-size:16px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- ~~~~~~~~~~~~~~~Date picker ~~~~~~~~~~~~~~~ -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function()
{
$( "#datepicker" ).datepicker();
});
</script>
<title></title>
</head>
<body>
<select class="type">
<option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select hero</p></option>
<option value="0">Spiderman</option>
<option value="1">Iron man</option>
<option value="2">Deadpool</option>
</select>
<select class="type">
<option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select food</p></option>
<option value="0">Kebab</option>
<option value="1">Mousaka</option>
<option value="2">Noodles</option>
</select>
<div id="log_in_container">
<div id="log_in">Log_In_button</div>
<div id ="log_in_form">login_form</div>
</div>
<div id="datepicker"></div>
</body>
</html>
As you mentioned previously, the initial <select> does work in Chrome on Windows, but not Chrome on Linux. Browsers often hand off rendering of form controls to the OS for visual consistency, but this can introduce inconsistency in behaviour. <select>s are probably the most inconsistent of the base form controls, because of their added complexity. This question demonstrates this issue, particularly:
Chrome 19 on Linux: First mouse click expands options [click event not triggered], subsequent click on either the still-present select, or the options, triggers click event.
As this is a browser behaviour which you don't have control over, I don't think there is any way around it - you can only handle the events it fires. If the event is not fired by the browser, you can't react to it.

You can simply use mouseup event instead of click which will work even on date click.
$(document).on('mouseup', function(e){
if($(e.target).closest('#log_in').is('#log_in'))
{
$('#log_in_form').fadeIn();
}
else if(!$(e.target).closest('#log_in_container').is('#log_in_container'))
{
$('#log_in_form').fadeOut();
}
})
#log_in_container{
display:inline-block;
width:122px;
height:58px;
margin-left:60px;
background-color:gray;
}
#log_in{
display:block;
width:120px;
height:28px;
text-align: center;
border: 1px solid red;
font-size:16px;
background-color:yellow;
vertical-align: top;
}
#log_in_form{
display:none;
position:absolute;
width:120px;
height:28px;
text-align: center;
background-color: green;
border: 1px solid blue;
}
.type{
display:inline-block;
width:120px;
height:30px;
text-align: center;
border: 1px solid red;
font-size:16px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- ~~~~~~~~~~~~~~~Date picker ~~~~~~~~~~~~~~~ -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function()
{
$( "#datepicker" ).datepicker();
});
</script>
<title></title>
</head>
<body>
<select class="type">
<option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select hero</p></option>
<option value="0">Spiderman</option>
<option value="1">Iron man</option>
<option value="2">Deadpool</option>
</select>
<select class="type">
<option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select food</p></option>
<option value="0">Kebab</option>
<option value="1">Mousaka</option>
<option value="2">Noodles</option>
</select>
<div id="log_in_container">
<div id="log_in">Log_In_button</div>
<div id ="log_in_form">login_form</div>
</div>
<div id="datepicker"></div>
</body>
</html>

Your code is working except on dateoicker <td>. this is really weird
But we can still hack this using onSelect method from jQuery ui datepicker .
$(document).on('click', function(e){
if($(e.target).closest('#log_in').is('#log_in'))
{
$('#log_in_form').fadeIn();
}
else if(!$(e.target).closest('#log_in_container').is('#log_in_container'))
{
$('#log_in_form').fadeOut();
}
})
#log_in_container{
display:inline-block;
width:122px;
height:58px;
margin-left:60px;
background-color:gray;
}
#log_in{
display:block;
width:120px;
height:28px;
text-align: center;
border: 1px solid red;
font-size:16px;
background-color:yellow;
vertical-align: top;
}
#log_in_form{
display:none;
position:absolute;
width:120px;
height:28px;
text-align: center;
background-color: green;
border: 1px solid blue;
}
.type{
display:inline-block;
width:120px;
height:30px;
text-align: center;
border: 1px solid red;
font-size:16px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- ~~~~~~~~~~~~~~~Date picker ~~~~~~~~~~~~~~~ -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function()
{
$( "#datepicker" ).datepicker({
onSelect: function(i, e){
$('#log_in_form').fadeOut();
}
});
});
</script>
<title></title>
</head>
<body>
<select class="type">
<option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select hero</p></option>
<option value="0">Spiderman</option>
<option value="1">Iron man</option>
<option value="2">Deadpool</option>
</select>
<select class="type">
<option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select food</p></option>
<option value="0">Kebab</option>
<option value="1">Mousaka</option>
<option value="2">Noodles</option>
</select>
<div id="log_in_container">
<div id="log_in">Log_In_button</div>
<div id ="log_in_form">login_form</div>
</div>
<div id="datepicker"></div>
</body>
</html>

I have a suggestion to use the event mousedown instead of click and also to check whether the click happened inside the log in wrapper like this
$(e.target).parents().has($('#log_in_container')).length
the entire document ready would look like this
$(document).on('mousedown', function(e){
if($(e.target).closest('#log_in').is('#log_in'))
{
$('#log_in_form').fadeIn();
}
else if($(e.target).parents().has($('#log_in_container')).length)
{
$('#log_in_form').fadeOut();
}
})

Why don't you use the onSelect event of the datepicker and trigger the click that you have bound to the document manually, as it does not seem to be triggered when you click on the dates inside the datepicker, no need to change anything regarding events or writing a separate logic inside the onSelect, just add any more logic if you want inside the .on('click') and trigger it just add 2 lines of your code and keep everything as is.
You just need to change your datepicker initialization like below
$("#datepicker").datepicker({
onSelect: function (date, obj) {
$(document).trigger('click')
}
});
See the demo below
$(document).on('click', function(e) {
if ($(e.target).closest('#log_in').is('#log_in')) {
$('#log_in_form').fadeIn();
} else if (!$(e.target).closest('#log_in_container').is('#log_in_container')) {
$('#log_in_form').fadeOut();
}
})
#log_in_container {
display: inline-block;
width: 122px;
height: 58px;
margin-left: 60px;
background-color: gray;
}
#log_in {
display: block;
width: 120px;
height: 28px;
text-align: center;
border: 1px solid red;
font-size: 16px;
background-color: yellow;
vertical-align: top;
}
#log_in_form {
display: none;
position: absolute;
width: 120px;
height: 28px;
text-align: center;
background-color: green;
border: 1px solid blue;
}
.type {
display: inline-block;
width: 120px;
height: 30px;
text-align: center;
border: 1px solid red;
font-size: 16px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- ~~~~~~~~~~~~~~~Date picker ~~~~~~~~~~~~~~~ -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("#datepicker").datepicker({
onSelect: function(date, obj) {
$(document).trigger('click')
}
});
});
</script>
<title></title>
</head>
<body>
<select class="type">
<option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select hero</p></option>
<option value="0">Spiderman</option>
<option value="1">Iron man</option>
<option value="2">Deadpool</option>
</select>
<select class="type">
<option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select food</p></option>
<option value="0">Kebab</option>
<option value="1">Mousaka</option>
<option value="2">Noodles</option>
</select>
<div id="log_in_container">
<div id="log_in">Log_In_button</div>
<div id="log_in_form">login_form</div>
</div>
<div id="datepicker"></div>
</body>
</html>

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;

How to override css property to default?

Updated
I have set the "height: auto;" property via style on both the fieldset and select elements, however it still results in the select box having the original height specified in the CSS for "fieldset select" which is 20px. If I change that to "auto" in the CSS it works, but as I need to override it, I am at a loss as to what is causing this.
<fieldset style="width:62%; float:left; margin-left: 19%; height: auto; !important">
<select style="height: auto; !important" name="searchable[]" id='searchable' multiple='multiple' size='10' >
<option value='1'>127.0.0.1</option>
<option value='2'>127.0.0.5</option>
<option value='3'>127.0.0.10</option>
<option value='4'>127.0.0.15</option>
<option value='5'>127.0.0.20</option>
<option value='6'>127.0.0.25</option>
<option value='7'>127.0.0.30</option>
<option value='8'>127.0.0.35</option>
<option value='9'>127.0.0.40</option>
<option value='10'>127.0.0.45</option>
<option value='11'>127.0.0.50</option>
<option value='12' SELECTED>127.0.0.55</option>
<option value='13' SELECTED>127.0.0.60</option>
</select>
</fieldset><div class="clear"></div>

it should be:
fieldset select.clearheight{
height: auto;
}
You need to chain select and .clearheight
If you need to increase the priority then try this (keep in mind this is bad practice):
fieldset select.clearheight{
height: auto; !important
}
Hope this helps.

changes, you have added space between select .clearheight
/\
fieldset select .clearheight{
height: auto;
}
to
fieldset select.clearheight{
height: auto;
}

Try it,
<fieldset style="width:62%; float:left; margin-left: 19%;height:auto !important">

Use 2 classes and use addClass and removeClass from jquery to toggle them.

Try this:
HTML:
<select class="clearheight" name="searchable[]" id='searchable' multiple='multiple' size='10' >
<option value="1">A</option>
<option value="1">B</option>
<option value="1">C</option>
</select>
</fieldset>
CSS:
fieldset select {
width: 96%;
margin: 0 10px;
border: 1px solid #bbb;
height: 20px;
color: #666666;
}
fieldset .clearheight{
height: auto;
}
Check this out: http://jsfiddle.net/78Fu4/

Develop Reference

JavaScript is the programming language of the Web.

Is it possible to show all <select> <option>s as a toggle? - javascript

Related

$(event.target).closest().length to hide div doesn't always work. Any alternatives?

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

select2 alignment not working

select tag with invisible option

How to override css property to default?

Categories

Resources