Is there any way I can assign a css class to a table cell merely based on its header attribute?
The code is generated dynamically through a CMS so it's a little difficult to change, and it basically looks like this:
<td headers="blue">
How can I assign the style below to the td?
{
background-color: #1374bf;
}
You can use the css attribute selector.
td[headers="blue"]{
background-color: #1374bf;
}
Related
I have two base CSS classes:
.smpb_color_gray {
color:#cccccc;
}
.smpb_font_size_18 {
font-size:18pt;
}
I wonder if it's possible to create one class which will contains both these classes? With name .smpb_my_combine_class and it must have color:#cccccc and fontSize:18pt.
I want to create one class and then use them on other classes.
Like I want to create:
.smpb_base_border_width{
border-width:1;
}
And then I want to create a class for other control, I want to just include this class, but not create a new class. It's needed if I want to change the default width in future.
If I make a change in the base, then I need that change in all classes.
In regards to JavaFX2, in the .root element you can define a property, such as -smpb-color-gray:#cccccc; and then reference that within another css class.
.root {
-smpb-color-gray: #cccccc;
-smpb-font-size: 18pt;
}
.smpb_my_combine_class {
-fx-text-fill: -smpb-color-gray;
-fx-font: -smpb-font-size;
}
I used -fx-text-fill because I didn't know exactly what you were trying to color.
Does that fit into your criteria?
try this
.smpb_font_size_18,.smpb_color_gray{
color:#cccccc;
font-size:18pt;
}
You can assign multiple classes to one html element like this
<div class="border black"></div>
but you cannot combine multiple classes in one as far as I know.
I haven't really looked into it much, but I think SASS might be able to do what you want.
If you mean using it like this:
.myclass {
.testclass;
}
than the answer is no unless you look into something like LESS.
It is:
.smpb_font_size_18,.smpb_color_gray{
/*whatever style for both*/
}
Basically, what you are asking is what Cascading Style Sheets are all about... Grouping Elements with the same top-level Classes or Ids together. The only thing you would have to do is to create your .smpb_my_combine_class and define the values like this:
.smpb_my_combine_class{
color:#cccccc;
font-size:18pt;
}
And then define your sub classes to replace the top-level class value with the default value like this:
.smpb_my_combine_class .smpb_color_gray{
font-size: medium; //The default value for font-size according to W3C
}
.smpb_my_combine_class .smpb_font_size_18{
color: black; //The default value of your Page font color?
}
So your .smpb_my_combine_class-classed elements will have those default values, as well as each class based on it. But keep in mind that this will only work if your subclass element is contained within an element of the .smpb_my_combine_class-class
I have <select multiple="multiple">..</select> select and I also have select{heigth: 30px;} in some stylesheet that I cannot edit. Now my multiple select have 1-row heigth - "size" attribute cannot be applied. How can I solve the problem?
I like the clean solution.
select[multiple] {
height: 100px;
}
Well, first off - I'm assuming that you're using the height property, not the misspelled heigth property. There's two ways you could solve this.
The first (which I don't recommend) is by simply appending the style to the HTML element, like below:
<select multiple="multiple" style="height:100px">..</select>
Or, instead, my suggestion would be making a second style sheet, that uses the following property, including the "!important", which follows the attribute value:
select {
height: 100px !important;
}
Doing it like such will override the original style, and replace it. This isn't the only method that you can use to override it - you can read here on CSS specificity.
I think the right way should be adding a class to the specific <select> and giving it the right size, like:
<select multiple="multiple" class="multiple">
select.multiple {
height: 100px;
}
I am stuck with this problem so any help would be appreciated. I have a table with several rows. Each cell within the row belongs to a certain class. I use these class names to colour the cells.
Here is one example row from my table:
<tr>
<td class = "summarypage-odd-column">Theme</td> <td class = "summarypage-odd-column">Q2 2009</td> <td class = "summarypage-odd-column">Q1 2009</td>
<td class = "summarypage-even-column">Theme</td> <td class = "summarypage-even-column">Q2 2009</td> <td class = "summarypage-even-column">Q1 2009</td>
<td class = "summarypage-odd-column">Business Area</td> <td class = "summarypage-odd-column">Q1 2009</td> <td class = "summarypage-odd-column">Q1 2008</td>
</tr>
I would like to highlight each row when the user moves mouse pointer over any cell in that row. So I used the following CSS code to achieve that.
tr:hover {
background-color: #FFFAF0; color: #000;
}
unfortunately it seems because each table data cell has a class name, the hover does not work. But if I remove the class names from data cells, the hover works.
My question is is there any way I can get the hover thing working for the table row, while still having class names for the table data cells inside the row.
Try this:
tr:hover td {
background-color: #FFFAF0; color: #000;
}
Place this after the existing td style declarations to be safe
This does not happen for me. Make sure that you're only adding/removing class names when checking if they have an impact, and make sure that the tds don't have their own background covering up that of the tr.
You probably need to use the !important designator to make sure that your hover style overrides the background defined int he class:
tr:hover {
background-color: #FFFFAF0 !important;
color: #000 !important;
}
Interestingly, this won't work for IE6 because that browser only applies hover to a tags.
The CSS instructions within the classname takes precedence over the <tr> instructions.
To fix this, use td.summarypage-odd-column:hover, td.summarypage-even-column:hover inside your CSS.
Note: If you're using IE6, the :hover only works on links, i.e. a:hover.
I think the td background-color overwrites the tr background-color. The solution given by #Nick Craver is the good one.
You must change cells background-color not the row background-color.
tr:hover td {
...
}
never put space between
tr:hover(space)td
I was giving space hence it was working for me.
How does the Block component handle CSS classes? I have code like this:
<style type="text/css">
.nameColumnHeader { width: 30%; }
.nameColumnValue { width: 30%; vertical-align:top; }
</style>
...
<table>
<tr>
<th><span jwcid="nameColumnHeader#Block">...</span></th>
<th><span jwcid="nameColumnValue#Block">...</span</th>
</tr>
...
</table>
Ultimately, this seems to work. The styles seem to be applied even though the class attribute is not specified.
Why does this work? And wouldn't it be better form to specify the class attribute (in terms of maintainability)? At this point, however, this kind of code is all over the app, is it worth it to 'fix' it?
You're probably using the contrib:Table component - by default it applies classes to the and it generates (or perhaps in the , check the generated markup).
The value for those classes are generated from each column name, so for the 'phone' column they should be: phoneColumnHeader and phoneColumnValue... It just happens that you have a similarly named jwcid (nameColumnHeader) which added to the confusion.
I different CSS styles, one of which is:
#layoutsectiondiv{
border: 2px dashed #000000;
padding: 1px;
left: 0px;
}
I have a aspx page:
<div id="testDiv" runat="server">
</div>
If it was regular HTML, I would set the style of a div by doing a
<div id="layoutsectiondiv">
</div>
At runtime (in code behind), I need to dynamically assign different styles to the DIV. How would I do it?
Use the class property and change your css styles to use class selectors instead of id selectors. For example
.layoutsectiondiv{}
<div id="testDiv" class="layoutsectiondiv">
</div>
Edit
Make your class only so that you apply it on the specific divs you want. don't reuse your classes. This should be easy since your css is already tied to a specific ID, just put that class on that element.
If you use that class on many types of elements what you suggested would work fine.
Josh is right, you should use class instead of id.
for your question :
At runtime (in code behind), I need to
dynamically assign different styles to
the DIV. How would I do it?
try this :
// layoutsectiondiv is defined as class : .layoutsectiondiv{}
testDiv.Attributes["class"] = "layoutsectiondiv";
So you could use a css id selector this way.
#layoutsectiondiv { color: red }
with the following html
<div id="layoutsectiondiv">
</div>
Or a css class html selector like this.
.layoutsectiondiv { color: blue }
with the following html
<div class="layoutsectiondiv">
</div>
If you want to control the style of a particular .net control, ie one that has the runat="server" attribute, then as we know .net will 'mangle' the id to ensure its unique.
In this case in our code we can use FindControl to access the div and change its style
<div id="testDiv" runat="server">
</div>
ie.
HtmlGenericControl testDiv =
(HtmlGenericControl)Page.FindControl("testDiv");
// to hide
testDiv.Attributes.Add("style", "display: none"); // OR
testDiv.Attributes["style"] = "display: none";
// to show
testDiv.Attributes.Add("style", "display: block"); // OR
testDiv.Attributes["style"] = "display: block";
// or to add a class
testDiv.Attributes.Add("class", "MyCssClassName"); // OR
testDiv.Attributes["class"] = "MyCssClassName";
Here is a good explanation on the difference between css id and class - CSS: div id VS. div class.
And here for How to edit CSS style of a div using C# in .NET