This is part of my code. I'm trying to work with drop down. I'm unable to select the drop down items. If I removed the line style="padding: 80px;" at the last <span> element, it works well. But I need that line for alignment. This is Fiddle
<input type="text" name="city" maxlength=20 size=15/>
<span style="padding: 10px;"></span>
<select>
<option value="0" selected>Please Select</option>
<option value="tamilnadu">Tamilnadu</option>
<option value="kerala">Kerala</option>
<option value="karnataka">Karnataka</option>
</select>
<span style="line-height:20px"> City </span>
<span style="padding: 80px;"> State/Province </span>
Can you please tell what is the problem in this code. Why padding: 80px; causes the problem?
You need to toggle with z-index.
See : http://jsfiddle.net/3xBPL/7/
<select style="z-index:999; position:absolute">
<option value="0" selected>Please Select</option>
<option value="tamilnadu">Tamilnadu</option>
<option value="kerala">Kerala</option>
<option value="karnataka">Karnataka</option>
</select>
<span style="padding:80px; z-index:1;"> State/Province </span>
Reason : The span area is overlapping the select box
instead of padding:80px try giving padding-left:80px. Because the padding of the element overlapping the <Select>
http://jsfiddle.net/3xBPL/9/
I think problem is in your span cause span start from the top. It overlapping the drowdown box.
Please checck JSFIDDLE
I am editing this code -
<input type="text" name="city" maxlength=20 size=15/>
<span style="padding: 10px;"></span>
<select>
<option value="0" selected>Please Select</option>
<option value="tamilnadu">Tamilnadu</option>
<option value="kerala">Kerala</option>
<option value="karnataka">Karnataka</option>
</select>
<br>
<span style="line-height:20px"> City </span>
<!--<span style="padding:80px; border:1px #cccccc solid;"> State/Province </span> -->
<span style="padding:0px 80px 80px 80px;"> State/Province </span>
Please use -
padding:0px 80px 80px 80px;
The padding:80px is definitely the problem.
Here's a screencap of Firebug: http://screencast.com/t/ISPMaYkyK1
Here's a JSFiddle of the solution: http://jsfiddle.net/jrconway3/4gVUn/
In the screenshot, you can see that the padding is causing your span to cover up the two input boxes. The span is an inline element, so some padding will work depending on the circumstances, but it still tries to line up with the other items. The vertical padding does not work because technically, all your current items are on the same line.
padding-left: 80px;
You can specify "padding-left" to ONLY set left padding. This will fix it so you can properly click on the items. Changing the z-index on different elements will set certain elements to have priority over others, making them appear "over" other elements. But that doesn't solve the root of the problem.
Others have already answered the question, but I already started writing so I decided I'd finish it anyway.
your code has overlap with your drop down
i put it in fiddle
also i give it a color to make it more visible , try to add some new <br> to see how it goes around
span{
background-color:red;
}
its because, with padding 80px, you will expand the span, and when you click dropdown, website say "the one that clicked is span, not dropdown, so dropdown wont viewed"
you can add border by doing this.. it will explain to you more clearly
<span style="padding:80px;border:1px solid black"> State/Province </span>
what do you expect with that span using padding:80px by the way?
Related
I can use CSS pseudo-classes, without JavaScript, to show a hidden element based on a radio box's selection, e.g. https://stackoverflow.com/a/44036088/575530
Is there a CSS pseudo-class I can use with <select> to achieve the same effect, i.e. to change the display: from none to block on a different element?
In the near future it's will be possible using :has()
img {
width: 250px;
display: none;
}
select:has([value="dog"]:checked) ~ img.dog,
select:has([value="wolf"]:checked) ~ img.wolf,
select:has([value="lioness"]:checked) ~ img.lioness{
display:block;
}
<select name="animal">
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="wolf">Wolf</option>
<option value="lioness">Lioness</option>
</select>
<img src="https://picsum.photos/id/582/600/400" class="wolf" alt="A wolf">
<img src="https://picsum.photos/id/1074/600/400" class="lioness" alt="A lioness">
<img src="https://picsum.photos/id/237/600/400" class="dog" alt="A Dog">
I've spent hours trying to get rid of the border radius on my select2 append checkbox. As of now the dropdown is displayed with a checkbox on the left. The problem is that there seems to be a border radius between the two input group elements, something similar to the image. The solution proposed was adding the input-group select2-bootstrap-prepend class to the wrapper element which doesn't work for me.
The html is as follows
<div class="col-lg-3">
<div class="panel-body">
<b>Region</b><br>
<div class="input-group select2-bootstrap-prepend">
<span class="input-group-addon">
<input type="checkbox" checked>
</span>
<select id="select2-single-append" class=" region">
</select>
</div>
</div>
</div>
View the running example from jsfiddle
you need
.select2-container--default .select2-selection--single {
border-radius:0 0.25rem 0.25rem 0;
}
see this fiddle
https://jsfiddle.net/grassog/kLchxehz/25/ (relevant css at the bottom of the css portion)
i have two divs search and demo. And div demo is
hidden {
display: none
}
and onClick of button
i want to show div demo, whose content is loaded onClick event. Although div demo appears but on right of search div. i want it below search div.
Here is my code:
<div id= search>
<div class="recruitment_input">
<span style="margin-top:6px;">Search<sup> </sup>:</span>
<select id="requesttype" class="select_option">
<option value="none">--Select Search--</option>
<option value="design">Department</option>
<option value="development">First Name</option>
<option value="other">Employee ID</option>
</select>
</div>
</div>
<div id=demo></div>
EXAMPLE HERE
I believe this is what you are trying to accomplish. The $('#requesttype').on('change') method could be replaced with a $('button').on('click') method as well. Please let me know if you have any questions.
Modify with CSS?
<style type="text/css">
div#demo {
position: absolute;`
margin-left:50%;
left:-200px;
width:400px;
height: 400px;
background-color: green;
}
</style>
Hope this what you are looking for:-
HTML
<button id="show">Show</button><br/><br/>
<div id= search>
<div class="recruitment_input">
<span style="margin-top:6px;">Search<sup> </sup>:</span>
<select id="requesttype" class="select_option">
<option value="none">--Select Search--</option>
<option value="design">Department</option>
<option value="development">First Name</option>
<option value="other">Employee ID</option>
</select>
</div></div>
<div class="clear"></div><!--clear class will show your demo div down, even you have used any floating above-->
<div id='demo'>your demo box</div>
CSS
#demo{display: none;}
.clear{clear:both;}
Javascript:
$("#show").click(function(){
document.getElementById("demo").style.display = "block";
});
Here is Fiddle
Add style to your search div.
i.e.
Make <div id='search'>
as <div id='search' style='float:left'>
Then this will place your demo is apper right side of the search div
I have a form with a drop down list of venues and a submit button.
They are supposed to be on the same line, but since the list of venues is dynamic, it could become too long and push the button down.
I was thinking of setting a max-width property to the select, but I'm not clear whether this will work in all browsers. Do you have any suggestions on a workaround?
<form action="http://localhost/ci-llmg/index.php/welcome/searchVenueForm" method="post" class="searchform">
<select name="venue">
<option value="0" selected="selected">Select venue...</option>
<option value="1">venue 0</option>
<option value="2">club 1</option>
<option value="3">disco 2</option>
<option value="4">future test venue</option>
</select>
<input type="submit" name="" value="Show venue!" class="submitButton" />
</form>
css:
.searchform select {
max-width: 320px;
}
.searchform input.submitButton {
float: right;
}
If the venues are generated on the server side, you can use your server-side scripting to cut them down to a specific maximum character count.
When using pure CSS I'd also try setting overflow:hidden, both on the select and the option elements. Also try setting max-width on the option element. When it works in all non-IE, you can use the usual scripts to add max-width support for IE.
try:
fieldset select {
width: auto;
}
This question is related to another question I asked
Basically, I have 2 horizontally aligned divs. Both sit inside a div called ".Parent", so the structure is like this:
<div class="Parent">
<div style="float:right">
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div style="float:left">
<span>dest list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div style="clear:both; font-size:1px;"></div>
</div>
The problem is that the Parent div exists inside a another div called #main. #main has a white background that frames all of my content.
Before I added the floats to the divs inside .Parent, everything was fine because the containing Div pushed the white background down to the right size. But now that the divs are floating, they don't push #main's white background down.
Can anyone suggest how to get the #main to recognise the size it's supposed to strech down to? Should I approach this differently?
Thanks
Dave
Give your #main overflow:hidden; and optionall clear:both;
Actually, they ARE behaving correctly and parent divs are never to expand to contain floated elements. As shown by other answers, you can Google for "clear floats" for more explanations and examples of how to do this.