I have a simple website with a master-page. To set properties to elements on a content page (such as Textbox) I use CSS. In designer it works well but when I launch a site a style isn't apllied to controls. The reason is simple. To say, I have a TextBox with id="TextBox1" in content page, it is placed in ContentPlaceHolder1. In CSS file I set properties for object with id #TextBox1. When I launch a site due to master page name mangling it gets an id like ctl00_ContentPlaceHolder1_TextBox1 which is not defined in CSS file included in masterpage.
What is a correct solution of this problem? Hardcoding mangled name doesn't seem to be good.
Use CssClass on the controls, like this: CssClass="myClass", then in your stylesheet instead of this:
#TextBox1 { /* styles */ }
You'd have this:
.myClass { /* styles */ }
It's worth noting that .Net 4 fixes, or allows you to better manage the ID generated in the html, see here for details.
As Nick and SLaks have both said classes are best. You can assign multiple classes in the class property and it will aggregate all the properties from all the classes specified overwrite any of the properties that it shares with earlier classes. The order of the classes definition in the css file sets the order that they get applied.
<style type="text/css">
.genericTextBox
{
background-color: #eee;
color: black;
}
.textbox1
{
background-color: #3ee;
font-size: larger;
}
</style>
<asp:TextBox id="textBox1" CssClass="textbox1 genericTextBox" runat="server"></asp:TextBox>
The order the styles get applied is first genericTextBox, because its the first defined in the style (essentially the order in class gets ignored). It sets the color and the background-color, then the style textbox1 gets applied and it overwrites the background-color and adds font-size to. So in the end you end with the color from generictextbox, the background-color and font-size from textbox1.
EDIT: on the TextBox changed class to CssClass
The simplest solution is to apply your CSS rules using classnames (Which don't get mangled) instead of IDs.
The correct solution is to use the ClientID property, which returns the mangled ID.
For example:
.Something #<%=TextBox1.ClientID %>` {
color: red;
}
However, you can only do that for inline stylesheets.
Related
Given a typical Angular Material dialog, which has a max-width of 80vw set on .mat-dialog-container, how can I formulate a selector to override it? I'd like a true full-width dialog.
The problem is scoping--Angular-CLI compiles component CSS with scope attribute selectors.
Therefore, this:
.parent .child
becomes:
.parent[some_attr] .child[some_other_attr]
However, this particular element doesn't seem attached to any component--it doesn't have a dynamically-generated attribute on it.
I've attempted overrides in both the dialog stylesheet and the host component's stylesheet with no success.
Angular special selectors
Dialog Plunkr
Let me try again. I'm not doing a good job of explaining the issue.
Let's say I add this to my host component stylesheet:
.mat-dialog-container {
max-width: 100%;
}
I have a build watch running, so the app is recompiled. The CSS output is now this:
.mat-dialog-container[_ngcontent-c6] {
max-width: 100%;
}
However, that element doesn't actually have the attribute _ngcontent-c6 on it. That attribute is applied to other elements which are inside siblings of ancestors of .mat-dialog-container. The selector is just wrong.
If I add that CSS to the dialog component's stylesheet, something similar happens, but with a different attribute ID.
If you can add an id to your main body tag and you want it to be on all of these dialogs you can use this
<style>
#bodyID .mat-dialog-container {
max-width:100vw;
background-color: blue;
}
</style>
It will override the current style, at least in the plunker you supplied.
If you need specific style for each dialog, did you look into this?
how-to-style-child-components-from-parent-components-css-file
You don't need a body id, because as you've mentioned the selector is rewritten by Angular such that it stops matching the element altogether.
But yeah it seems the only way around this is to just throw your hands up and forget about component stylesheet scoping and add your CSS rule to the page stylesheet. The caveat, of course, is that this rule needs to be added to every page that uses the component, which can be seen as absurd depending on what your component is intended to be used for and by whom.
What are all the css style classes that has to be changed to restyle dojo filtering select ?
Note: I am using claro theme.
I want to
1.Set the style for one particular filteringselect with id QuickSearchPane_SelectBox
2.Set the style for all other filteringselect
I found a few like:
.claro .dijitTextBox .dijitInputInner
.claro .dijitInputField .dijitPlaceHolder
.claro .dijitSelect
But these are not giving the desired effect. I am not even able to change the background colors.
For Menu
[dijitpopupparent="QuickSearchPane_SelectBox"] > .dijitComboBoxMenu .dijitMenuItem
This seems to work.
You can use the following CSS class to start styling your dijit/form/FilteringSelect;
This example will style all instance of dijit/form/FilteringSelect:
https://jsfiddle.net/ofgcd24n/
.dijitInputInner {
background-color: green !important;
}
.dijitMenuItem {
background-color: orange;
}
This other example below will style only ONE instance of dijit/form/FilteringSelect, please note the use of Descendant combinator as selector (where you use the ID for your widget DOM):
#widget_stateSelect .dijitInputInner {
/* your style*/
}
Generally you can use (in Chrome Dev Tool) Event Listen Breakpoints for click/mouse down, so when you open you FilteringSelect, you can block execution, and check with the inspector its HTML structure and see additional CSS classes you want to override with your styles.
More about CSS selector:
https://www.w3.org/TR/css3-selectors/
If you need more details, please post your HTML and CSS and desired layout so we can work out a specific solution.
I am using Active Admin, is there a way to override CSS used by the active admin theme?
For eg:- I have to change css of submit button which is disabled to cursor: wait; and make it unclickable.
What's the best way to do this?
just make a new file
app/assets/stylesheets/active_admin.css.scss
and put your scss code there.
(Or just active_admin.css with css code)
You can override any CSS property by overriding the CSS class or IDs in you own stylesheet with !important attribute if you do not have any access to the original stylesheet
For example, use
.submit-button {
color: white !important;
}
to change the color of the submit button text.
It is easy to change the styles in Rails 4. Go to
app/assets/stylesheets/active_admin.css.scss
OR (depending upon where you have kept the file)
vendor/assets/stylesheets/active_admin.css.scss
and add styles in there.
I put my form classes in a container class to create a more specific reference. Like..
.form-container {
font-family: 'open-sans';
width: 420px;
.text-field-class {
input{border:none; border-bottom: 1px;}
}
}
this is working so far... for the most part. Better than important. Though maybe using an ID would be the more appropriate way.
I'm having trouble changing the font of the PasswordStrength control. I even tried creating a CSS class for it, like so:
.PassWordFont {
font-size:12px;
font-family:Verdana;
}
and then putting it in the markup like this
<asp:PasswordStrength ID="PasswordStrength1" runat="server"
TargetControlID="txtPassword1" DisplayPosition="RightSide"
StrengthIndicatorType="Text"
PreferredPasswordLength="15"
PrefixText="Strength:"
HelpStatusLabelID="lblLenIndicator"
TextStrengthDescriptions="Very Poor;Weak;Average;Strong;Excellent"
TextCssClass="PassWordFont"
StrengthStyles="PWSSVeryPoor; PWSSWeak; PWSSAverage; PWSSStrong; PWSSExcellent"
MinimumNumericCharacters="1"
MinimumSymbolCharacters="0"
RequiresUpperAndLowerCaseCharacters="false">
</asp:PasswordStrength>
What am I doing wrong?
Instead of TextCssClass, I have previously just used CssClass.
From FireBug check the css class that you have applied is loaded and having your mentioned font-size.
Verify the CSS class for that input is correct.
Also It might be the case your CSS is overridden from some where else.
Make sure your CSS is added last or after all default CSS are loaded.
Also try font-size:12px !important;
If I am assigning a paricular css class to a control ,it hnherits the class but if i simultaneously give the skin id to the same control then this skin ID overrides the CSS class.
Why this is happening?
Now if I am using !important in the css stylesheets then css class property is inherited by the control.
.lblUserName1
{
width: 400px;
line-height: 32px;
color: Red !important;
font-weight: bold;
background-color: #669999;
}
Please help me...Its creating a heap of confusion..
You should avoid using !important; were you can. Basically it is recommended that you use it only when you are overriding some pre-loaded styles that you can't really change.
ID is basically superior to class. Check the answer marked as correct here: CSS class priorities
Skin probably uses inline CSS in style attribute of your control this way due to CSS herarchy what you define in skin theme will override what you have defined in class which resides external .css file.
Best way to debug CSS and HTML is viewing the code itself.
There is another solution - Use StyelSheetTheme attribute. When applying your theme in the web.config or (page) file as Theme attribute:
<pages Theme="myTheme">
any local cssClass control will be overridden.
However:
<pages StyleSheetTheme="myTheme">
will be secondary meaning the control will keep its assigned cssClass attribute.
So, unfortunately you can't have both (it would have been nice), but you can at least make the theme the secondary choice instead of having the theme override local cssClass settings.