Wednesday 9 April 2014

FX 2.2 to FX 8.0 Part 9 (tabs & tabpane)

I have a calendar type control that has two vertical tab panes. The one has month tabs and the other day tabs, both on the left-hand side (none of the tabs have any content.) No preferred, min or max sizing was specified and this is how it looked in FX 2.2:



But in FX 8.0 the default calculated width of the tab panes differs from the above with a much more expanded result. (In the image below I've already started clamping the width so that I could show it here, otherwise it would have been too wide):


This seems to be related to RT-31744 (fixed for 8u20) where the width of the tabHeaderArea is included in the prefWidth calculation even when the tabs are vertical. I confirmed this by changing the number of month and day tabs to see if it affected the width, which it did. A temporary fix was to simply specify a maximum width for the two tab panes:



Lastly while trying out FX 8.0 Caspian I noticed a cosmetic change from Caspian FX 2.2 in that a selected tab now has a dotted border when focused:


If you don't like this, which I didn't, you can change it in your apps CSS file with the following entry:
.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator
{
    -fx-border-style: solid;
    -fx-border-insets: -2 -2 -4 -3;
    -fx-border-width: 1 1 0 1;
    -fx-border-radius: 2 2 0 0;
}
The above is a modified version from Modena, and results in the following in FX 8.0 Caspian:


And this is what is looks like when using Modena:


While this is the original Modena style:



Well that's it for now ....

No comments:

Post a Comment