How to make a bar that sizes itself just to fit the included content?

[gwhitney]

I strongly suspect that with all of the bar and css properties, there is a way to make a vertical bar attached to the right side of the screen that will be just tall enough to include all of its included items stacked vertically (and will grow as more items are added). However, I have not yet figured out how to do these things.

I can get a vertical bar that is say 25% the height of the screen in the bottom right corner with

#Api2
bar {
  edge = "right"
  size = "25%"
  layer = "top"
  taskbar {
    cols = 1
  }
  widget "startmenu.widget"
}

#CSS
window#sfwbar {
  -GtkWidget-valign: end;
}

but when there are just a few applications open, there's empty space at the bottom of the bar, and when there are lots open, some of them are "lost" below the bottom of the screen. I'd like to make the bar "shrink wrap" the taskbar and start menu, and I'd like the bar to place the startmenu widget below the taskbar instead of to its right as is occurring now. For the latter point, I also tried -GtkWidget-direction: bottom; in the window#sfwbar block, but it did not seem to have any effect.

Thanks for any guidance, examples, or pointers to bits of the documentation I missed or didn't understand properly.

[gwhitney]

To answer part of my question, it appears that I can stack the items vertically in the bar via

grid#layout {
  -GtkWidget-direction: bottom;
}

Still trying to get the size of the bar to be just big enough for its contents.

[gwhitney]

I've sort of hacked it for now by making the bar 100% tall and putting a transparent expanding label above the taskbar, but I'd much rather just set it up so that the bar is just the natural size of its contents, so if anyone knows how to do that please share.

#Api2
bar {
  edge = "right"
  size = "100%"
  layer = "top"
  label {
    style = "filler"
    value = ""
  }
  taskbar {
    style = "task"
    cols = 1
  }
  widget "startmenu.widget"
}

#CSS
window#sfwbar {
  background: transparent;
  -GtkWidget-valign: end;
}
grid#layout {
  -GtkWidget-direction: bottom;
}
grid#task {
  -GtkWidget-direction: top;
}
label#filler {
  -GtkWidget-vexpand: true;
  background: transparent;
}

[LBCrion]

The size of the bar will be set to the width of the widest item, so you would want to align the sizes of all items. Generally this is fine using the thickness hint variable, I.e.: Set ThicknessHint = "20px"; In the main config. This is exposed in css as @bar_thickness variable. So you can set size of widgets using something like this: max-width: ***@***.***_thickness * 0.8);

…

On Sat, 25 Apr 2026, 03:49 Glen Whitney, ***@***.***> wrote: To answer part of my question, it appears that I can stack the items vertically in the bar via grid#layout { -GtkWidget-direction: bottom; } Still trying to get the size of the bar to be just big enough for its contents. — Reply to this email directly, view it on GitHub <#465 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASHPFFFEVRPKVQKSUNV7EXT4XQRSNAVCNFSM6AAAAACYFY64MKVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTMNZQHA3DGNI> . Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS <https://github.com/notifications/mobile/ios/ASHPFFHMYQELQQQBG7XGIKL4XQRSNA5CNFSNUABIM5UWIORPF5TWS5BNNB2WEL2ENFZWG5LTONUW63SDN5WW2ZLOOQXTCNRXGA4DMMZVUZZGKYLTN5XKU43VMJZWG4TJMJSWJJLFOZSW45FKMZXW65DFOJPWS33T> and Android <https://github.com/notifications/mobile/android/ASHPFFGIMUEKNIYBIJY2NYT4XQRSNA5CNFSNUABIM5UWIORPF5TWS5BNNB2WEL2ENFZWG5LTONUW63SDN5WW2ZLOOQXTCNRXGA4DMMZVUZZGKYLTN5XKU43VMJZWG4TJMJSWJJLFOZSW45FOMZXW65DFOJPWC3TEOJXWSZA>. Download it today! You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[gwhitney]

Sorry if I wasn't clear, what I am looking to do is to have the height of the vertical bar be just enough to enclose all of its contents (the widgets and the taskbar with however many apps happen to be open). If I set the "size" property of the bar, it is a fixed height, so there is either blank space if there are not many apps open, or some of the taskbar lines disappear if there are too many to fit. I'd like it just to adjust in height to its current content. (I am not having any trouble with the width of the vertical bar, it is working nicely.) Thanks for any advice.

[LBCrion]

Our messages crossed. I thought you wanted to control the width of the vertical bar. For height, you can set the height explicitly, but you can't currently set the vertical size of the bar to be dynamic. You can blueberry hack it by setting a transparent bar background. Placing all widgets in a grid with a background colour set and adding an expanding blank label below the grid. This way any extra space will be transparent, so you get a visual effect of a dynamically sized bar.

