I am working on this javaFX project and I am trying to change the TreeTableView header or column style such as color, width, font size and etc. I am not able to change style of the header or column. I have try these code but none is working.
.tree-table-column
.tree-table-column-header
.tree-table-header
However, I was able to change the row style with this code
.tree-table-row-cell
Does anyone know how to do this?
I know this question is old, but I will put an answer here for someone who may come across this article.
The appropriate way to set the styling for a tree table view (and this styling guideline is generally how CSS styling of a main components children tends to work) Tree Table View in this case is the parent element so we will write its full name for our css tag, and then list the child element we would like to modify after. See the code below as an example.
.tree-table-view .column-header {
/* CSS STYLES HERE */
}
.tree-table-view .header {
/* CSS STYLES HERE */
}
.tree-table-view .column {
/* CSS STYLES HERE */
}
Related
I've to remove the inline style of of the div element, can anybody tell me how to select that particular div, I've tried selecting class but inline style has more priority than class selector. Please tell me how to remove the inline style from it, I'm using WordPress and it is theme generated css.
This is one of those just because you can doesn't mean you should moments. Ideally, you should make a child theme and make your updates there. You can find plenty of help on how to make child themes in the WordPress docs.
That said, it is possible, but it's not best practice. This code will override what is in your current inline style.
/* this select a div with the class img-inner with the style attribute */
div.img-inner[style] {
margin: 2rem !important; /* anything you need to override needs an !important */
padding: 0 !important;
}
Once you have the div selected, you can pretty much do what you need. I just put in some declarations as an example. You can add more declarations or override/unset others.
If you need, you can use a more complex attribute selector to see if the style contains something specific.
Please try this -
.col-inner .img a.image-lightbox .img-inner.img-cover{padding: top: 77% !important;margin: 0 !important;}
The code I have is as follows:
there is one HTML that have two views, a list view and a card view and the user can choose whichever he/she prefers. when the user clicks card view I add a class card view to a parent element and I trigger css for that selector for example list view will be .order{} card view will be .card_view .order{} now I want to make that when mobile (with media queries) it should only apply the card view.
If someone can help I'll appreciate it, thanks in advance.
.order,
.card_view {
/* same properties for both CSS selectors - both will look the same */
color: white;
background-color: #ddd;
}
#media( min-width: 480px ) {
.order {
/* override styles for larger screens for this CSS selector - different looks */
color: red;
}
}
Any viewport less than 480px wide would use the same styles for .order and .card_view since they have the same definition. At 480px and above, .order would use the re-defined styles in the media query and they now have different definitions and will be styled differently.
Is there a way to show the comments that are generated in my css file in websinspector, I can see the comments when I view the css file in the resources tab but I dont see them in the elements styles sidebar, is this possible, this would make my life super easy.
Thanks.
Instead of /* ... */ comments, make up fake styles starting with -, e.g.
.foo {
-my-comment1: Make all foos red;
color: red;
}
These will show up in the inspector with a strike-through, since it doesn't recognize them.
I'm just wondering if it is possible to assign a CSS class to the content added by an :after pseudoelement. Something like this:
span:after {
content: "after!"
class: red
}
I know you can specify several style attributes like font-size and so on, so I could imagine applying a class should be possible, too.
Acutally, I'm trying to append a glyphicon via bootstrap CSS this way. But a simple
span:after {
class: icon-wrench
}
didn't do it.
Pseudo-elements can't have classes. You can only apply individual style rules to them directly. There isn't a way to copy styles from a real element of a certain class to its pseudo-element either, unless you specifically select it, something like span.icon-wrench:after.
Is there any kind of inheritance in css?
For example, divA, divB, divC all existing in the same spot with all the same properties, only differing by their z-index?
The idea being using jquery or whatnot to have different transitions between the sections.
Is anything like this possible or am I going about this the wrong way?
Is there any kind of inheritance in css?
Yes. Most properties can be given the value inherit which means "The same value for this property as the parent node has". This isn't the type of inheritance you are thinking of though.
For example, divA, divB, divC all existing in the same spot with all the same properties, only differing by their z-index?
CSS has no way to say that one rule-set should copy values from another one. You can do:
#divA, #divB, #divC /* Or another selector that matches all the elements */
{ /* Common rules */ }
#divA { /* specific rules */ }
/* etc */
or various other strategies including generating your CSS using a script and using multiple classes on a single element.
You can specify multiple classes for a single element, e.g.
<div class="divA divB">
So with that you can do some clever trickery to get what you want.
CSS does have inheritance, that is one of the main principles of CSS.
jQuery can handle pretty much any scenario you want. If you provide a more detailed code writeup we can help more.
HTML:
<div id="container">
<div id="divA">A</div>
<div id="divB">B</div>
<div id="divC">C</div>
</div>
CSS
#container div
{
/*all your common styles here */
}
#divA { /*div specific style here */ }
#divB { /*div specific style here */ }
#divC { /*div specific style here */ }