2 Replies Latest reply: Jun 19, 2014 9:28 AM by David Grieve RSS

    fx-shape inside button

    drenda81

      Hi, I'm trying to styling 2 simple button (add, delete). The result I've now is this: http://snag.gy/wrv1i.jpg, it is quite good but I'd like to create a shape inside that button for draw + and -. Now I'm using text value of button to show that. My problem is that if I use fx-shape inside the button, I lose all the background, rounded border ecc ecc. This is my css:

       

       

      .table-button-add {
           -fx-cursor: hand;
           -fx-background-radius: 0.0 5.0 5.0 0.0 ;
           -fx-background-color: #2381E9;   
           -fx-font-weight: bold;        
           
           -fx-padding:0.0 0.0 0.0 0.0;
           -fx-font-size: 19.0px;
           -fx-text-fill: #FFFFFF;
           -fx-pref-height: 30.0px;     
           -fx-pref-width: 30.0px;    
      }
      
      .table-button-del {
           -fx-cursor: hand;
           -fx-background-radius: 0.0 5.0 5.0 0.0;
           -fx-background-color: red;   
           -fx-font-weight: bold;   
           
           -fx-padding:0.0 0.0 0.0 0.0;
           -fx-font-size: 19.0px;
           -fx-text-fill: #FFFFFF;
           -fx-pref-height: 30.0px;     
           -fx-pref-width: 30.0px;
      }
      

       

      Have you some ideas on how I can add a shape inside the button preserving its actual shape?

       

      Thanks

        • 1. Re: fx-shape inside button
          jsmith

          Set a graphic on the button (e.g. a Pane with a min width/height set on it) and apply a shape to the graphic.

          • 2. Re: fx-shape inside button
            David Grieve

            When you set -fx-shape on the button, you are giving the button a shape, not adding a graphic to the button. You could use -fx-graphic and point to an image file. Or, if you want to use an SVG path, you can set the graphic to a StackPane, give the StackPane a style-class and set -fx-shape on that.

             

            Button button = new Button();

            button.getStyleClass().add("plus");

             

            StackPane mark = new StackPane();

            mark.getStyleClass().add("mark");

            button.setGraphic(mark);

             

            .button.plus { -fx-content-display: graphic-only; }

            .button.plus > .mark { -fx-padding: .5em; -fx-border-color: green; -fx-shape: 'M0,-1 V1 M-1,0 H1'; }