…

On Sat, 25 Apr 2026, 16:52 Glen Whitney, ***@***.***> wrote: I've sort of hacked it for now by making the bar 100% tall and putting a transparent expanding label above the taskbar, but I'd much rather just set it up so that the bar is just the natural size of its contents, so if anyone knows how to do that please share. #Api2 bar { edge = "right" size = "100%" layer = "top" label { style = "filler" value = "" } taskbar { style = "task" cols = 1 } widget "startmenu.widget" } #CSS window#sfwbar { background: transparent; -GtkWidget-valign: end; } grid#layout { -GtkWidget-direction: bottom; } grid#task { -GtkWidget-direction: top; } label#filler { -GtkWidget-vexpand: true; background: transparent; } — Reply to this email directly, view it on GitHub <#465 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASHPFFHT2WCIRYNUNIUM2VL4XTNL5AVCNFSM6AAAAACYFY64MKVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTMNZRGI2TKNQ> . Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS <https://github.com/notifications/mobile/ios/ASHPFFARRZUV7WBWBBSWROL4XTNL5A5CNFSNUABIM5UWIORPF5TWS5BNNB2WEL2ENFZWG5LTONUW63SDN5WW2ZLOOQXTCNRXGEZDKNJWUZZGKYLTN5XKU43VMJZWG4TJMJSWJJLFOZSW45FKMZXW65DFOJPWS33T> and Android <https://github.com/notifications/mobile/android/ASHPFFGGR242E3TRUCAEYN34XTNL5A5CNFSNUABIM5UWIORPF5TWS5BNNB2WEL2ENFZWG5LTONUW63SDN5WW2ZLOOQXTCNRXGEZDKNJWUZZGKYLTN5XKU43VMJZWG4TJMJSWJJLFOZSW45FOMZXW65DFOJPWC3TEOJXWSZA>. Download it today! You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[gwhitney]

