1 Reply Latest reply: Oct 15, 2012 6:52 AM by Jfdenise-Oracle RSS

    menu-item styling in Java fx scene builder

    965794
      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
          Jfdenise-Oracle
          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.