I have this my code :
<div class="control-group">
<label class="control-label" for="etaord">
<strong>Etat Ordre :</strong> </label>
<div class="controls">
#if(edition){
<select id="etaord" name="etaord" class="input-large">
<option value=""></option>
#foreach (var item in Model.MINPARM001._MINPARM001.sortie.infoarg)
{
<option value="#item.argt" #(Model.PDDORDM002._PDDORDM002.sortie.infoordre.etatordre == #item.argt ? "selected=\"selected\"" : "")>#item.rubriqu.valrub</option>
}
</select>
}else{
<p id="etaord">#Model.PDDORDM002.result.sortie.infoordre.libeta.Trim()</p>
}
</div>
</div>
When i'm in the screen edition mode, the label and select field are inline.
But when i'm not in edition mode, label and value are not inline. I've a little vertical difference.
An idea?
Bootstrap seems to expect form controls within class="controls" elements. It's a bit hacky but adding the following css rule should work
div.controls p {
margin-top:5px;
}
Related
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.
I am trying to create a simple label and select box for a form.
I want this: [LABEL] [SELECT BOX]. Inline. All on the same line. Simple, eh?
Yet when I use the inline form element from bootstrap, it wraps the box:
<form class="form-inline" role="form">
<label for="sort-values">Sort:
<select id="sort-values" class="form-control">
<option value="2">Distance</option>
<option value="3">Rating</option>
<option value="4">Price</option>
</select>
</label>
</form>
What am I missing? Example here: http://bootply.com/79458
The width of the element .form-control is the problem..
.form-control {
width: 100%;
}
It is currently at 100%.. if you want it to work, you can either remove the width completely.. or just specify a smaller width, such as 200px;
Forked example here
You can use two methods for linking label and select. First method: id for select and attribute for for label. Second: including select inside of label. Not necessary use both of them.
Code:
<form class="form-inline" role="form">
<label class="control-label" for="sort-values">Sort:</label>
<select id="sort-values" class="form-control">
<option value="2">Distance</option>
<option value="3">Rating</option>
<option value="4">Price</option>
</select>
</form>
Example: http://bootply.com/79462
<tr>
<td colspan="3">
With Selected:
<select name="action" id="group_action" class="span2">
<option value="">--Choose--</option>
<option value="delete">Delete</option>
<option value="add_to">Add To</option>
</select>
<select name="group" id="group">
<option value="">--Choose--</option>
<?php foreach($groups as $group){ ?>
<option value="<?php echo $group->id?>"><?php echo $group->name?></option>
<?php } ?>
</select>
<button name="group_action" class="btn">Submit</button>
</td>
</tr>
I've tried style="vertical-align:middle", valign="middle" for the TD but it doesn't work
Here's how it looks like: http://ge.tt/1Klf2dS/v/0?c
Twitter bootstrap will add a margin-bottom: 10px to most form elements, but not to the <button> element. This will cause your HTML elements to look oddly aligned if placed in a single row of a table.
You could either remove the margin-bottom from the element, or add it to the other elements.
Take a look at this example:
http://jsbin.com/ezunom/1/edit
Since you're asking about Twitter Bootstrap, and your code seems to form part of a form (forgive the redundancy), adding the "form-horizontal" class to the form should solve your aligning problems:
<form class="form-horizontal">
</form>
use this
style="Margin-top:-10px;"
This one is trick for these kinds of labels, ;)
add a .checkbox to the label
<label class="col-sm-4 checkbox">Cinsiyet</label>
the class will do no harm and just add a margin as you need
I am using wicket framework and overriding appendOptionHtml of ListMultipleChoice
to generate below select tag and using CSS :before to place red * before option text
it is working fine in FF but not in IE.
CSS:
.required:before {
content: "*";
color: #8B2942;
}
HTML:
<select>
<option class="required" value="0">test1</option>
<option class="required" value="1">test2</option>
<option class="required" value="2">test3</option>
</select>
Can anyone please help or any other way to put red asterisk to my option text?
I have tried all DOCTYPE still not working.
The required notice belongs on the label of the select field, not the options. eg:
.required{color:#8B2942}
<label for="myselect"><span class="required">*</span> Title: </label>
<select id="myselect" name="myselect">
<option value="1">test1/option>
<option value="2">test2</option>
<option value="3">test3</option>
</select>