style:
.airport-selections {
margin-top: 10px;
.airport-input {
width: 200px;
}
}
html:
<div class="airport-selections">
<label class="airport-label" for="airport-from">
Departure:
</label>
<input type="text" class="airport-input">
</div>
If I don't nest them, the width of the input is set to 200. This also happens with all of the styles on the page.
Your CSS is invalid, there is no such thing as nesting in CSS. Only Less or Sass, but you have a long way until then.
If you want to select elements from inside others, use
.father .child{
yourstyle
}
All elements with class child from inside all elements with class father will get the style applied to them.
.airport-selections {
margin-top: 10px;
}
.airport-input {
width: 200px;
}
/*or
.airport-selections .airport-input {
width: 200px;
}
*/
<div class="airport-selections">
<label class="airport-label" for="airport-from">Departure:</label>
<input type="text" class="airport-input">
</div>
Without a CSS precompiler, there's no such thing as nested CSS styles.
Check out SASS, or LESS for nesting and other options. But what you have there doesn't do what you think it does.
Related
I created a autocomplete child component that I am using in parent. In parent when try to apply the validation using Bootstrap form-control it's not getting applied to this child component - which is an input box with a list, although it's getting applied to other controls which are not child.
Child component HTML:
<div class="searching">
<input type="text" class="form-control" (input)="getFilteredData(inputBox.value);" class="form-control" [formControl]="inputBox">
<div id="search" tabindex="0" >
<ul class="suggestionList">
<li *ngFor="let result of filteredResults | async" (click)="onUserSelected(result)" >{{result[displayField1]}} | {{result[displayField2]}} {{result[displayField3]}}</li>
</ul>
</div>
</div>
Parent component:
<app-auto-complete formControlName="requestorId"
[ngClass]="{ 'is-invalid': submitted &&
requestorId.errors }"></app-auto-complete>
<div *ngIf="submitted && f.requestorId.errors" class="invalid-feedback">
<div *ngIf="f.requestorId.errors.required">Requestor ID is required</div>
</div>
Child CSS:
.searching {
width: inherit;
position: relative;
}
.searching input {
margin: 0;
padding: 0;
width: 100%;
height: 30px;
}
.suggestionList {
background-color: #fff;
width: 100%;
position: absolute;
padding: 0;
left: 0;
z-index: 1000;
}
.suggestionList li {
list-style-type: none;
border: 1px solid #c5c5c5;
cursor: pointer;
left: 0;
font-family: Arial,Helvetica,sans-serif;
font-size: 1em;
text-align: left;
}
I have several workaraounds in mind, so I hope any helps.
As mentioned in the comments, add in your parent component decorator the property 'encapsulation' (same level as 'selector' and such) with ViewEncapsulation.None.
Be aware that this approach makes styles of the parent component penetrate the whole app, so be wary with doing this unless you have the parent selector be really specific such as .my-specific-parent-selector-which-isnt-gonna-be-repeated
use #Input property on child component to pass the validation boolean, and apply the class directly according to the Input passed.
add a .parent-selector .is-invalid selector to parent, and then add behind it a ::ng-deep .parent-selector .is-invalid making that specific styling penetrate child classes. Be wary that this approach is deprecated though, so it might stop working in the future (although unlikely)
Note:
also note that you are applying the is-invalid class to a selector.. if you inspect with chrome web browser you will see that this selector usually is a different element that where you try to add your class... so maybe your best approach is using inputs
I've currently got a few buttons with the .continue class on a webpage, structured with the following code:
<div class="continue" data-section="1">
Continue
<i class="fas fa-arrow-right" id="continueArrow1"></i>
</div>
Each of the continue buttons have a different "data-section" values, and are also placed against different backgrounds on the webpage. I'm wondering if there is a way I am able to target one of these continue button divs that have a certain data-section value, and change the styling of those who match.
Something like:
.continue:data-section=1{
//css that styles button with data-section1
}
.continue:data-section=2{
//css that styles button with data-section2
}
Obviously I could always just give them different IDs, but that leads to a lot of code duplication for the JS and JQuery animations.
Use the attribute selector:
.continue[data-section="1"] {
...
}
Example:
div {
width: 100px;
height: 100px;
background: blue;
display: inline-block;
margin: 5px;
}
.continue[data-section="2"] {
background: red;
}
/*We can combine this selector with other selectors as we normally would:*/
.continue[data-section="2"]:hover {
background: yellow;
}
<div class="continue" data-section="1"></div>
<div class="continue" data-section="2"></div>
<div class="continue" data-section="3"></div>
<div class="continue" data-section="4"></div>
<div class="continue" data-section="5"></div>
Read more on MDN
Trying to select all labels inside an element except labels inside one child div. Tried two approaches but nothing seems to be working
.parentDiv *:not(.skipLabelsParent) label {
display: inline-block;
margin-bottom: 12px;
}
This is failing because * selects all parents including child elements of skipLabelsParent class and parents of labels inside.
.parentDiv label:not(.skipLabelsParent label) {
display: inline-block;
margin-bottom: 12px;
}
I am not sure why this is failing.
Any solutions other than this?
fiddle here
The fiddle contains just an example of situation. Don't take that as final case. Labels could be anywhere and at any level. I just want to
skip inside every skipLabelsParent class. I made that very clear in my
question. Please read question again and provide generic solution.
Else I will look for other approach.
I think the easiest way to do what you want, is to do some intelligent re-styling of the labels you want to skip with a good selector:
.parentDiv .skipLabels{/*your css here*/)
and style the child div with that selector. This would be the least amount of work.
Next, depending on how many labels we're talking about, is to add the class directly to the labels you want to skip so that the following code would skip the <label>'s with the class .skipLabels:
.parentDiv label:not(.skipLabels) {
display: inline-block;
margin-bottom: 12px;
}
If that isn't gong to work for you, then I think you should just override the the child div's styling right under the parent divs:
.parentDiv{
display: inline-block;
margin-bottom: 12px;
}
.skipLabels{
display: .....;
margin-bottom: ....;
}
This way, you can put the .skipLabels class anywhere and you will know the styling will take effect like you want.
I believe that it is not working because you cannot chain selectors in :not yet http://caniuse.com/#search=%3Anot
https://developer.mozilla.org/en/docs/Web/CSS/:not
Currently you can only use “simple selectors”
https://drafts.csswg.org/selectors-3/#simple-selectors
This works for example:
HTML:
<div class="parentDiv">
<label>Pnoe</label>
<div>
<label class="skip">Pnoe</label>
<label class="skip">Pnoe</label>
<div>
<label class="skip">Pnoe</label>
</div>
</div>
</div>
CSS:
.parentDiv label:not(.skip) {
color: red;
}
https://jsfiddle.net/gjaozryL/19/
Whereas this selector breaks all together:
HTML:
<label>Pnoe</label>
<div class="parentDiv">
<label>Pnoe</label>
<div>
<label class="skip">Pnoe</label>
<label class="skip">Pnoe</label>
<div>
<label class="skip">Pnoe</label>
</div>
</div>
</div>
CSS:
label:not(.parentDiv .skip) {
color: red;
}
https://jsfiddle.net/gjaozryL/20/
In your CSS you can define
.parentDiv > label{
color: red;
}
Thanks to the ">"-operator, only elements that are direct children of the element before are selected. In your case only the first label "Pnoe".
Given this nested div/label fragment:
div:not(.skipme) > label {
color: red;
}
<div class="parentDiv">
<label>Pnoe</label>
<div>
<label>Pnoe</label>
<label>Pnoe</label>
<div>
<label>Nested Phoe</label>
</div>
</div>
<div class="skipme">
<label>skip me</label>
</div>
<div class="somediv">
<label>Phoe</label>
<div class="another-div">
<label>Phoe</label>
</div>
</div>
</div>
I'm trying to build a search form using Bootstrap. Here's the HTML:
<form class="form-search search-bar">
<div class="input-append">
<input type="text" class="search-query" placeholder="Enter your address here...">
<button type="submit" class="btn btn-primary">
Search <i class="icon-search icon-white"></i></button>
</div>
</form>
I'm new to CSS - how do I style this so that the search elements are horizontally centered across the block? Also, how do I increase the height of the search elements?
You should add an ID
.search-bar {
text-align: center; /* centers inline and inline-block children */
}
.search-bar .search-query,
.search-bar .btn-primary {
display: inline-block; /* allows for heights to be set */
}
.search-bar .search-query {
height: 30px;
}
.search-bar .btn-primary {
height: 40px;
}
to place them next to eachother you can use the float command
.search-query {
float:left;
}
.btn-primary {
float:left;
}
Make sure the width of input-append is large enough to place them next to eachother.
to increase there height just place height:[amount]; in the same block as float in the CSS
I don't have experience as a web designer, but in effort to learn more about CSS, I'm doing the stylesheet for my own page. I am aware the way I'm doing it now probably sucks, is not the recommended way, but please help me understand why this isn't working.
I have this form:
<form action="/register" method="POST" id="registration_form">
<p>
<label for="username">Username</label>
<input type="text" id="username" name="username"/>
</p>
<p>
<label for="password">Password</label>
<input type="password" id="password" name="password"/>
</p>
</form>
I have included Eric Meyer's CSS reset, before including my own stylesheet, and I have this rule in my CSS:
#registration_form label {
width: 100px;
}
I also tried to put:
label {
width:100px;
}
I tried changing the value to more than 100px, but still it doesn't get applied. If it helps, I have a layout, which contains something like this:
<body>
<div id="navigation">
...
</div>
<div id="pagebox">
{% block body %}{% endblock %}
</div>
</body>
This is a jinja2 template, and the content of body is added by some different view, when it's rendered. Here are the styles for these id's:
#navigation {
text-align:center;
}
#navigation ul li {
display:inline;
margin-left:50px;
}
#pagebox {
margin-left:50px;
margin-right:50px;
height:600px;
background-color: #20f000;
}
Why isn't my label style getting applied?
I believe that <label> has the display:inline by default, so width and height do not affect it. Try adding display: inline-block to it.
Added: As member Geoff Adams noted in the comments, there are some browser compatibility issues with display: inline-block. In this specific scenarion it should work, but see here for more information.
The label element is an inline element, so the width style doesn't apply to it.
You could make the label and input element float inside the p elements. Applying overflow to the p element makes it work as a container for the floating elements:
#registration_form p {
overflow: hidden;
}
#registration_form p label {
float: left;
width: 100px;
}
#registration_form p input {
float: left;
}