Right, that's what I am now doing, but as you say it's a hack. With all of the CSS control etc. there currently really isn't any way just to tell the window#sfwbar and/or grid#layout to adopt its natural size? If that's the current situation, I wish I were more knowledgeable about GTK and how it does layout, I would try to do a PR to add that ability. But sadly I think the GTK learning curve is going to be a bit much for me to take that on at the moment. (I saw the line "If the size request in a given direction is -1 (unset), then the “natural” size request of the widget will be used instead." on https://docs.gtk.org/gtk3/method.Widget.set_size_request.html and so tried the bar property size = -1 but that didn't work, either -- the whole bar just disappeared).

So OK, for now I will use the "transparent filler label" hack and hope that at some point either I or someone else has the chance to allow dynamic sizing of the bar, like xfce4-panel does (I am switching to sfwbar because xfce4-panel doesn't (yet?) work well under wayland.)

[LBCrion]

This would be a bit more complex, especially since the bar is a layer shell window. I think we'll need to handle get_preferred_height method of a window, get the preferred size is the child grid, adjust for extents, constrain for monitor size and then resize the layer shell window. It works be doable. I'll try to take a stab at it next week.

…

On Sat, 25 Apr 2026, 17:18 Glen Whitney, ***@***.***> wrote: Right, that's what I am now doing, but as you say it's a hack. With all of the CSS control etc. there currently really isn't any way just to tell the window#sfwbar and/or grid#layout to adopt its natural size? If that's the current situation, I wish I were more knowledgeable about GTK and how it does layout, I would try to do a PR to add that ability. But sadly I think the GTK learning curve is going to be a bit much for me to take that on at the moment. (I saw the line "If the size request in a given direction is -1 (unset), then the “natural” size request of the widget will be used instead." on https://docs.gtk.org/gtk3/method.Widget.set_size_request.html and so tried the bar property size = -1 but that didn't work, either -- the whole bar just disappeared). So OK, for now I will use the "transparent filler label" hack and hope that at some point either I or someone else has the chance to allow dynamic sizing of the bar, like xfce4-panel does (I am switching to sfwbar because xfce4-panel doesn't (yet?) work well under wayland.) — Reply to this email directly, view it on GitHub <#465 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASHPFFF2NSWJXMI6K5D3N3T4XTQMRAVCNFSM6AAAAACYFY64MKVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTMNZRGI3DQNA> . Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS <https://github.com/notifications/mobile/ios/ASHPFFDIRHVWTXV2HPJNMND4XTQMRA5CNFSNUABIM5UWIORPF5TWS5BNNB2WEL2ENFZWG5LTONUW63SDN5WW2ZLOOQXTCNRXGEZDMOBUUZZGKYLTN5XKOY3PNVWWK3TUUVSXMZLOOSVGM33PORSXEX3JN5ZQ> and Android <https://github.com/notifications/mobile/android/ASHPFFBQDHLHC6WYXPREDL34XTQMRA5CNFSNUABIM5UWIORPF5TWS5BNNB2WEL2ENFZWG5LTONUW63SDN5WW2ZLOOQXTCNRXGEZDMOBUUZZGKYLTN5XKOY3PNVWWK3TUUVSXMZLOOSXGM33PORSXEX3BNZSHE33JMQ>. Download it today! You are receiving this because you commented.Message ID: ***@***.***>

[LBCrion]

Dynamic sizing should now work. Can you test the latest git version please with "size = auto" in your config?

…

On Sat, Apr 25, 2026 at 6:07 PM Lev Babiev ***@***.***> wrote: This would be a bit more complex, especially since the bar is a layer shell window. I think we'll need to handle get_preferred_height method of a window, get the preferred size is the child grid, adjust for extents, constrain for monitor size and then resize the layer shell window. It works be doable. I'll try to take a stab at it next week. On Sat, 25 Apr 2026, 17:18 Glen Whitney, ***@***.***> wrote: > Right, that's what I am now doing, but as you say it's a hack. With all > of the CSS control etc. there currently really isn't any way just to tell > the window#sfwbar and/or grid#layout to adopt its natural size? If that's > the current situation, I wish I were more knowledgeable about GTK and how > it does layout, I would try to do a PR to add that ability. But sadly I > think the GTK learning curve is going to be a bit much for me to take that > on at the moment. (I saw the line "If the size request in a given direction > is -1 (unset), then the “natural” size request of the widget will be used > instead." on > https://docs.gtk.org/gtk3/method.Widget.set_size_request.html and so > tried the bar property size = -1 but that didn't work, either -- the > whole bar just disappeared). > > So OK, for now I will use the "transparent filler label" hack and hope > that at some point either I or someone else has the chance to allow dynamic > sizing of the bar, like xfce4-panel does (I am switching to sfwbar because > xfce4-panel doesn't (yet?) work well under wayland.) > > — > Reply to this email directly, view it on GitHub > <#465 (reply in thread)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/ASHPFFF2NSWJXMI6K5D3N3T4XTQMRAVCNFSM6AAAAACYFY64MKVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTMNZRGI3DQNA> > . > Triage notifications, keep track of coding agent tasks and review pull > requests on the go with GitHub Mobile for iOS > <https://github.com/notifications/mobile/ios/ASHPFFDIRHVWTXV2HPJNMND4XTQMRA5CNFSNUABIM5UWIORPF5TWS5BNNB2WEL2ENFZWG5LTONUW63SDN5WW2ZLOOQXTCNRXGEZDMOBUUZZGKYLTN5XKOY3PNVWWK3TUUVSXMZLOOSVGM33PORSXEX3JN5ZQ> > and Android > <https://github.com/notifications/mobile/android/ASHPFFBQDHLHC6WYXPREDL34XTQMRA5CNFSNUABIM5UWIORPF5TWS5BNNB2WEL2ENFZWG5LTONUW63SDN5WW2ZLOOQXTCNRXGEZDMOBUUZZGKYLTN5XKOY3PNVWWK3TUUVSXMZLOOSXGM33PORSXEX3BNZSHE33JMQ>. > Download it today! > You are receiving this because you commented.Message ID: > ***@***.***> >

[gwhitney]

Definitely the size of the bar now adapts to the contents, thanks so much! But I can't get it to sit at the bottom right of the screen and grow upwards. With the fixed size, I used

bar {
  edge = "right"
  size = "80%"
}
#CSS
window#sfwbar {
  -GtkWidget-valign: end;
}
grid#layout {
  -GtkWidget-direction: bottom;
}

and the bottom of the bar would be at the bottom of the screen. When I change that 80% to "auto", it does shrink the bar to the contents, but it also pushes some of the bar off the bottom of the screen, and the more apps I open up (so the greater the taskbar height), the more of the bar gets pushed off the bottom of the screen and becomes unusable. I can't quite tell if the top of the bar is staying fixed and so everything just get pushed down by the new height of the taskbar, or if the top of the bar is moving up a little bit, but definitely the top of the bar is not moving up much so that by the time I get to eight apps open, not even the whole taskbar fits on the screen and I can't see any of my other widgets below the taskbar.

Are there some other CSS settings I should be using to get the bar at the bottom right corner, but just tall enough to include all of its content?

[gwhitney]

Oops, no, I spoke too soon. I commented out

# window#sfwbar {
#  -GtkWidget-valign: end;
# }

so that the taskbar is back to the center, and now that definitely the whole bar is visible I can see that sfwbar is shrinking the bar too small: a little bit is cut off at the bottom when I first start (with no apps open), and then as I open apps the bar does not get any taller to accommodate the new items in the taskbar, and so progressively more of the bar gets cut off at the bottom, and it overflows (in the sense that not even all of the taskbar items are visible) at eight apps open.

So as a naive diagnosis, it does not seem to be recomputing the size of the entire bar as the taskbar grows vertically with more apps open (although that doesn't quite explain why immediately at startup a little bit of the bar is cut off at the bottom).

As long as I am providing feedback (don't want to seem ungrateful for your excellent efforts on this!) I should mention that the tiny window (I think it is one pixel wide) that stays on screen when the bar is hidden, I believe to provide a mechanism for the bar to reappear when the mouse goes to the edge of the screen, has become very short vertically with the size = "auto" option, making a tricky target for popping the bar up again to use it. In my opinion the vertical dimension of this "popping target" vestigial window should track the height of the bar itself.

So unfortunately the size = "auto" option doesn't seem ready for actual use yet. I will go back to the "transparent filler label" hack and if you happen to have time at some point to further develop size = "auto" I will gratefully adopt it. Thanks again!

[LBCrion]

By the way of an update, I'm working on this. Just need to sort out taskbar resize notifications.

…

On Tue, 28 Apr 2026, 18:02 Glen Whitney, ***@***.***> wrote: Oops, no, I spoke too soon. I commented out # window#sfwbar { # -GtkWidget-valign: end; # } so that the taskbar is back to the center, and now that definitely the whole bar is visible I can see that sfwbar is shrinking the bar too small: a little bit is cut off at the bottom when I first start (with no apps open), and then as I open apps the bar does not get any taller to accommodate the new items in the taskbar, and so progressively more of the bar gets cut off at the bottom, and it overflows at eight apps open. So as a naive diagnosis, it does not seem to be recomputing the size of the entire bar as the taskbar grows vertically with more apps open (although that doesn't quite explain why immediately at startup a little bit of the bar is cut off at the bottom). As long as I am providing feedback (don't want to seem ungrateful for your excellent efforts on this!) I should mention that the tiny window (I think it is one pixel wide) that stays on screen when the bar is hidden, I believe to provide a mechanism for the bar to reappear when the mouse goes to the edge of the screen, has become very short vertically with the size = "auto" option, making a tricky target for popping the bar up again to use it. In my opinion the vertical dimension of this "popping target" vestigial window should track the height of the bar itself. So unfortunately the size = "auto" option doesn't seem ready for actual use yet. I will go back to the "transparent filler label" hack and if you happen to have time at some point to further develop size = "auto" I will gratefully adopt it. Thanks again! — Reply to this email directly, view it on GitHub <#465 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASHPFFHFOLIVVYQJX5MR65D4YDP3TAVCNFSM6AAAAACYFY64MKVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTMNZUGYZDMOI> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you commented.Message ID: ***@***.***>

[LBCrion]

Can you test the latest git version when you have a chance please? It should be better behaved.

…

On Tue, 28 Apr 2026, 18:02 Glen Whitney, ***@***.***> wrote: Oops, no, I spoke too soon. I commented out # window#sfwbar { # -GtkWidget-valign: end; # } so that the taskbar is back to the center, and now that definitely the whole bar is visible I can see that sfwbar is shrinking the bar too small: a little bit is cut off at the bottom when I first start (with no apps open), and then as I open apps the bar does not get any taller to accommodate the new items in the taskbar, and so progressively more of the bar gets cut off at the bottom, and it overflows at eight apps open. So as a naive diagnosis, it does not seem to be recomputing the size of the entire bar as the taskbar grows vertically with more apps open (although that doesn't quite explain why immediately at startup a little bit of the bar is cut off at the bottom). As long as I am providing feedback (don't want to seem ungrateful for your excellent efforts on this!) I should mention that the tiny window (I think it is one pixel wide) that stays on screen when the bar is hidden, I believe to provide a mechanism for the bar to reappear when the mouse goes to the edge of the screen, has become very short vertically with the size = "auto" option, making a tricky target for popping the bar up again to use it. In my opinion the vertical dimension of this "popping target" vestigial window should track the height of the bar itself. So unfortunately the size = "auto" option doesn't seem ready for actual use yet. I will go back to the "transparent filler label" hack and if you happen to have time at some point to further develop size = "auto" I will gratefully adopt it. Thanks again! — Reply to this email directly, view it on GitHub <#465 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASHPFFHFOLIVVYQJX5MR65D4YDP3TAVCNFSM6AAAAACYFY64MKVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTMNZUGYZDMOI> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you commented.Message ID: ***@***.***>

[gwhitney]

Indeed, just setting size = "auto" is now working nicely for me using the git main branch. Thank you!