JavaFx: tab rounded corners

Question

To make my tab corners rounded I use the following code:

.tab {
    -fx-border-radius: 10 10 0 0;
    -fx-background-radius: 10 10 0 0;
}

.tab:selected .focus-indicator {
    -fx-border-radius: 10 10 0 0, 10 10 0 0;
}

However, I get rather strange behaviour. When new tab is created it has some extra corners which later disappear when I change focus or create new tab. For example - I create the first tab. enter image description here

Now I create the second tab. The first tab is already normal, but the second has this strange corners. enter image description here

I've checked on centos and win7 - behaviour is the same. How to fix it?

EDIT 1
This is all my css file. The final target to make tab headers bigger with rounded corners.

.tab:selected .focus-indicator {
    -fx-border-radius: 10 10 0 0, 10 10 0 0;
     -fx-border-insets: -7 -7 -9 -8, -5 -5 -9 -6;
}

.tab-pane > .tab-header-area > .headers-region > .tab:selected{
    -fx-border-insets: 10 10 10 10, 10 10 10 10;
}

.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > 
.tab-label {
    -fx-alignment: CENTER;
    -fx-text-fill: -fx-text-base-color;
    -fx-padding:0 10 0 0;
}

.tab-header-area .tab{
    -fx-padding:4 10 5 10;
    -fx-border-radius: 10 10 0 0;
    -fx-background-radius: 10 10 0 0;
}

EDIT 2
I've checked it on two different PC: 1(Ubuntu),2(Centoc 71 and VM Win7). I tried to compile with oracle jdk - result is the same.

Its because its SELECTED -you can play around the selection model to change its style i guess — Elltz, Jun 07 '15 at 07:05
apply the same style to all the attributes e.g. selected, mouse hower etc.. for the tab — Thusitha Thilina Dayaratne, Jun 07 '15 at 07:09
`-fx-border-insets: -4 -4 -6 -5, -2 -2 -5 -3;` is the default on a selected tab with focus indicator. So you have to overwrite it. — aw-think, Jun 07 '15 at 08:43
@NwDx I have overwritten them as I needed to make them bugger (from our previous discussion). But it didn't help. — , Jun 07 '15 at 08:52
If you adopted my last example, then you have to change the part in `.tab-pane > .tab-header-area > .headers-region > .tab:selected ` and add there the border insets. Play with big values (10 10 10 10) first, so you see the difference. Because the focus-indicator is set to a zero px border. — aw-think, Jun 07 '15 at 08:54
@NwDx I did .tab-pane > .tab-header-area > .headers-region > .tab:selected{-fx-border-insets: 10 10 10 10, 10 10 10 10;}with positive and negative valuers. The problem is the same. — , Jun 07 '15 at 08:59
Can you please post the whole css part with tab's sections in your question? Thank you. — aw-think, Jun 07 '15 at 09:01

aw-think · Answer 1 · 2015-06-16T05:39:32.483

3

This is an already reported bug https://javafx-jira.kenai.com/browse/RT-40462

UPDATE The bug has moved to the openjdk bugtracking system:

https://bugs.openjdk.java.net/browse/JDK-8090243

Some of your code was redundant. So this should work.

.tab:selected .focus-indicator {
    -fx-border-radius: 10 10 0 0, 10 10 0 0;
    -fx-border-insets: -6 -9 -8 -8, -5 -8 -7 -7;
}
/*
.tab-pane > .tab-header-area > .headers-region > .tab:selected{
    -fx-border-insets: 0 1 1 0, 1 2 0 1, 2 3 0 2;
}
*/
.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label {
    -fx-padding:0 10 0 0;
}

.tab-header-area .tab{
    -fx-padding:4 10 5 10;
    -fx-background-radius: 10 10 0 0;
}

This will look like that:

enter image description here

UPDATE

But if you really only want to have more radius to the rounded corners, this is all you have to do:

.tab-pane > .tab-header-area > .headers-region > .tab {
    /* if outer border should be 10 radius */
    -fx-background-radius: 10 10 0 0, 9 9 0 0, 8 8 0 0;
}

.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
    -fx-border-radius: 9 9 0 0, 8 8 0 0;
}

UPDATE

This is what I get from your code. There is a strange behaviour when adding a newly created tab. So I made a gif to show how the mouseover is working.

enter image description here

UPDATE

edited Jun 16 '15 at 05:39

answered Jun 07 '15 at 10:53

aw-think

4,723
2
21
42

