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:
Related
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;
}
I have a couple of network storage, for example '\dev', '\qa', etc...
I am trying at Atom IDE to set a different style to the projects by the path base.
For projects that located on '\dev\www\example\' the curser will be green, and for projects that located on '\qa\www\example\' the curser will be red.
Is it possible? if so how?
You can add the following to your styles.less (File > Stylesheet…)
atom-pane[data-active-item-path*="'\dev\www\example\"] {
.cursor {
color: green;
}
}
atom-pane[data-active-item-path*="\qa\www\example\"] {
.cursor {
color: red;
}
}
Note: I'm using the contains attribute selector (*=), but you might want to look at all available options to see which fits your needs best.
I'm trying to customize a combo box in JavaFX through css. I can't customize the "arrow button" on the right (I want it to disappear, or to have a custom graphic, for example).
I have been checking the default caspian.css, but no matter what modifications I do to the .combo-box section, the arrow button is not affected.
Any idea of where this can be edited?
Using the following CSS in the style sheet will get rid of all of the ComboBox arrows
.combo-box .arrow, .combo-box .arrow-button{
-fx-background-color: transparent;
}
Use the CSS Analyser option in Scenebuilder to get the CSS of any node that you want to play with
After that just select any node and you'll see all the classes which you can modify using CSS.
Now that I know the class I can make my changes accordingly in my CSS file
.combo-box{
-fx-border-color:#E6E6E6;
-fx-border-style:solid;
-fx-border-width:1;
}
.combo-box .arrow{
-fx-background-color:#2478E9;
}
.combo-box .arrow-button{
-fx-background-color:white;
-fx-border-style:none;
}
.combo-box .arrow-button{
-fx-background-color:white;
}
.combo-box .list-cell{
-fx-background-color:white;
}
Which gives me an end result like this.
For more advanced analysis of CSS and other Events occurring when the application is running, you can try Scenic View.
I wanted it to disappear too. But nothing worked for me on javafx 8 until I tried the following:
css:.combo-box.REFERENCEDONLY .arrow-button {
-fx-padding: 0 0 0 -7;
}
basically it says: use negative padding on the arrow-button's left side to effectively shrink it.
javafx code:myCombobox.getStyleClass().add("REFERENCEDONLY");
Is there an easy way to change the order of the sort and move buttons from the PrimeFaces picklist?
For better usability i need the buttons to be in this order:
Sort:
all up
up
down
all down
and for moving:
all to the right
right
left
all to the left
I am just the one who implements a dummy page and someone else has to implement as a PrimeFaces Component what i am designing here. So i don't want it to be a impossible task for the programmer.
There is no built-in buttonTemplate feature, you can change the order with css though.
Code:
.ui-picklist-button-add {
position:relative;
top:25px;
}
.ui-picklist-button-add-all {
position:relative;
top:-40px;
}
-> This is what 'Optimus Prime' says. His answer in the Prime Faces Forum on my question
you can try doing it with jQuery like that : JavaScript moving element in the DOM
Use firebug to find out all the classes of the buttons and its containers
for example try jQuery(".ui-picklist-target-controls .ui-picklist-button-move-top").insertAfter(".ui-picklist-target-controls .ui-picklist-button-move-top");
If want to patch the primefaces jar look at the PickListRenderer.java file look where they use the encodeButton method , and just re order the buttons...
although you will have to re patch it each time you'll want to upgrade
I am the same problem but still got pixel issues with different screens.
Using flexbox should be better than px change:
.ui-picklist-buttons-cell{
display: flex;
flex-direction: column;
}
.ui-picklist-button-add {
order:2;
}
.ui-picklist-button-add-all {
order:1;
}
.ui-picklist-button-remove {
order:3;
}
.ui-picklist-button-remove-all {
order:4;
}
Example: https://codepen.io/Frank_Worker/pen/abzYmYr
Is it possible to add additional rules to a css block when using a "{ (properties of x) }" selector?
I looked at references but I can't find anything related to "properties of x". A link would be wonderful. I tried the following two combinations, but neither worked:
.dock li { (properties of grid_2; display:inline; background-color:#666; ) }
.dock li { display:inline; background-color:#666; (properties of grid_2) }
Many thanks!
EDIT
Apparently I misread an article and thought that such a syntax existed. I thought one could create a class and let it inherit the properties of another using such syntax, which is evidently not the case.
CSS does not have such a feature.
What you are describing is not possible. I think there are two other possibilities you could maybe use. The first is, that you need to know that several styles can be applied to an element at the same time. I'll give you an example:
li { font-size: 10pt; }
.dock li { color: #ff0000; }
All list items will be formatted with a font size of 10 points and only those within an element containing the dock class will be red.
My second suggestion is that you try applying two or more classes to your HTML element, for instance:
.grid li { font-size: 10pt; }
.dock li { color: #ff0000; }
Now put the grid and dock class into your HTML, and the elements will apply both style definitions:
<ul class="grid dock"> ...
Whatever you consider best for your project: remember that the properties defined in the second style overwrite the properties of the first one (if they do not define the same properties at all, there will be no confusion).
maybe your question is not too strange..
What I understand is that you want to do something like:
.a { prop1: val; prop2: val; }
.b { prop3: val; prop4: val; }
.c { .a; .b; prop5: val; prop6: val; }
You want the class .c to inherit all the properties and values of .a and .b
If this is ok, you can do that using LESS.
To use your LESS code in your sites you have different ways to do it.
First of all check the original site: LESS.org
If you are on Mac check this site: LESS APP + PLUGINS
If you are on PC the less.js plugin should be easier to implement LESS in your sites: less.js usage
Hope it helps.
Happy coding y'all! :)