I have a TableView and trying to fix the cell height through CSS. The following works from java:
myTable.setFixedCellSize(80);
But if I comment that out and rely on the following CSS it doesn't work.
#viewtable .table-row-cell {
-fx-text-background-color: #7f7f7f;
-fx-fixed-cell-size: 80px;
}
The id is set to viewtable, I've already confirmed I'm targeting the proper element as the text color takes affect. And using -fx-cell-size also works fine.
I'm launching this through eclipse and tried running from different environments from javase-1.8 up to 16. The javafx sdk is 17.0.0.1
The fixedCellSize property is part of the TableView class, not the TableRow class. This:
#viewtable .table-row-cell {
-fx-text-background-color: #7f7f7f;
-fx-fixed-cell-size: 80px;
}
Is applying the styles to any TableRow (at least by default) which is a descendent of the node with an ID of #viewtable.
Try the following:
#viewtable {
-fx-fixed-cell-size: 80px;
}
#viewtable .table-row-cell {
-fx-text-background-color: #7f7f7f;
}
Related
On GluonMobile is there a way to have the CSS when a Item is selected in the drawer?
My application will have a lot of menu so I want to be able to see rapidly on wish one we are.
I manage to get the Item color, the Hover color but not the selected.
.navigation-drawer{
-fx-background-color: -primary-swatch-500;
}
.item {
-fx-background-color: -primary-swatch-300;
}
.item > .item-content:hover{
-fx-background-color: black;
}
I try all these thing
.item:selected
.item > .item-content:selected
.item:focused
.item > .item-content:focused
But nothing work.
So first can someone explain me why I need to do
.item > .item-content:hover and why not just .item:hover like in any other CSS ive done before.
Second I find it really hard to work with GluonMobile do to the lack of documentation IMO.
Maybee I dnt find the write documentation yet but the fact that I needed to do a printLn to find the styleSheet of a Node for me I find it weird.
The JavaDoc for Gluon Mobile controls, like the NavigationDrawer.Item is here.
However, you won't find the style classes applied to these controls, as you won't find it either in the JavaFX built-in controls javadoc.
Whenever you have issues with finding out the right style classes and pseudoclasses I'd strongly suggest you use ScenicView.
Find the distribution for Java 8, and run it:
java -jar scenicView.jar
while you also run your Gluon Mobile project on desktop:
./gradlew run
For instance, when you open the drawer of a default Glisten-Afterburner template project, you can see:
The node with item style class is a ViewItem, and it gets the selected and hover states.
The node with item-content is an HBox, child of ViewItem, and while it gets hover, it doesn't get selected:
Following the hierarchy of nodes you can also create the hierarchy of style classes, like:
.navigation-drawer > * > .scroll-pane > .viewport > * > .container > .item > .item-container
So for each item in the drawer, the different states can be:
.item:hover {}
.item:selected {}
.item:selected:hover {}
or for the content node:
.item:selected > .item-content {}
.item:selected:hover > .item-content {}
...
In your case, you could just apply something like:
.item {
-fx-background-color: -primary-swatch-300;
}
.item > .item-content:hover {
-fx-background-color: black;
}
.item:selected > .item-content {
-fx-background-color: green;
}
.item:selected:hover > .item-content {
-fx-background-color: lightgreen;
}
to get something like:
I am currently using the PrimeNG library's accordion component in my angular project. See info here.
The template includes some special css styling for printing the page--something like the following:
#media print {
.profile-progress-bar, .top-template-header-content, .header.profile-header{
display: none !important;
}
html, body {
height: auto;
font-size: 10px !important;
}
p-accordionTab > div {
display: block !important;
selected: true !important;
}
}
What I am trying to do, is automatically expand all accordionTab elements when the #media print rendering is processed for the page to be printed.
From the documentation I see that each accordionTab element has a [selected] property which can be bound to and set to "true" in order to expand the tab.
Selected Visibility of the content is specified with the selected
property that supports one or two-way binding.
However, can this be somehow automatically triggered when the #media print rendering occurs?
Thanks!
media query is the way to go, you can take a css only approach to achieve this; no change in TS or HTML files
relevant css:
#media print {
::ng-deep .ui-accordion-content-wrapper-overflown {
overflow: visible;
height: auto !important;
}
}
complete demo on stackblitz here
This is an interesting one. To keep it inside the realm of Angular, you could use the #angular/cdk/layout library and inject MediaMatcher. You could also, of course, do almost this exact same thing using JavaScript (see here... the cdk/layout method I'll show you really just wraps this).
The MediaMatcher service has a method called matchMedia, and from there you just add a listener:
import { MediaMatcher } from '#angular/cdk/layout';
constructor(private readonly mediaMatcher: MediaMatcher ) { }
ngOnInit() {
mediaMatcher.matchMedia('print').addListener(e => e.matches ?
console.log('printing!') : null);
}
So where I've put the console.log, just perform your logic to get the accordians to expand.
My CSS code isn't doing anything to the look of the elements for the JavaFX application I have. I've noticed that the lines of code in the CSS document say "Unknown property" and are highlighted in yellow. I tried to uninstall and then reinstall e(fx)clipse but that didn't help. Here's the code
CSS
.header-one {
-fx-stroke-width: 4;
-fx-fill: 99000;
}
Java
Label patronHeader = new Label("Current Patron");
patronHeader.getStyleClass().add("header-one");
What should I do to fix the problem?
In your case, you use css elements, that a Label does not support:
Visit this site for more information on what you can set on Labeled controls:
http://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html#labeled
-fx-stroke-width and -fx-fill are not supported CSS properties for a Label.
You need
.header-one {
-fx-text-fill: #990000 ;
}
.header-one .text {
-fx-stroke-width: 4 ;
}
For a button I have 3 possible classes: "state-normal", "state-focus" and "state-hover".
All have the same attributes (background, border, ...), but different values for the
attributes.
If a button gets "state-focus", I do not want to remove the class "state-normal".
If a button is "state-focus" and gets "state-hover", I do not want to remove the class
"state-focus".
In the browser language specification you can give a "quality"/priority to a language:
"Accept-Language: da, en-gb;q=0.8, en;q=0.7"
It would be great to do the same also in css:
.state-normal { background-color: #aaaaaa;q=0.5 }
.state-focus { background-color: #bbbbbb;q=0.7 }
.state-hover { background-color: #eeeeee;q=0.9 }
I know that there is nothing in CSS.
But, I know in jQuery UI they have kind of this, because they don't remove "ui-state-default" when they assign "ui-state-focus" to an element. How do they do it?
Is there another way to implement this with a trick (WITHOUT !IMPORTANT).
Thanks alot in advance
You can do this using CSS.
.state-normal { background-color: #aaaaaa;q=0.5 }
.state-normal.state-focus { background-color: #bbbbbb;q=0.7 }
.state-focus.state-hover { background-color: #eeeeee;q=0.9 }
But this implies that all classes mentioned in the rule will be present, i.e. an element will have both classes present. So an element with class state-focus will not have the background-color set as per the rule.
If you want to avoid that, then you can do this instead:
.state-normal { background-color: #aaaaaa;q=0.5 }
.state-focus, .state-normal.state-focus { background-color: #bbbbbb;q=0.7 }
.state-hover, .state-focus.state-hover { background-color: #eeeeee;q=0.9 }
EDIT: As per OP's request
CSS Specificity
CSS Selectors - MDN
Similar answer
I have a window with two buttons.
I'd like to decorate each one with a different stylesheet. They both have different object names, of course, but it seems that only the generic QPushButton stylesheet selector works.
I tried:
QPushButton#myBtnObjectName1 {
/* style definitions */
}
QPushButton#myBtnObjectName2 {
/* style definitions */
}
Tried the same with replacing the # with a ., or having the #myBtnObjetNameX only. Nothing works. Just:
QPushButton {
/* style definitions */
}
Am I using a wrong syntax? Or is this simply impossible without deriving from QPushButton in code and using a separate class name for each?
To match instances using the objectName, you can also use the selector ^=. According to the standard:
[att^=val] Represents an element with the att attribute whose value
begins with the prefix "val".
Example in Qt:
QPushButton[objectName^="push"] { background-color: red; }
A QPushButton called pushButton would be matched, but not an object called pbt.
You can use "accessibleName" in Qt Designer for this.
And in qss stylesheet:
more universal:
[accessibleName="alert-error"] {
color: red;
}
or be more specific:
QPushButton[accessibleName="bigred"] {
background-color: red;
}
Ah yes, the "AccessibleName" in Qt Designer needs to be set too, not just "ObjectName"