How to justify menu item accelerators to the different menu width?

1
votes

My menu-button is a bit wider:

.menu-button {
  -fx-pref-width: 250px;
  -fx-background-color: #72b3c9;
  -fx-padding: 5 16 5 16;
}

and the menu with its items (and their accelerators) is displayed as expected, like this:

default

But when I want to align the width of menu-item to the width of menu-button, like this:

.menu-item {
  -fx-pref-width: 250px;
  -fx-pref-height: 40px;
  -fx-padding: 5px 16px 5px 16px;
}

then I don't get the accelerators aligned to the right of the menu items:

enter image description here

What I would want (and expect) is that the accelerators are following the width of the menu item and that are aligned to the right edges of their respective menu items, like this:

enter image description here

How can I achieve that?

Edit:

A hack to increase the left-label padding could be used, thus forcing the accelerators more to the right:

.menu-item .label {
  -fx-padding: 0 120px 0 0;
}

But, that is a hard-coded platform-dependent approach that needs to be adjusted each time a menu item label text or an accelerator is changed.

2
cssjavafxmenujava-8
A question, how do you display two (texts) items on the same line of an menu-item? – Bo Halim
@BoHalim, those are not two separate items, but a menu item and its accelerator. The accelerator is added programmatically with menuItem.setAccelerator(KeyCombination.keyCombination(keyCombination));. – Saran

2 Answers

1
votes

Here is a solution that I managed to achieve, like that with the default color it will not appear but if you put two differents color (for Label and Background) it will be ugly for now it is the only thing That I realized. I know something is missing but I can't figure out what :

 .menu-button {

  -fx-pref-width: 250px;
  -fx-background-color: #72b3c9;

 }

 .menu-item {

   -fx-pref-width: 250px;

 }

 .menu-item > .label{

  -fx-pref-width: 200px;

 }

Overview

Try to perfect it, on my side I will try to find a better solution, good luck !

1
votes

Its already a very old question and probably you have found some solution. But I am giving my answer here so that others can find it useful.

Don't set any width for .menu-item or it's child .menu-item > .label. Set the padding only in .accelerator-text instead as follows:

.menu-item > .accelerator-text {
    -fx-padding: 0 0 0 30px;
}

Customize the left padding to adjust your menu item's width.