I have three dropdowns in my page, two of them are shown perfectly while the other one is not appearing, and when looking at the element in page it gets loaded with the "style="display: none;" value even if I'm forcing it with style="display: inline;".
Here's the code:
<div class="dropdown">
<div id="myBrokenDropdown" class="dropdown-content">
<select class='filter' id="notWorkingOne">
<option value=""> Select</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</div>
<!--select button-->
<div id="select1" class="dropdown-content">
<select class='filter' id="select1Works" data-col="1">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</div>
<div id="select2" class="dropdown-content">
<select class='filter' id="select2Works" data-col="5">
<option value=""> Select</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</div>
</div>
Also, in jquery I can hide/Show the two dropdowns with the following code:
$('#select1Works').hide();
$('#select2Works').hide();
$('#notWorkingOne').hide();
$(document).ready(function() {
$("input[type='radio']").on('change', function() {
$("#select1Works").toggle($("[name=radioButton]").index(this) === 0);
$("#select2Works").val("").trigger("change");
$("#select2Works").toggle($("[name=radioButton]").index(this) === 1);
$("#select1Works").val("").trigger("change");
if ($('#select1Works').is(':visible') || $('#select2Works').is(':visible')) {
$('#notWorkingOne').show();
}
})
});
Why is the "myBrokenDropdown" not showing?
Thank you very much
It was an issue with a selector in my actual code, I missed a '#'.
Related
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>
Regarding the Materialize select element, I would expect the number of options visible to be 5, yet this is not the case.
I have also tried to set the height but no luck either.
<div class="input-field col s4">
<select id="add_cusine_type" size="5">
<option value="" disabled selected>Choose your cuisine type</option>
<option value="Australian">Australian</option>
<option value="American">American</option>
<option value="British">British</option>
<option value="Carribean">Carribean</option>
<option value="Chinese">Chinese</option>
<option value="French">French</option>
<option value="Greek">Greek</option>
<option value="Indian">Indian</option>
<option value="Italian">Italian</option>
<option value="Japanese">Japanese</option>
<option value="Mediterranean">Mediterranean</option>
<option value="Mexican">Mexican</option>
<option value="Moroccan">Moroccan</option>
<option value="Spanish">Spanish</option>
<option value="Thai">Thai</option>
<option value="Turkish">Turkish</option>
<option value="Vietnamese">Vietnamese</option>
</select>
<label>Cuisine Type</label>
</div>
Thank you
Materialize uses a dropdown for the select options (it is in fact a dropdown triggered by a text input). So you need to target the dropdown class:
.select-dropdown {
height: 300px;
}
https://codepen.io/doughballs/pen/NWWGNMq
You can simply specify it in the wrapping div here my example is 300px
https://codepen.io/mxnelles/pen/GRJeXGd
<div class="input-field col s4" style="width:300px">
<select id="add_cusine_type" size="5">
<option value="" disabled selected>Choose your cuisine type</option>
<option value="Australian">Australian</option>
<option value="American">American</option>
<option value="British">British</option>
<option value="Carribean">Carribean</option>
<option value="Chinese">Chinese</option>
<option value="French">French</option>
<option value="Greek">Greek</option>
<option value="Indian">Indian</option>
<option value="Italian">Italian</option>
<option value="Japanese">Japanese</option>
<option value="Mediterranean">Mediterranean</option>
<option value="Mexican">Mexican</option>
<option value="Moroccan">Moroccan</option>
<option value="Spanish">Spanish</option>
<option value="Thai">Thai</option>
<option value="Turkish">Turkish</option>
<option value="Vietnamese">Vietnamese</option>
</select>
<label>Cuisine Type</label>
</div>
<div style="width: 100%; overflow: hidden;">
<div style="margin-left: 100px; width: 600px; float: left;">
<div class="description">
<h2 style="color:blue">Select the appropriate version</h2>
</div>
<select>
<option value="" disabled selected>Select version</option>
<option value="" disabled selected>Select feature</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
<div style=" margin-left: 350px; width: 600px; float: left;">
<div class="description">
<h2 style="color:blue">Select the appropriate category</h2>
</div>
<select>
<option value="" disabled selected>Select feature</option>
<option value="" disabled selected>Select category</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
<div style="margin-left: 620px; width: 600px; float: left;">
<div class="description">
<br>
<h2 style="color:blue">Select the feature</h2>
</div>
<select>
<option value="" disabled selected>Select feature</option>
<option value="" disabled selected>Select category</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
</div>
I want the three divs with the drop down lists to be next to each other horizontally. I have tried using float, inline and inline block. How can it be done in HTML.
Use inline-block and put properly your all divs.
Here is an example:
.selection {
display: inline-block;
}
h1{
display: inline-block;
font-size: 14px;
}
<div>
<div class="selection">
<h1>Select Option</h1>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="selection">
<h1>Select Option</h1>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="selection">
<h1>Select Option</h1>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
<div style="float:left">
dropdown1
</div>
<div style="float:left">
dropdown2
</div>
<div style="float:left">
dropdown3
</div>
This will definitely work.
Problem in your code is over width. Better is you give width into % instead of px.
First of all, your code is really badly formatted.
Your are using 7 Div but you are missing 2 Div closing tags. Close the Div tags properly.
You are also fixing the width of all 3 divisions, so if the screen size is smaller than the combined width of the 3 div, your div's will no longer be displayed horizontally. Give width relative like width:30%.
Also remove margin from the elements. Use Padding instead to give space between div's.
<html>
<body>
<div style="width: 100%; overflow: hidden;">
<div style=" width: 33%;float: left;">
<div class="description">
<h2 style="color:blue">Select the appropriate version</h2>
</div>
<select>
<option value="" disabled selected>Select version</option>
<option value="" disabled selected>Select feature</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
<div style="float: left;width: 33%;">
<div class="description">
<h2 style="color:blue">Select the appropriate category</h2>
</div>
<select>
<option value="" disabled selected>Select feature</option>
<option value="" disabled selected>Select category</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
<div style=" float: left;width: 33%;">
<div class="description">
<br>
<h2 style="color:blue">Select the feature</h2>
</div>
<select>
<option value="" disabled selected>Select feature</option>
<option value="" disabled selected>Select category</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
</div>
</body>
</html>
Problem is with your code you have 3 unclosed div tags and a lot of left margin plus try to use width and margin both in %
[Check pen] (http://codepen.io/anon/pen/gPzJpr)
for your html
<div class="container">
<div id="firstDiv">
<h1>Select the appropriate version</h1>
<select class="" name="">
<option value="" disabled selected>Select version</option>
<option value="" disabled selected>Select feature</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
<div id="secondDiv">
<h1>Select the appropriate version</h1>
<select class="" name="">
<option value="" disabled selected>Select version</option>
<option value="" disabled selected>Select feature</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
<div id="thirdDiv">
<h1>Select the appropriate version</h1>
<select class="" name="">
<option value="" disabled selected>Select version</option>
<option value="" disabled selected>Select feature</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
</div>
for your css:
div{
display: inline-block;
position: relative;
margin: 5px;
padding: 15px;
}
#firstDiv{
background-color: #ccc;
}
#secondDiv{
background-color: #eee;
}
#thirdDiv{
background-color: #aaa;
}
Just like what #Maihan Nijat said, use external CSS to make it easier for you to debug.
I made a few changes to your code. The absolute easiest way to solve this problem is to ensure that the width of each element could fit next to each other on the screen. Not only does this require that the text is not too large, but also that the width you explicitly define does not overflow.
The simple solution to your problem is to place display: inline-block; on the elements which you would like side by side.
.left {
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="left">
<div class="description">
<h2 style="color:blue">Select the appropriate version</h2>
</div>
<select>
<option value="" disabled selected>Select version</option>
<option value="" disabled selected>Select feature</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<div class="left">
<div class="description">
<h2 style="color:blue">Select the appropriate category</h2>
</div>
<select>
<option value="" disabled selected>Select feature</option>
<option value="" disabled selected>Select category</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<div class="left">
<div class="description">
<br>
<h2 style="color:blue">Select the feature</h2>
</div>
<select>
<option value="" disabled selected>Select feature</option>
<option value="" disabled selected>Select category</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
</body>
</html>
I am wanting to create a JavaScript drop down for my website and I want it to display divs underneath.
<select name="Portfolio">
<option id="1">Option 1</option>
<option id="2">Option 2</option>
<option id="3">Option 3</option>
<option id="4">Option 4</option>
</select>
<div id="1"><img src="URL" alt="Blah Blah Blah"/></div>
<div id="2"><img src="URL" alt="Blah Blah Blah"/></div>
What JavaScript code do i need for this to work? Any help will be greatly appreciated! I have looked at so many others but can't seem to get anything to work.
See jsfiddle link demo
<select name="Portfolio">
<option>None</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<div id="1" style="display:none;"><img src="img1" alt="Blah Blah Blah"/></div>
<div id="2" style="display:none;"><img src="img2" alt="Blah Blah Blah"/></div>
var old_id
$(function(){
$("select").change(function(){
$('div').css('display','none');
$('#'+$(this).val()).css('display','block');
});
});
<select name="Portfolio" id="portfolio">
<option>None</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option alue="4">Option 4</option>
</select>
<div id="1" style="display:none;"><img src="URL" alt="Blah Blah Blah"/></div>
<div id="2" style="display:none;"><img src="URL" alt="Blah Blah Blah"/></div>
$(document).ready(function() {
$("select").change(function() {
$('div').hide();
$('#'+$(this).val()).show();
});
});
run this in jsfiddle
Firstly, you're using id attributes in <option> i'd suggest using value instead; so your markup would be somewhat like this:
<select name="Portfolio">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
then, if you're not using jQuery a simple javascript approach to your problem would be like:
window.onload = function() {
document.getElementsByTagName('select')[0].onchange = function() {
document.getElementById(this.value).style.display = 'block';
}
}
In case you've have a problem with multiple images showing up on subsequent drop-down changes, hide all the divs every time the onchange() is triggered
see this working fiddle.
Hey guys so I am trying to create a quick search with the boxes. I thought I could just put in some tags but does not work so I was wondering how I would go about doing this?
Here is my code:
<div id="advancesearch">
<div class="audio-quicksearch">
<select>
<option value="Microphones">Microphones</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</div>
</div><!-- END #advancesearch -->
Why don't you use JavaScript window.location?
<div id="advancesearch">
<div class="audio-quicksearch">
<select>
<option value="Microphones" onclick="window.location='http://www.google.com'">Microphones</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</div>
</div>
Or create a function
<div id="advancesearch">
<div class="audio-quicksearch">
<select>
<option></option>
<option value="Microphones" onclick="redirect_me('http://www.google.com');">Microphones</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</div>
</div>
<script>
function redirect_me(re_link) {
window.location = re_link;
}
</script>