JavaFX - How to prevent Toolbar from changing width on button state changes

Question

I have a problem with TooBar, when one of the included ToggleButtons gain/looses focus or gets checked/unchecked - their visual appearance become slightly bigger / or smaller by a few pixels but the Toolbar adjusts its width accordingly.

When I click on some other UI element - "Objects button" losses focus, becomes smaller and Toolbar width decreases. It's quite annoying that Toolbar size changes all the time. Also, the second button becomes not aligned with first one.

What can be done here to keep all buttons aligned all the time regardless of their current state and have Toolbar width fixed ?

The code for the vertical toolbar is:

<HBox fx:id="leftPanelSwitchPanel">
        <ToolBar orientation="VERTICAL" style="-fx-base: #d1ffd3;">
            <Group>
                <ToggleButton fx:id="objectListPanelSwitch" rotate="-90.0" text="Objects">
                    <graphic>
                        <MaterialIconView glyphName="FORMAT_LIST_BULLETED" />
                    </graphic>
                </ToggleButton>
            </Group>
            <Group>
                <ToggleButton fx:id="objectPropertiesPanelSwitch" rotate="-90.0" text="Properties">
                    <graphic>
                        <MaterialIconView glyphName="SETTINGS_APPLICATIONS" />
                    </graphic>
                </ToggleButton>
            </Group>
        </ToolBar>
    </HBox>

Oh, you used the same technique as my solution to: [JavaFX: how to make a proper vertical toolbar?](http://stackoverflow.com/questions/24774112/javafx-how-to-make-a-proper-vertical-toolbar) The solution is currently imperfect ;-) — jewelsea, Apr 24 '17 at 20:18
I updated the original solution to fix the focus movement issue. — jewelsea, Apr 24 '17 at 22:37

Cem Ikta · Answer 1 · 2017-04-24T22:37:13.260

2

You can change focused button/toggle-button css:

.button:focused {
  -fx-background-color: -fx-outer-border, -fx-inner-border, #d5e1f2;
  -fx-background-insets: 0, 1, 2;
  -fx-background-radius: 5, 4, 3;
} 
.toggle-button:focused {
  -fx-background-color: -fx-outer-border, -fx-inner-border, #d5e1f2;
  -fx-background-insets: 0, 1, 2;
  -fx-background-radius: 5, 4, 3;
}

See for details: How to get rid of focus highlighting in JavaFX

edited Apr 24 '17 at 22:37

answered Apr 24 '17 at 22:30

Cem Ikta

1,330
12
12

I can't accept this answer as the solution you provided looks unnatural for Windows look and feel of modena but I've marked it as useful as it gives the right direction to look for the solution. Jewelsea I think provided more bullet proof solution, thanks ! – ievgen Apr 25 '17 at 12:54
By saying unnatural I meant to say the solution should be cross-platform applicable – ievgen Apr 25 '17 at 13:02

JavaFX - How to prevent Toolbar from changing width on button state changes

1 Answers1

Linked