I've got basic css problem.
I want to add display: none; property to input-group_details element in my div class="textAdd".
divs from the console:
<div class="textAdd input-group input-group--text-field input-group--single-line
input-group--multi-line input-group--full-width primary--text">
<label>Dodaj własne</label>
<div class="input-group__input">
<textarea tabindex="0" aria-label="Dodaj własne" rows="5"></textarea>
</div>
<div class="input-group__details">
<!---->
</div>
</div>
When I write sth like:
.input-group__details{
display: none;
}
It works, but I want address only the element in my textAdd class. I cannot simply add new class to my <div class="input-group__details"> because it's actively rendered by the framework.
I think this is what you are expecting
.textAdd .input-group__details {
display: none;
}
<div class="textAdd input-group input-group--text-field input-group--single-line
input-group--multi-line input-group--full-width primary--text">
<label>Dodaj własne</label>
<div class="input-group__input">
<textarea tabindex="0" aria-label="Dodaj własne" rows="5"></textarea>
</div>
<div class="input-group__details">
This is hidden .... Some text here
</div>
</div>
<div class="input-group__details">
This is not hidden ... Some text here
</div>
Related
The CSS worked perfectly fine with the old HTML, but i have to change to the new HTML (nested checkbox.
I cannot figure out how to change my CSS to make that happen.
/*Old CSS:*/
.cl1 .clChk:checked ~ .cl2 {
opacity: 1;
height: auto;
}
<!--OLD HTML-->
<div class="cl1">
<label class="clLabel" for="chk_1">some text</label>
<input class="clChk" type="checkbox" id="chk_1">
<article class="cl2">
..some text..
</article>
</div>
<!--NEW HTML-->
<div class="cl1">
<label class="clLabel"><input class="clChk" type="checkbox">Some text</label>
<article class="cl2">
..some text..
</article>
</div
I have tried many variations, but i cannot seem to get it to work; so if the checkbox isn't nested in the label, there is no issue, but i need the checkbox nested in the .
Thank you so much for your help!
deduijk! You miss the dot at the begning on cl1Chk element.
.cl1 clChk:checked {
}
to
.cl1 .clChk:checked
I send an email to outlook 2010 client.
Here is the code:
<div class="content">
<div class="lorem">AAA</div>
<div class="ipsum">BBB</div>
<div class="dolor">CCC</div>
<div class="lorem">This div has to be hidden</div>
<div class="ipsum">BBB</div>
<div class="dolor">CCC</div>
<div class="lorem">This div has to be hidden</div>
<div class="ipsum">BBB</div>
<div class="dolor">CCC</div>
</div>
How to hide all "lorem" class except the first one ? I already tried ".content > div:first-class" but it doesn't work
You can do it like this:
.content .lorem:not(:first-child) {
display: none;
}
I'm trying to create a form with Angular2 Material and bootstrap grid,
my HTML looks like this:
<div class="row">
<div class="col-md-6 marign-top-10 margin-bottom-10">
<md-input-container class="full-width">
<input
mdInput
type="text"
formControlName="postal"
placeholder="Postal">
</md-input-container>
</div>
<div class="col-md-6 marign-top-10 margin-bottom-10">
<div class="full-width">
<md-select class="full-width" placeholder="Country" formControlName="country_id">
<md-option *ngFor="let country of countries" value="{{country.id}}">{{ country.name }}</md-option>
</md-select>
</div>
</div>
</div>
my full-width css class just set width:100%.
the problem is that the inputs are not in the same line as it should be
here is a few screenshots:(my application is right to left language so ignore the text direction )
it is a css problem you can add this to your component stylesheet:
.mat-select{
margin-top:10px;
}
Play with the value maybe is greater than 10 or lower
It a problem with md-select styles, I had trouble in project too, so my solution is:
CSS
md-select {
min-height: 30px; // or any value that equal md-input-container>input height
}
JSFiddle example
I have this html code:
<div class="form-group well">
<p>...</p>
<hr>
<div class="select-skill">
...
</div>
<div class="select-skill">
...
</div>
<div class="select-skill">
...
</div>
<div class="select-skill">
...
</div>
</div>
And i want to set a style using css3 to second child that has select-skill class, but i cant use .select-skill:nth-child(2), It doesn't work.
I know the solution is to remove <p>...</p><h1> or move select-skill to a new parent.
Is there any solution to select this element without adding any code of html?
JSFiddle
You can use this:
.select-skill:nth-of-type(2){
background:red;
}
Or if there are more in different div's, you can do:
.form-group .select-skill:nth-of-type(2){
/*styles*/
}
instead.
I have a parent element that has Bootstrap 3's .row CSS class. Within this element are two child elements (each with a Bootstrap column class), one of which has a varying height depending on the data populating it. In the design I'm working with, the elements in this row need to be anchored to the bottom of the parent element.
The kicker (as the title and use of bootstrap suggests) is that this needs to be responsive. Thus absolute positioning of the child elements with bottom: 0px; is not an option.
Here's the current structure of the html:
<div class="row r4">
<div class="col-md-2">
<div class="bottom">
<div data-bind="text: description()"></div>
<span data-bind="text: metric()"></span>
</div>
</div>
<div class="col-md-8">
<div class="bottom">
<div data-bind="foreach: keyLabels()">
<div class="key-color">
<div data-bind="attr: {class: color + ' color-value'}"></div>
<div data-bind="text: label"></div>
</div>
</div>
</div>
</div>
</div>
I've done some research and haven't found a reliable method of solving this using a pure HTML/CSS solution.
I can think of a number of fairly straight-forward (albeit hacky) ways to solve this with JS, but for now I'd like to avoid that with possible.
Any ideas?
Here's a simplified version of your markup that helps more easily reproduce the issue:
<div class="row">
<div class="col-xs-2 pull-bottom"
style="height:100px;background:blue">
</div>
<div class="col-xs-8 pull-bottom"
style="height:50px;background:yellow">
</div>
</div>
So how do we vertically align each column to the bottom? See vertical-align with bootstrap 3:
.pull-bottom {
display: inline-block;
vertical-align: bottom;
float: none;
}
Working Demo in jsFiddle