Firstly I want to thank you for your help. However, you didn't understand my question at all. The code I provided is 100% for what I need. No red colors, not special focus borders. Where did you take it from? The only problem I have with "strange corners". – Jun 07 '15 at 11:13
I thought it's releated to your other question (http://stackoverflow.com/questions/30690166/javafx-increase-space-between-text-and-tab-header-area-edge/30690434#30690434). If not, it's okay. – aw-think Jun 07 '15 at 11:17
I'm really sorry. I know how we programmer f*** to get what we need. And I've very thankful to you your attempt. But anyway...how can this problem be solved? – Jun 07 '15 at 11:20
So please explain to me, what you really need? Only a correct border radius? Even selected or not? – aw-think Jun 07 '15 at 11:23
Firstly - the code I provided in EDIT 1 is 100% what I need. However, it has some problems. When I create new tab near left top and right top some strange things appear and later disappear. Look at the images provided. How to remove "these strange things". – Jun 07 '15 at 11:26
No, the same problem. I think there is some rectangle at the back with white/grey background-color. These strange corners are the corners of this rectangle/pane/etc. But I can't understand what the rectangle it is. – Jun 07 '15 at 12:01
Maybe a bug or an issue with your graphics driver. Search for it, you will find a lot with problems on graphics card driver issues. – aw-think Jun 07 '15 at 12:02
I doubt about graphic adapter because I don't have any problems at all. But I will check on the different PC – Jun 07 '15 at 12:05
Do you compile with openjdk or oracle? – Jun 07 '15 at 12:06
@NwDx Are you adding buttons dynamically or just populate them once before showing the table? try this code https://gist.github.com/varren/051b5413a520955fc79a Is it still always rounded corners when you press "Add tab" button? – varren Jun 07 '15 at 22:33
@varren I tried it and updated my answer. This bug is already reported to the FX team https://javafx-jira.kenai.com/browse/RT-40462. So you are now not able to dynamically change style of tabs. – aw-think Jun 08 '15 at 06:03
Can you say how you created account on javafx-jira? – Jun 08 '15 at 06:33
@NwDx yep, i have exactly the same behavior. And it actually applies paddings, but not rounded corners. The funny part is that if you remove and add default styles it will update styles for all tabs except the last one added. Adding and removing styles after some delay will work for all tabs. – varren Jun 08 '15 at 06:36
@iJava No registration anymore, because the bug system is moving to jdk bug report system. Bugs in future should be go to this http://bugs.java.com/ or that https://bugs.openjdk.java.net/secure/Dashboard.jspa – aw-think Jun 08 '15 at 06:51
Could you be so kind to make a review from this issue? What is the request and when they are going to fix it? – Jun 08 '15 at 06:54
It is scheduled for Java 9. I think you have to choose another way to get what you want right now. – aw-think Jun 08 '15 at 07:01

varren · Answer 2 · 2015-06-08T06:42:11.010

2

So lets suppose that it's a bug, and you css is fine, the only solution i see for now is to remove and add default styles after some delay. Something like this:

 Tab tab = new Tab("Tab " + (tabs.getTabs().size() + 1));
 tabs.getTabs().add(tab);
 new Thread(()-> {
     try {
         Thread.sleep(50);
     } catch (InterruptedException e) {
         e.printStackTrace();
     }
     Platform.runLater(()->{
           tabs.getStyleClass().remove("tab-pane");
           tabs.getStyleClass().add("tab-pane");
     });
 }).start();

Nasty hack to be honest, but it works for me: enter image description here

edited Jun 08 '15 at 06:42

answered Jun 08 '15 at 06:22

varren

14,551
2
41
72

Do you have the same problem on your PC? I mean did you see these strange corners? – Jun 08 '15 at 06:24
yep, and as @NwDx discovered it is a bug https://javafx-jira.kenai.com/browse/RT-40462 – varren Jun 08 '15 at 06:27
How can I create account to read it? Who is jira administrator? – Jun 08 '15 at 06:30
Have no idea) i also have no access to this bug tracker) – varren Jun 08 '15 at 06:32
Hm, hopefully changing things in another thread is not making trouble since JavaFX runs like Swing in an own thread and every controls should be manipulated there. – aw-think Jun 08 '15 at 06:59
yep, but i use UI thread to make changes `Platform.runLater(()->{`. New thread is just for 50 ms delay to fire style remove-add later in main thread – varren Jun 08 '15 at 07:01
@varren Added a thread safe version of your solution. Thank you. – aw-think Jun 08 '15 at 07:37
@NwDx I think my version is pretty much thread safe. http://stackoverflow.com/questions/13784333/platform-runlater-and-task-javafx But always nice to see other implementations. thx – varren Jun 08 '15 at 07:47
@NwDx Your solution is doing the same look code in `TaskCallable.call()` =>`Task.runLater()` => `Platform.runLater(r);` I could post full stacktrace, but there is not much sence to be honest – varren Jun 08 '15 at 08:42
@varren Hm, this is very interesting, haven't heard about this before. The only difference maybe is, that service already has created a thread-pool and call the task by an executor. All created tasks from a service are already scheduled, so if one call service.start(), it will take a thread thats fully created and ready to run, while on your solution you create always a new thread. So thank you for digging deeper. – aw-think Jun 08 '15 at 10:06

score 0 · Answer 3 · answered Jul 04 '15 at 23:54

0

It is CornerRadii , it just increases & decreases

answered Jul 04 '15 at 23:54

Elltz

10,730
4
31
59

Could you provide an example how to do it? – Pavel_K Jul 11 '15 at 12:52
@varren Could you comment this post? – Pavel_K Jul 11 '15 at 12:54
who is varren?@JimJim2000 me? – Elltz Jul 11 '15 at 22:01
No, user `varren` is user `varren`, see the post above. Could you provide an example of what you mean in your answer? – Pavel_K Jul 12 '15 at 05:52

JavaFx: tab rounded corners

3 Answers3

Linked