So I am building a website using Angular.
I then have some code that looks something like this:
<div class="main">
<div class="container">
<app-name>
<div class="app-child-div"></div>
</app-name>
</div>
</div>
And I am told that the app-name name can actually change when deployed. So I am not entirely sure that the name will remain the same. However, using SCSS, how can I target the app-child-div with CSS ?
Right now I am doing something like this:
.main {
.container {
app-step-0 {
.app-child-div {
background: green;
}
}
}
}
But that doesn't seem to do the trick. So is there anything I can do?
Add some attribute (e.g. class) that will identify your element.
E.g. add class for it:
<div class="main">
<div class="container">
<app-name class="app-name-wrapper">
<div class="app-child-div"></div>
</app-name>
</div>
</div>
Then use this .app-name-wrapper in CSS
Related
I want to change the color of an accordion depending on status on the current item in the list.
I want to use something like ng-class="{status: item.status}" (where I have testClass: true)
The problem now is that I can't set the color of the whole accordion heading.
<accordion>
<accordion-group ng-repeat="item in items" class="animate-repeat" is-open="status.open">
<accordion-heading>
<div ng-class="{testClass: true}">
<p>Test</p>
</div>
</accordion-heading>
<div class="row">
<div class="col-sm-12 col-xs-12">
<div class="text-content font-size-14">{{item.text}}</div>
</div>
</div>
</div>
</accordion-group>
</accordion>
CSS
.testClass {
background-color: burlywood;
}
Any idea how to solve this?
I found similar problem here, but the solution didn't work for me
https://github.com/angular-ui/bootstrap/issues/3038
fiddle:
http://jsfiddle.net/f8ce1b0w/2/
Apply the class to the 'accordion-group' and then style with css.
HTML
<accordion-group ng-controller='MyAccordionGroupController' class="test" is-open="isopen">
CSS
.panel {
&.test {
& > .panel-heading {
background-color: red;
}
}
}
http://jsfiddle.net/BramG/f8ce1b0w/8/
You'll want to move the applied class higher in the hierarchy:
http://jsfiddle.net/f8ce1b0w/7/
Then your css will look like :
.panel-warning .panel-heading {
//customize your css here
}
The problem is you are placing the test-item inside an item with padding. Instead, place the test-item-class higher up, and then use css to target the items.
If your states will match to Bootstrap states, then you may want the validation class names from here: https://getbootstrap.com/docs/4.0/migration/#panels
(panel-success, panel-info, panel-warning, panel-danger)
These class names are already in your Bootstrap css.
This is the solution to your problem
.test{
background-color: red;
}
.test-parent.panel-default > .panel-heading {
background-color:red;
}
<accordion-group ng-controller='MyAccordionGroupController' is-open="isopen" class="test-parent">
<accordion-heading>
<div class="test">
I can have markup, too!
</div>
</accordion-heading>
This is just some content to illustrate fancy headings.
</accordion-group>
I want to display .tel in #header only if it's exists in #switcher.
The basic situation:
<div id="switcher"><div class="tel"></div></div>
<div id="header"><div class="tel"></div></div>
But user in system can turn off displaying .tel in #switcher. After that the code is something like this:
<div id="switcher"></div>
<div id="header"><div class="tel"></div></div>
In that situation I want to hide .tel in #header .
I know how to do it with jquery, but can I do it just with css or scss ?
This solution depends on where <div id=switcher> needs to appear on the page, but... if you're crafty, you can re-order your markup something like this:
<header>
<div id="switcher">
<div class="tel"></div>
</div>
<div class="tel"></div>
</header>
and then use the following style rules:
header .tel {
display: none;
}
header #switcher .tel,
header #switcher ~ .tel {
display:block;
}
I wrote the following CSS:
MyForm.css
.my-container [class^="col-md"] {
.my-inner {
padding : 10 px;
background-color: #eee;
.... etc...
}
If i use it in my code:
<div class="container my-container">
<div class="col-md-4" id="divTabPortfolios">
<div class="my-inner">
</div>
</div>
<div class="col-md-4" id="divTab">
<div class="my-inner">
</div>
</div>
</div>
It doesn't work. If I delete the subclass .my-inner it works properly.
Is it really possibe to use the subclass that way?
I would have done something like:
.my-container [class^="col-md"] .my-inner {
padding : 10 px;
background-color: #eee;
.... etc...
}
...depending of what you try to acheve.
Based on the markup, it looks like you're trying to use a preprocessor like LESS or SASS. The reason the CSS isn't outputting correctly is because you didn't close .my-inner.
If you're using a preprocessor, it should look like this:
.my-container [class^="col-md"] {
.my-inner {
padding : 10 px;
background-color: #eee;
.... etc...
} <-- forgot this closing tag
}
If you're using plain CSS, see Fredric's answer.
Please change your html code to this
HTML
<div class="container my-container">
<div class="col-md-4" id="divTabPortfolios">
<div class="my-inner">
</div>
</div>
<div class="col-md-4" id="divTab">
<div class="my-inner">
</div>
</div>
</div>
You missed the double quotes , maybe this is causing problem in your html code and also check this for css code.
CSS
.my-container [class^="col-md"]
.my-inner
{
padding : 10 px;
background-color: #eee;
.... etc...
}
Are removing subclass .my-inner from MyForm.css or the HTML page?
As Dead has said, you stylesheet must be after bootstrap's, so I
ask, is that in the correct order?
If you inspect your page in
the browser, can you see your custom properties there?
Try to write you .my-inner class directly (removing .my-container [class^="col-md"]).
If none of that work, try to post more details about.
I have this HTML:
<div class="row-fluid list-item-main-euvou-entradas">
<div class="span1 list-item-main-euvou-entradas-colorcode green"></div>
<div class="span1 list-item-main-euvou-entradas-rank">1</div>
<div class="span1 list-item-main-euvou-entradas-votes">Votos</div>
<div class="span9 list-item-main-euvou-entradas-content">
some link
<p>some text...<p>
</div>
</div>
I need to select this class "span1 list-item-main-euvou-entradas-colorcode green" using also this classes in the selector "row-fluid list-item-main-euvou-entradas".
Ive tried something like this, but does not work:
.row-fluid .list-item-main-euvou-entradas .span1 .list-item-main-euvou-entradas-colorcode .green {
some css code;
}
Any clue on this one?
Best Regards,
You need to remove the spaces between the class:
.row-fluid.list-item-main-euvou-entradas .span1.list-item-main-euvou-entradas-colorcode.green {
some css code;
}
so for the parent div (2 classes)
.row-fluid.list-item-main-euvou-entradas
and the child (3 classes)
.span1.list-item-main-euvou-entradas-colorcode.green
you can try this:
CSS CODE
div.row-fluid.list-item-main-euvou-entradas div.span1.list-item-main-euvou-entradas-colorcode.green {
/*some css code*/
color:red;
}
I'm using Bootstrap to set up my site layout and have something like:
<div class="row-fluid">
<div class="span3">
</div>
<div class="span9">
</div>
</div>
That works fine. However, I'm slightly bothered by the fact that this is defining the presentation in the markup and to make it easier to make future changes, I'd like to add another layer of indirection. I'd like to add my own class that defines the semantics and then include the Bootstrap class that defines the layout presentation. For example:
<div class="main-block">
<div class="side-bar">
</div>
<div class="content-area">
</div>
</div>
and my corresponding less file...
#import "twitter/bootstrap";
.main-block { .row-fluid }
.side-bar { .span3 }
.content-area { .span9 }
The less documentation states that you can "embed all the properties of a class into another class by simply including the class name as one of its properties" so it looks like it should work, but I am getting an error:
.row-fluid is undefined
Is there something that I am missing? Or is there a better way to go about this? This is in a rails 3.2 project using the less-rails-bootstrap gem if that makes any difference.
It's a little bit more complicated. What you're referring to is essentially what "mixins" are all about. First, let's resolve the error. From the little I see my bet is that you are trying to compile a "custom".less file and that you did not #import the variables.less and mixins.less files at the top of the page. Is that correct? If so, see if that gets the code to compile as expected.
However, once you get the code to compile you'll see that you have a new problem. In this particular case, by attempting to use a name other than .span you will lose any styling that is applied by the attribute selectors in the grid mixin, namely [class*="span"]. Compiled, it looks like this:
[class*="span"] { float: left; margin-left: 20px; }
.row-fluid [class*="span"] {}
.row-fluid [class*="span"]:first-child { margin-left: 0; }
So in this case the attribute selectors apply their styles to any class that starts with "span".
Here are a couple of options that might be better for you:
1) Adding the word "span" before your custom class names should work
<div class="row main-block">
<div class="span-side-bar">
</div>
<div class="span-content-area">
</div>
</div>
2) And using multiple classes will work, but only if you don't apply any styling to the custom classes that would negate any styles in the native grid classes:
<div class="row main-block">
<div class="span3 side-bar">
</div>
<div class="span9 content-area">
</div>
</div>
3) My recommendation is to live with the little bit of extra markup required to maintain the default Bootstrap grid system. Renaming sounds great now, but if you have any desire to merge in future updates, the one mixin I'd leave alone is the grid.
<div class="row">
<div class="span3">
<div class="side-bar">
</div>
</div>
<div class="span9">
<div class="content-area">
</div>
</div>
</div>