Friday, October 17, 2014

JavaFX workaround for rotate text on tabpane tab

I have not much of experience with JavaFX, but I've been using it since almost over a year by now. I found that the tabs from the tabpane control have a restriction, when they are placed by a side either right or left the text can not be placed horizontal, the following image shows the behavior.

The issue is that the text is not displayed horizontally and it is hard to read, and javaFX does not provide a solution to it, actually there is feature request to it but it seems that it will not happen soon.

I found some workarounds to it, but they have many issues such as the text doesn't properly resize the tab width, so I'm going to describe the workaround that I did, hoping that it could be helpful to you.

A solution that I found from this post , mentions to add the following style:

Which works fine:

But what if you have multiple tabs in your application and this tabs do not have the tabs by a side, it will also rotate the text of this tabs and will complicate everything.

Another issue is, if the characters of the text increases the size also increases but not only its width but also its height:

Due to all this issues this workaround and others seem to work fine only in certain scenarios.
My workaround is not better than them, but it tries to avoid these issues.
First, only rotate the tabs you want to rotate, to do this create a CSS class:

Then add it to the tabs objects you want to rotate:

Then create a CSS class to handle the size for the TabPane in which you are rotating the tabs:

Add this class to the TabPane object:

With this you will restrict the size of your tabs and they will not get bigger if the text increases. The limitation it has is that the amount of characters depends on the size you set to the TabPane object.

As I said I'm not an expert on javaFX and I found this solution to this issue that seems to be different to others and might help you.
If you have a different solution before this issue is fixed tell me about it.

1 comment:

  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Online Training from India . or learn thru JavaScript Online Training from India. Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Online Training