1

I'm using JavaFX w/ CSS to develop and application. Right now, I currently have a list of tabs within a TabPane, and it looks like so:

enter image description here

What I'm trying to do is keep the Play, News, & Profiles tab on the left, however I want the "Add User" on the right, as shown:

enter image description here

The only styles I have applied are to remove padding and change the colors of things. How would I be able to move the "Add User" tab to the right like shown in the mockup?

FireController1847
  • 1,458
  • 1
  • 11
  • 26
  • 3
    not supported - no easy way to tweak the internal layout (happens in package-scope classes inside TabPaneSkin), at least none that I could find in a quick check – kleopatra Jan 19 '20 at 13:01
  • Unfortunately, TabPane doesn't provide such functionality. *An alternative workaround* - Make a custom Pane(or BorderPane), add a VBox on the top and add two children on it with *LEFT* and *RIGHT* alignment respectively. Add buttons(Play, News, Profiles, Add User) on those VBoxes based on your desired alignment. And setAction on those buttons and switch content-pane(should be shown in the center of your pane) regarding it. (and you can add animations to get the reflect as TabPane while switching panes). It may take a while to make it work - *but it will worth it* and customizable as well. – Shekhar Rai Jan 19 '20 at 15:26
  • That's unfortunate to hear. It's sad that there's no native solution to this, because so far everything in JavaFX has been a breeze to implement compared to swing because of CSS haha. Thanks, I'll probably take the alternate route of creating my own TabPane-like thing – FireController1847 Jan 19 '20 at 20:30

1 Answers1

-5

i dont know about javaFX never used it.

but css:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li.right{
 float:right;
}

li {
  float: left;
}


li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

.active {
  background-color: red;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home" class="active">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li class="right"><a href="#whatever">right</a></li>
</ul>

</body>
</html>

perhaps you get more support if you put more details in your question dont expect everyone tried JAVAFX but some people may have knowledge to answer question with more details and effort from you.

Hasan alattar
  • 347
  • 3
  • 19
  • 4
    Unfortunately JavaFX using their own, custom version of CSS and floating doesn't work. Thanks for the effort in this answer though! :) – FireController1847 Jan 19 '20 at 06:35
  • oh ok, JavaFX CSS does not support CSS layout properties such as float, position, overflow, and width. However, the CSS padding and margins properties are supported on some JavaFX scene graph objects. All other aspects of layout are handled programmatically in JavaFX code. In addition, CSS support for HTML-specific elements such as Tables are not supported since there is no equivalent construct in JavaFX. – Hasan alattar Jan 19 '20 at 06:38
  • 1
    https://stackoverflow.com/questions/24896498/how-to-right-align-a-button-in-java-fx-toolbar – Hasan alattar Jan 19 '20 at 06:39
  • Thanks for that Stack overflow link. I'll check it out tomorrow, I posted this right before bed haha – FireController1847 Jan 19 '20 at 06:41