This discussion is archived
1 Reply Latest reply: Oct 15, 2012 4:52 AM by 895555 RSS

menu-item styling in Java fx scene builder

965794 Newbie
Currently Being Moderated
Hi Everyone !!!

I have a serious problem wherein i am unable to give the styling for an .item-menu using css in JAVA FX Scene Builder 1.0.

Here are my fxml code and supporting css, please let me know where i have gone wrong in changing the bg color of the menu-item and on hover bg color of the menu-item.

Link for the image example- http://hyvaitsolutions.com/jfx/menu-item1.jpg / http://hyvaitsolutions.com/jfx/menu-item2.jpg

fxml code from fx scene builder

<Tab id="maintab" text="Account Payable ">
<content>
<MenuBar id="submenu">
<menus>
<Menu mnemonicParsing="false" text="File">
<items>
<MenuItem mnemonicParsing="false" text="Close" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Edit">
<items>
<MenuItem mnemonicParsing="false" text="Delete" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Help">
<items>
<MenuItem mnemonicParsing="false" text="About" />
</items>
</Menu>
</menus>
<prefHeight>
<Long fx:value="32" />
</prefHeight>
</MenuBar>
</content>
</Tab>


Css Code

.menu-item {
/* -fx-skin: "com.sun.javafx.scene.control.skin.MenuItemSkin";*/
-fx-background-color: transparent;
-fx-padding: 0.333333em 0.41777em 0.333333em 0.41777em; /* 4 5 4 5 */
}

.menu-item .left-container {
-fx-padding: 0.458em 0.791em 0.458em 0.458em;
}

.menu-item .graphic-container {
-fx-padding: 0em 0.333em 0em 0em;
}

.menu-item .label {
/* -fx-padding: 0em 0.5em 0em 0em;
-fx-text-fill: -fx-text-base-color;
*/
-fx-text-fill: white;
-fx-background-color:#580e06;

}

/*.menu-item:disabled .label {
-fx-opacity: -fx-disabled-opacity;
}
*/
.menu-item:focused {
-fx-background: #a83d1b;
-fx-background-color: #580e06;
-fx-text-fill: white;
}

.menu-item:focused .label {
-fx-text-fill: white;
-fx-background-color:#580e06;

}

Edited by: 962791 on Oct 9, 2012 9:57 PM
  • 1. Re: menu-item styling in Java fx scene builder
    895555 Newbie
    Currently Being Moderated
    Hi,
    I think that you are hit by http://javafx-jira.kenai.com/browse/RT-19435
    There is 2 possible workaround there.
    1) Don't add the CSS file to the stylesheets property of the container. Instead you need to add it to the Scene.stylesheets property.
    You will need to do that in JavaFX code in your application. In order to visualise the styling in the SceneBuilder, you will need to set your CSS file thanks to : Preview/Preview a Stylesheet... When added for Previewing, the CSS file is not added to the running application That is why you need to do it by code.
    2) You could add the declarations to the style property of the menuItem. In your case (there is some pseudo states) you will not bet able to set all your declarations.

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points