ProgressBar within Stack-Layout

Question

Hello, I have created a custom Node to view a Text centered in a ProgressBar by using the Stack-Layout. All works, but the ProgressBar always has a invisible space on the left and the right side and I do not know, how to delete this space:
def progressBar:ProgressBar=ProgressBar {
progress: ...
   def text:Text = Text{
       content: actualProgress
def rectangle:Rectangle = Rectangle{
    width: 200
    height: 100
    fill: Color.BLACK
Stage {
    width: 400
    height: 150
    scene: Scene {
            content: HBox {
            spacing: 10
            content: [
            Stack {
           // this does only lay out the text to left side, but not the progressBar..strange
           nodeHPos: HPos.LEFT
           // Unfortunately, the progressBar is not placed at the beginning of the HBox -
          // there is always a invisible gap at the progressBars left bound and right bound
           content: [progressBar,text]
         // the strange thing is, when using rectangle instead of progressBar, then the layout is ok,
         // as there is no gap at the rectangles left and right bound
        // content: [rectangle,text]
}When using a Rectangle instead of the control "ProgressBar" then no invisible space occurs, which is okay.
Is there any trick to lay out the progressBar without having a trailing space on the left and right side of this component when using the Stack-Layout?

Answer 1

Hello,
use this code and you will see, what I mean:
import javafx.scene.Node;
import javafx.scene.CustomNode;
import javafx.scene.control.ProgressBar;
import javafx.scene.text.Text;
import javafx.scene.layout.Stack;
public class MyProgressBar extends CustomNode{
public var progressBarTitle:String;
def progressBar:ProgressBar=ProgressBar { progress:0.0 }
def text:Text = Text{ content: progressBarTitle }
override protected function create(): Node {
    Stack  { content: [progressBar,text] }
Now, I want to make use of my CustomNode:
import myPackage.MyProgressBar;
def myProgressBar:MyProgressBar= MyProgressBar{
    progressBarTitle: "Hello Progressbar"
Stage {
    width: 400
    height: 150
    style: StageStyle.DECORATED
    scene: Scene {
            content: VBox { content: [ myProgressBar ] }
}You will see, that the progressBar is not on the top-left corner of the scene. Am I right? Why is that so? How can I solve that?