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
Related
I cannot get the select2 dropdown to fit parent container (collapse) when initialized hidden. I understand this is not a bug, because select2 was not able to calculate the parent width. But I couldn't overcome this. I need it to be 100% to the parent.
<div class="panel panel-default">
<div class="panel-body">
<div class="btn-toolbar">
<button class="btn btn-default" data-toggle="collapse" data-target="#collapse-select2" aria-expanded="false">Toggle</button>
</div>
<div class="collapse" id="collapse-select2">
<select class="form-control" data-role="select2">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
</select>
</div>
</div>
</div>
Fiddle: here
Can anybody please help?
actually quite simple solution:
1. CSS only solution
give .select2 100% width and override with !important like this:
.select2 {
width: 100%!important; /* overrides computed width, 100px in your demo */
}
here's also your updated fiddle https://jsfiddle.net/1agwbfmy/6/
2. style tag for select
another way to do it, as written in documentation is to give width to <select> element with style and it will get the attribute from there:
<select class="form-control" data-role="select2" style="width:100%">
3. plugin configuration
lastly, you can set the width when calling the plugin in jQuery (as written in old docs):
$('select[data-role="select2"]').select2({
theme: 'bootstrap',
width: '100%'
});
Use width: '100%' property in config.
$('[data-role="select2"]').select2({
width: '100%',
...
});
I want to set select box height same to label (模板分類:).
<select id="TamplateClass" style="height:1.5em">...</select>
use CSS #TamplateClass{height:1.5em;}
But results are all the same, see this image:
HTML:
<div class="ui-block-a">
<div data-role="fieldcontain" >
<label>模板分類：</label>
<select id="TamplateClass" >
<option>1</option>
<option>2</option>
</select>
</div>
</div>
How should I do?
jQuery Mobile creates a DIV with an ID of the selectid + "-button". You could override the top and bottom padding of this div to get the height you want:
<div data-role="fieldcontain" >
<label>模板分類：</label>
<select id="TamplateClass" >
<option>1</option>
<option>2</option>
</select>
</div>
#TamplateClass-button {
padding-top: 3px;
padding-bottom: 3px;
}
DEMO
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 would like to apply a specific css to a specific label in my html
this is my HTML
<div id="registration">
<div>
<label>Localisation</label>**//this is the target label to apply css**
<div id="registration_localisation">
<div>
<label>Gouvernorat</label>
<select id="registration_localisation_gouvernorat">
<option value="1">Ariana</option>
<option value="2">Ben Arous</option>
<option value="3">Bizerte</option>
</select>
</div>
<div>
<label for="registration_localisation_ville">Ville</label>
<input type="text" id="registration_localisation_ville">
</div>
</div>
</div>
<div>
<label>Annonceur</label>**//this is the target label to apply the css**
<div id="registration_annonceur">
<div>
<label for="registration_annonceur_Nom">Nom</label>
<input type="text" id="registration_annonceur_Nom">
</div>
<div>
<label for="registration_annonceur_Email">Email</label>
<input type="text" id="registration_annonceur_Email">
</div>
<div>
<label for="registration_Telephone" >Telephone</label>
<input type="text" id="registration_annonceur_Telephone">
</div>
</div>
</div>
</div>
i used many pseudo classes but i didn't find any solution
any idea please ?
try this way where you can style all your label inside the div contained into registration
#registration > div > label{
//your css
}
DEMO
Just give it a class. Classes may be repeated in HTML, like;
<label class="class1">Localisation</label>
and in your css,
.class1{
//styling
}
CSS3 way
#registration div label:first-child {
// specific styles for just the first label item
}
Or
#registration div label:nth-first-of-type{
// specific styles for just the first label item
}
jQuery Way
<script>
$( "#registration div label:first" ).css( "font-style", "italic" );
</script>
How about
#registration > div > label:first-of-type {}
?
Match labels who are the first, direct child of a div.
div > label:first-child {}
Actually it would be much better if you could add some classes to your elements. Matching wide selector such as div is a bad idea for future maintainability. Changing your markup will break your style.
Im using Ruby on Rails 4 with twitter bootstrap to display a form_for (twitter bs form_horizontal). The styling below works correctly (label, input and hint display next to each other ) for normal fields (non error'd) when rails wraps elements in the field_with_errors div however the hint is dropped to the beneath the input element.
<div class="control-group required">
<div class="field_with_errors"><label class="control-label" for="lot_commonname_id">Common Name</label></div>
<div class="controls">
<div class="field_with_errors"><select id="lot_commonname_id" name="lot[commonname_id]"><option value="">Please select</option>
<option value="1">x</option>
<option value="2">y</option>
<option value="3">z</option>
</select>
</div>
<div class="hint">
<a href="#" rel="tooltip" data-original-title="xyz test.">
<i class="icon-info-sign"></i>
</a>
</div>
</div>
</div>
.field_with_errors {
#extend .control-group;
#extend .error;
}
.form-horizontal .field_with_errors
{
margin: 0;
}
.form-horizontal .field_with_errors:before, .form-horizontal .field_with_errors::after
{
display: block;
clear: none;
}
the following jsfiddle http://jsfiddle.net/a78B5/6/ demos the problem
Divs default to display:block so it will naturally drop down to be below your input. Add styling to use display:inline or display:inline-block and it will move back to being next to your text box.