How to align widgets in bar to the right?

[ghistes]

Hi,

I have tried everything I can think of but I cannot get it to work.

Consider this:

    (defwidget bar []
      (box :class "bar" :space-evenly false
        (hubba)
        (bubba)))

    (defwidget hubba[]
      (box :class "hubba"
        "hubba"))

    (defwidget bubba[]
      (box :class "bubba"
        "bubba"))

    (defwindow bar
      :monitor 0
      :windowtype "dock"
      :geometry (geometry :x "0%"
                          :y "0%"
                          :width "1920px"
                          :height "10px"
                          :anchor "top center")
      :reserve (struts :side "top" :distance "4%")
      (bar))

with this styling:

   * {
      all: unset;
    }

    .bar {
      background-color: green;
      color: blue;
    }

    .hubba {
      background-color: red;
    }
    .bubba {
      background-color: yellow;
    }

This gives you a bar with two widgets aligned to the left of the bar.

Now I want excatly that but with the widgets to the right.

So I tried:

    (defwidget bar []
      (box :class "bar" :space-evenly false :halign "end"
        (hubba)
        (bubba)))

And this aligns the widgets to rights (yeah!) but now the bar does not span the monitor anymore.

So I tried this:

   (defwidget bar []
      (box :class "bar" :space-evenly false :halign "end" :hexpand true
        (hubba)
        (bubba)))

But that does not change anything...

So how is this done? There is no documentation, no examples no nothing - and I probably won't get an answer here as well...

[elkowar]

1. There is documentation
2. There are examples, as well as other people's configs.
3. What exactly are you trying to achieve, and what is happening instead? "The bar does not span the monitor anymore" - do you mean the window doesn't fill the width of the screen, or do you mean the contents of the window? Please provide some screenshots or some other way of actually understanding your issue.

[ghistes]

Many thanks for coming back to me.

What I would like to achieve in this little exercise is a bar that is a wide as the monitor and displays the strings "hubba" and "bubba" at the right side.

The way I am trying to achieve this is to have a window, inside the window a box that is supposed to to be as wide as the window and inside this box 2 other boxes, containing "hubba" and "bubba" respectively.

In order to see how wide the elements are I have configured the outer box to have a green background and the other two boxes are red and yellow.

If I run the code I posed above I get almost what I want: There are the strings "hubba" and "bubba" display to the left and a green bar across the monitor, showing that the surrounding box is really as wide as the monitor (or the windows).

But what I cannot get to work is to have these strings displayed at the right side.

I can add a :halign "end" to the surrounding box and that makes the strings appear on the right side - but now (and this is what I don't understand) there is no green background visible anymore. So it seems the surrounding box (the bar) that earlier was as wide as the monitor has now shrunk to accomodate only the two childs.

And as I have discovered later the same thing happens when you use :halign "start".

So if you don't use any halign the surrounding box is as wide as the monitor, if you use halign the box shrinks and so I cannot find a way to have a bar that displays entries aligned to the right.

I am not sure if this was understandable I can make some scrreenshots tomorrow...

[ghistes]

My main problem is that I don't have any experience with gtk and so the exisiting documentation does not make a lot of sense to me.
It is far from obvious what the configuration directives (and even the widgets!) really do and how they interact.
I think you don't even really realize how much gtk knowledge you assume from readers of your documentation...

To illustrate consider this scss:

.bar {
  background-color: green;
}

.hubba {
  color: blue;
  background-color: red;
}

.bubba {
  color: blue;
  background-color: yellow;
}

and this this yuck:

(defwidget bar []
  (box :class "bar" :width 500 :halign "end"
    (box :class "hubba" :halign "end" "hubba")
    (box :class "bubba" :halign "end" "bubba")
    ))

(defwindow bar
  :monitor 0
  :windowtype "dock"
  :geometry (geometry :x "0%"
                      :y "0%"
                      :width "1920"
                      :height "10px"
                      :anchor "top center")
  :reserve (struts :side "top" :distance "4%")
  (bar))

This produces this;

But my question here is: Why is "hubba" not right next to "bubba"?

So you think, well, maybe space-evently is the problem - let's set that to false:

 (defwidget bar []
  (box :class "bar" :width 500 :halign "end" :space-evenly false
    (box :class "hubba" :halign "end" "hubba")
    (box :class "bubba" :halign "end" "bubba")
    ))

And that gives you (surpisingly):

So why has adding ":space-evently" now makes all the sub-boxes appear to the left again?

All I want to understand is how to control the position of entries on a bar, but I simply cannot make a bar where all the entries are aligned to the right and I cannot find any examples for that either.

So could you please explain how that is supposed to work?

[ShaheemTP]

But my question here is: Why is "hubba" not right next to "bubba"?
So you think, well, maybe space-evently is the problem - let's set that to false:

 (defwidget bar []
  (box :class "bar" :width 500 :halign "end" :space-evenly false
    (box :class "hubba" :halign "end" "hubba")
    (box :class "bubba" :halign "end" "bubba")
    ))

So why has adding ":space-evently" now makes all the sub-boxes appear to the left again?

I'm going through the same problem here. After wasting a long time trying different combinations of

:halign "end|start|fill|center|baseline"

and

:space-evenly false|true

and even changing the widget type(box,centerbox,label, etc.), on both the widget and it's parent widget, in my config, I finally tried unsetting the :width of the parent widget, which brought the child widgets close to each other as I wanted.
In your case, that would be changing:

(box :class "bar" :width 500 :halign "end" :space-evenly false

into:

(box :class "bar" :halign "end" :space-evenly false

However, this removes the :width property of the parent widget(obviously), and gives it the combined width of the children. I don't know if this is the intended way to do this, or just a work-around to a bug.
I don't understand the purpose of :halign "end", since combining it with :space-evenly false brings the widgets to the left side instead of the right.

I think you don't even really realize how much gtk knowledge you assume from readers of your documentation...

I agree. The docs need some renovation. I understood more things from Dharmx's tutorial than the docs, and had to learn a lot of other stuff by trial and error. Those docs need some more time dedicated to them, or, it would be a good idea to let the users contribute to rewriting it in a more understandable way.