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.
Related
I'm trying out an angular application where user can select themes from a dropdown and change the appearance of the application using this tutorial
I'm using :host-context
But the themes is not loading and i'm not sure what is wrong in it.
Below is the code
app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div [ngClass]="theme">
<nav class="navbar fixed-top navbar-light justify-content-center headerColor">
<a class="navbar-brand" href="#">Socxo Themes</a>
</nav>
<div class="content">
<div class="row topClass">
<div class="col">
<select name="seletTheme" [(ngModel)]="theme" (change)="setTheme(theme)">
<option value="default">Default</option>
<option value="one">Theme 1</option>
<option value="two">Theme 2</option>
</select>
</div>
</div>
</div>
</div>
app.component.ts
export class AppComponent {
title = 'app';
theme = "default";
setTheme(themeName:string)
{
this.theme=themeName;
}
}
I'm first trying to themes the navbar
below is the app.component.css
#import "./app.component.1.css";
#import "./app.component.2.css";
#import "./app.component.3.css";
.content{
margin-top:55px;
text-align: center;
}
.topClass{
margin-top:70px;
}
.headerColor{
border:1px solid;
}
In ./app.component.1,2,3.css i have added the css for themes as below
:host-context(.one).headerColor{
background-color: chocolate;
}
:host-context(.two).headerColor{
background-color: chocolate;
}
:host-context(.default).headerColor{
background-color: chocolate;
}
on selecting a option from select the theme variable value changes but the corresponding class doesn't load
Can anybody guide me..
Use of :host-context() is to apply styles to outside host elements. According to the documentation:
:host-context() selector looks for a CSS class in any ancestor of the component host element, up to the document root
In your case you are trying to apply a style to an element inside the same component. You can do this by doing the following,
Create a nav component and move your nav bar code to that.
Put your theme styles of nav component inside that component's style sheet
`#import "../app.component.1.css";
#import "../app.component.1.css";
#import "../app.component.2.css";`
Change your appComponent.html like following,
<div [ngClass]="theme">
<nav-comp></nav-comp>
<div class="content">
<div class="row topClass">
<div class="col">
<select name="seletTheme" [(ngModel)]="theme" (change)="setTheme(theme)">
<option value="default">Default</option>
<option value="one">Theme 1</option>
<option value="two">Theme 2</option>
</select>
</div>
</div>
</div>
</div>
now your code will work with :host-context(), but remember the space after the function otherwise it won't work :host-context(.one) .headerColor. You don't have a space after your function in the above code.
If you only want to change the color of the nav bar by this, you can simply change all your theme style sheets like following,
.one .headerColor{
background-color: chocolate;
}
.two .headerColor{
background-color: chocolate;
}
.default .headerColor{
background-color: chocolate;
}
The solution to your problem is below:
Steps:
Add data member to the class:
classNames="default";
Add the host in the component decorator as below:
#Component({
//Here you need to add host after template property
host:{
'[class]' : 'classNames'
}
})
After that change your setTheme function to as below:
setTheme(themeName:string)
{
//here changing the host (classNames) dynamically
this.classNames=themeName;
this.theme=themeName;
}
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)
currently I have to different DOM struct like following:
the struct after browser translate is
No.1
<div class="input-group">
<span class="input-control">zzz</span>
<select class="form-control form-control single loading"></select>
<div class="selectize-control">
<div class="selectize-input items has-options full has-items"></div>
<div class="selectize-dropdown form-control single"></div>
</div>
</div>
No.2
<div class="input-group">
<select class="form-control form-control single loading"></select>
<div class="selectize-control">
<div class="selectize-input items has-options full has-items"></div>
<div class="selectize-dropdown form-control single"></div>
</div>
<span class="input-control">zzz</span>
</div>
I would like to set No.1 .selectize-input a new style
border-bottom-left-radius:0px;
border-top-left-radius:0px;
and set No.2 .selectize-input a new style
border-bottom-right-radius:0px;
border-top-right-radius:0px;
How can I make it?
Thanks
Since span and selectized are siblings, you can use the sibling selector. And set a base style for the oposite occurence, that will be overwritten if needed:
.input-group span {
background-color:red;
}
.input-group .selectized ~ span {
background-color:green;
}
fiddle
.input-group > .input-group-addon ~ div.selectize-control > .selectize-input {
..
}
.input-group > div.selectize-control > .selectize-input {
..
}
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.
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