I use this CSS to add icon to menuItem on JavaFX application:
#mniOpen > .label{
-fx-graphic:url(media/open.png);
}
It works, but one problem: my menuItem has a shortcut key (Ctrl+O), so in this item there are two label. In the result, the icon repeats twice for this menuItem:
How can remove the second icon (for Ctrl+O) ?
Using css
#mniOpen > .label{
-fx-graphic: url("media/open.png");
}
#mniOpen .accelerator-text{
-fx-graphic: none;
}
Without using css
Image openIcon = new Image(getClass().getResourceAsStream("media/open.png"));
ImageView openView = new ImageView(openIcon);
openView.setFitWidth(15);
openView.setFitHeight(15);
MenuItem newMenuItem = new MenuItem("Open");
newMenuItem.setGraphic(openView);
newMenuItem.setAccelerator(new KeyCodeCombination(KeyCode.O, KeyCombination.CONTROL_DOWN));
Related
I want to apply some style on my ContextMenu and MenuItem in a TableView. It works simply : Right Click on the Row and you have the ContextMenu for this row. However the ContextMenu and MenuItem are built like that :
final ContextMenu menu = new ContextMenu();
MenuItem removeitem = new MenuItem("Remove");
I tried to apply a CSS like that :
.table-view .context-menu .menu-item
and many others but with no results.
However It works when I add the style in my code with setStyle but I want to know if we can do it in CSS (I guess yes ...).
If it is the label inside the MenuItem you are trying to style use
.table-view .context-menu .menu-item .label
{
-fx-text-fill: red;
}
The MenuItem itself has no (meaningful?) stylable item s itself, at least the documentation does not list any.
I'm working on a simple back/forward-navigation with Vaadin existing of two buttons, each with a label and an icon (arrows left and right).
navigator = getUI().getNavigator();
if (!StringUtils.isEmpty(backViewID)) {
backButton = new Button(backButtonI18n, IconCache.FAST_REWIND_BUTTON.getIconResource());
backButton.addClickListener(getBackButtonListener());
}
if (!StringUtils.isEmpty(nextViewID)) {
nextButton = new Button(nextButtonI18n, IconCache.FAST_FORWARD_BUTTON.getIconResource());
nextButton.addClickListener(getNextButtonListener());
}
How can I align the icons on each button? Currently it looks like
"<< Back" ">> Next", because icons are aligned on the left and text is aligned on the right side. I now want to align the icon for the next-button on the right side and the text on the left, to make it look like "<< Back" "Next >>".
I hope someone can help me with that.
Cheers, Hendrik
If you're using Valo, this is relatively easy. You just need to add a style name which is already shipped with the theme forwardButton.addStyleName(ValoTheme.BUTTON_ICON_ALIGN_RIGHT):
public class ButtonsComponent extends HorizontalLayout {
public ButtonsComponent() {
Button backButton = new Button("Back", FontAwesome.ARROW_LEFT);
Button forwardButton = new Button("Forward", FontAwesome.ARROW_RIGHT);
forwardButton.addStyleName(ValoTheme.BUTTON_ICON_ALIGN_RIGHT);
addComponent(backButton);
addComponent(forwardButton);
}
}
Alternatively you can just copy the same exact CSS from the valo-button-icon-align-right-style into your theme, and add that particular style to your button: forwardButton.addStyleName("my-custom-button-with-right-alligned-icon");
.my-custom-button-with-right-alligned-icon {
[class*="wrap"] {
display: inline-block;
}
.v-icon {
float: right;
$padding-width: ceil($v-unit-size/2.4);
margin-left: $padding-width + ceil($padding-width/-5);
+ span:not(:empty) {
margin-left: 0;
}
}
}
Either way, you should end up with something similar to:
I want to change image set on imageview through css while hover it. Imageview is set on button and while hovering the button the background color will change. Now I need to change image too.
You can assign a style-class to your button and then in your style-sheet add a new style :
.my-button {
-fx-graphic: url("abc.png");
}
.my-button:hover {
-fx-graphic: url("xyz.png");
}
where,
abc.png -> Image present on the button
xyz.png -> New Image to be shown on hover
.my-button -> Style Class assigned to the button
Hi JavaFX Stylesheet expert,
How do I remove the default arrow on JavaFX menuButton.
I have figured how to change the color and make in unvisible with
.menu-button {
-fx-mark-color: transparent;
}
or
.menu-button .arrow {
-fx-background-color: transparent;
}
but, I don't want the gap because of the unvisible arrow.
Thanks for your advice.
Best Regards,
Ivan
If we look into the source code of MenuButtonSkinBase, the sub structure of MenuButton seems to be
MenuButton
|——— label (LabeledImpl)
|——— arrowButton (StackPane)
|——— arrow (StackPane)
So to hide the "arrow" it is enough to set padding to 0 for both StackPanes:
.menu-button > .arrow-button {
-fx-padding: 0;
}
.menu-button > .arrow-button > .arrow {
-fx-padding: 0;
}
There are several ways to do this, here are four. The code is Jython with JavaFX. You can edit it for your needs.
First, the enum, for context.
public enum URLBarArrowConstants {
//URLBarArrow Constants
BYCSS_AND_SHAPE,
BYCSS_AND_NO_SHAPE,
NOCSS_AND_SHAPE,
NOCSS_AND_NO_SHAPE;
}
Second, the css files, for context.
EG #1
/*ComboBox's Arrow is a Region.*/
.combo-box .arrow-button .arrow {
-fx-shape: "...";
-fx-scale-shape: true;
-fx-position-shape: true;
}
EG#2
/*ComboBox's Arrow is a Region.*/
.combo-box .arrow-button .arrow {
/*Setting either of these two will do.*/
-fx-background-color: transparent;
-fx-opacity: 0.0;
}
/*ComboBox's Arrow Button is a Stack Pane.*/
.combo-box .arrow-button{
-fx-background-position: center;
-fx-background-repeat: no-repeat;
-fx-background-image: url("..<file>.png");
}
The method, in my main file.
def setCustomURLBarArrow(self, url_bar, scene, URLBarArrowConstant):
from javafx.scene.paint import Paint
from javafx.scene.shape import Shape, SVGPath, FillRule
Don't configure the ComboBox Arrow by CSS, instead, do it programmatically and change the Regions SVG Shape
if URLBarArrowConstant == URLBarArrowConstants.NOCSS_AND_SHAPE:
#SVG Object
previous_url_bar = SVGPath()
#SVG Path
previous_url_bar.setContent("...") # edit this
#SVG Fill Rule
previous_url_bar.setFillRule(FillRule.NON_ZERO)
#Set Fill --
previous_url_bar.setFill(Paint.valueOf(Color.web("...").toString())) //edit here
#Apply CSS Sheet
url_bar.applyCss()
#Set Region's Shape
arrow_region = url_bar.lookup(".arrow").setShape(previous_url_bar)
Configure the ComboBox Arrow by CSS and change the Regions SVG Shape
elif URLBarArrowConstant == URLBarArrowConstants.BYCSS_AND_SHAPE:
#Apply Stylesheet for URL Bar
scene.getStylesheets().add(File("..<file>.css").toURI().toString()) //edit here
Configure the ComboBox Arrow by CSS but instead, merely hide the arrow by setting the transparency/opacity values and set a background.
elif URLBarArrowConstant == URLBarArrowConstants.BYCSS_AND_NO_SHAPE:
#Apply Stylesheet for URL Bar
scene.getStylesheets().add(File("..<file>.css").toURI().toString()) //edit here
Don't configure the ComboBox Arrow by CSS, instead, do it programmatically and merely hide the arrow by setting the transparency/opacity values and set a background.
elif URLBarArrowConstant == URLBarArrowConstants.NOCSS_AND_NO_SHAPE:
from javafx.scene.paint import Paint
from javafx.scene.layout import CornerRadii
from javafx.scene.layout import Background, BackgroundSize, BackgroundImage, BackgroundPosition, BackgroundRepeat, BackgroundFill
#Apply CSS Sheet
url_bar.applyCss()
#Grab Arrow(Region), ArrowButton(StackPane) ComboBox properties
arrow_region = url_bar.lookup(".arrow")
arrow_button = url_bar.lookup(".arrow-button")
#Either Set Opacity to 0 or set background color to transparent.
arrow_region.setOpacity(0.0)
arrow_region.setBackground( Background( array(BackgroundFill, [BackgroundFill( Paint.valueOf(Color.TRANSPARENT.toString()), CornerRadii.EMPTY, Insets.EMPTY)]) ) )
#Set a Background Image for the .arrow-button StackPane.
arrow_button.setBackground(Background( array(BackgroundImage, [BackgroundImage( Image( String(File('..<file>.png').toURI().toString()), True) , BackgroundRepeat.NO_REPEAT, BackgroundRepeat.NO_REPEAT, BackgroundPosition.CENTER, BackgroundSize.DEFAULT)] ) ) ) //if you want, edit this
I have these buttons with different size:
Image
How I can make all buttons with same with size?
It depends on layout where the button is located. For example, if you add all the buttons into GridPane or BorderPane, you have to specify each button width to correspond to certain variable. In the following example I wrap all buttons inside VBox, set VBox preference width and tie up all buttons minimum width to it:
VBox vBox = new VBox();
vBox.setPrefWidth(100);
Button btn1 = new Button("Short");
Button btn2 = new Button("Super Long Button");
btn1.setMinWidth(vBox.getPrefWidth());
btn2.setMinWidth(vBox.getPrefWidth());
vBox.getChildren().addAll(btn1, btn2);
It is also worth to mention that there are two ways to specify the button size. You can do it in the java code or specify it in javafx .fxml file. The above method is an example for java code implementation.
You can also unclamp a button's maximum dimensions so it will grow to fill the available space (unlike most nodes, by default a button node has it's max size clamped to it's preferred size so it doesn't usually grow to fill available space). An Oracle tutorial on Tips for Sizing and Aligning Nodes explains this in more detail.
VBox vBox = new VBox();
Button btn1 = new Button("Short");
Button btn2 = new Button("Super Long Button");
btn1.setMaxWidth(Double.MAX_VALUE);
btn2.setMaxWidth(Double.MAX_VALUE);
vBox.getChildren().addAll(btn1, btn2);
using css you can override the preferred width of all buttons like
.button {
-fx-pref-width: 200px;
}
or create your own style class for certain button groups and add the style to the button like:
css:
.my-special-button {
-fx-pref-height: 28px;
-fx-pref-width: 200px;
}
and then set the style to your button with either
fxml:
styleClass="my-special-button"
or in java
myButton.getStyleClass().add("my-special-button");