I have a really weird situation where my view is different depending on where I put the following CSS class. I only have one item that is connected to this class which is my md-progress-bar from Angular Materials 2. I want it to float underneath my tool bar which is fixed on the screen.
.floating-progress {
position: fixed;
top: 0px;
z-index: 1005;
}
When I put this inside app.component.css, I get the following result where the bar sits on the top of the tool bar.
However, when I change this css class to my global styles.css, I get a the actual result that I wanted
How come there is a different depending on where I put it?
Angular does style encapsulation for styles added components.
The components get attributes like _ng_context-xxx with unique xxx added.
The CSS selectors will be rewritten to match only these attributes, before the CSS is added to the DOM.
See also https://angular.io/docs/ts/latest/guide/component-styles.html
Related
I have a div element which has 3 classes:
<div class='captcha_article captcha_email captcha_register'></div>
How can I target the third class for example, without affecting the style of the other two classes in the div?
Also, if I were to have 4 classes, how to target the last one without using last-child property ? Would :nth-child apply here?
You misunderstand CSS.
You can add styles to the captcha_register class by doing this in your CSS file.
.captcha_register {
// Attributes go here
}
Depending on where this is placed in your CSS file will determine if any of the style attributes adding to the captcha_article and captcha_email classes will be affected.
For example:
.captcha_article {
height: 200px;
}
.captcha_register {
height: 100px; // This will override the height of 200px on the div
}
UPDATE
If each class is suppose to represent a different web page then adding them all to the same element might explain why you are seeing unexpected results. It might be better to combine the styles that appear in all classes into one reusable class, lets call it .page. Then on each page you use this you can modify it with another class, if it needs to be modified.
I'm making a few changes to a site and want to change the width of the container to go across the whole page. I'm a bit of a noob so not sure if I've don't it correctly, but want the width to be 3000px. I have the option of container id and container class. So basically what CSS do I put in which box?
The theme I am using is Porto by Spyropress. But looking for some CSS help:)
Thank you very much!!
In the CSS style page (or code) where you have the container, you should write the following line:
width:3000px;
The most straightforward answer would be to use the style="width: 3000px;" definition instead of the id or the class (even if it is not a really clean choice).
If you have no chance to add a style and you have called a CSS, you can do it by id or by class, depends on how often you will have Elements with 3000px width (single time go for id, multiple times go for class). In general classes and id link the parts in your CSS with your html definitions (named-links). They do not serve you with direct CSS, this is done by the style="" Element.
Some Code:
#some_id {
width: 3000px;
}
.some_class {
width: 3000px;
}
And some additional info about general css (because it is much more than just id's and classes if I think about the cascading part): http://www.cssbasics.com/
I am trying to do basic CSS with rally components. Currently I am working on getting an xtype 'rallybutton' to be inline with an xtype 'rallyiterationcombobox'. I am using a CSS file that successfully updates / changes other pieces of the app whose class name I have set manually, but the preset classes on the rally components seem to not be editable with my css file. I am using Chrome's debugger to look up the class names on each of these components - the rally button has multiple class names depending on where in the html you look: x-btn or x-btn-inner, the rallyiterationcombobox has these: x-form-text, x-form-trigger-wrap, x-form-item-body, and a few others.
I'm trying to use a CSS function that looks like this:
.[buttonClass], .[comboboxClass] {
display: inline;
}
with different combinations of names for classes referring to the button and combobox. [When I put the class names in, I do delete the brackets]. Any help would be appreciated in showing where I'm going wrong!
It turns out that the two components I was using, rallyiterationcombobox and rallybutton, were placed into two different containers in my app. Ext does some magic behind the scenes trying to place each component in their own section of the page, so trying to put them inline with each other was causing problems. To fix the situation, we put both components into the same container and formatted from there. Inside each component definition we used the following code
cls: 'className'
to create a class named 'className' which can then be referred to within the css file. Inside the css file we used the code
.className1 {
float: left;
display: inline;
}
.className2 {
float: left;
display: inline;
margin-left: 10px;
}
to set each component in the same line [horizontally], with both components aligned on the left of the app and the component with 'className2' 10 pixels to the right of the component with 'className1'.
I'm new to Dojo and CSS, so maybe I'm missing something obvious here.
I have a page with several Dijit buttons that are created programmatically, and I want to make one of them bigger- leave the text alone and increase the space between the text and the edge of the button. I don't want to override the CSS for .dijiButtonNode to do so because there are other Dijit buttons the page that shouldn't be altered.
I tried adding this to the widget declaration:
style: { padding: "1em" }
and this:
class: "PaddedButton"
.PaddedButton
{
padding: 1em;
}
but since Dijit buttons are rendered as nested spans it padded the area around the button instead.
The best way to work with CSS is using one of the browser debugging tools (that you should already be using) like Firebug or the Chrome developer tools. You can find an element's DOM node easily with inspect_element and then directly edit its CSS styles until they do what you want. You can also see what CSS rules are active and what are being ignored or overwritten.
I have come up with a working example here:
http://jsfiddle.net/missingno/FrYdx/2/
The important part is the following CSS selector:
.paddedButton.dijitButton .dijitButtonNode {
padding: 1em;
}
This selects any node with class dijitButtonNode that descends from a node that has both of the paddedButton and dijitButton classes. I couldn't do just a .paddedButton .dijitButtonNode because then the rule would end up being cascaded by a more specific selector.
I have two css files:
A main file (main.css)
A specific page file (page5.css). My page.css contains main.css (#import url(main.css));)
My main.css has this as one part of it that sets the height of the page
#content {
background:url(../images/image.png) no-repeat;
width:154px;
height:356px;
clear:both;
}
This works fine for all the other pages, but at page 5, I need a little bit more height.
How would I go about doing it?
You don't even need a separate CSS file necessarily. You can add classes to your body for various purposes, identifying page or page type being one of them. So if you had:
<body class="page5">
Then in your CSS you could apply:
.page5 #content {
height: XXXpx;
}
And it would only apply to that page as long as it occurs after your main #content definition.
Just re-define it somewhere after your #import directive:
#content { height: 456px }
for identical CSS selectors, the latter rule overwrites the former.
In page5.css, simply re-define the height.
page5.css
#content {
height:400px;
}
The other answers did not help me on a more complex page.
Let's suppose you want something different on page X.
On your page X, create a class at the body tag (body class="myclass").
Open the Developer tools (I use chrome) and select the item to be modified. Let's say it's a link ( a.class - 'class' is your class name of your anchor, so change it accordingly). The browser will give something rather generic that works on the developer tool - but messes up in real life.
Check the parent of the modified field.
Add the HTML tag to your developer tool as testing
f your new CSS path does not grey out, you are good. If it greys out, your selected path still needs fixing.
Let's suppose that the parent is a div with a class 'parent'. Add this path "div.parent >" to the already chrome selected a.class
The symbol > means you are going up on the tree.
You can keep going backward on the DOM all the way to body.myclass, or you may not need. There is no need to add the classes for the parents, but you can add them if there are great similarities on your pages.
This works for me.