livid ocean
I want to create something like that (see screnshot). But it appears that a button in Godot doesn't handle children. It does not resize automatically to fit them and so on and so forth.
I've seen people talking about using a TextureButton but it seem a bit convoluted for just using controls inside no? What would be the best course of action here? Is this something planned as a new feature for Godot Button in the future?
wise siren
You can set the button and the margincontainer as siblings of the control, with the button covering the rest completely. Then give it a transparent Stylebox
Or maybe better, a transparent color in a normal stylebox, so it has some indications when selected or hovering
livid ocean
I thought about this but the label is dynamic, and so I don't really know in advance the size of the label.
I could then decide to compute the label size by importing the font, computing the width, adding the padding, adding the space interval from the hbox, adding the progress bar width and so on and so forth, but I was thinking that I was over-engineering way too much for something simple.
I come from a web dev horizon so I was thinking that I wasn't looking at the issue with the right perspective
wise siren
You can let the button take its size, then match on that size
You need to wait one frame:
await get_tree().process_frame
%MarginContainer.custom_minimum_size = button.size
There are other ways of course; you could detect clicks on the container for example, but then you'd lose automatic focus, hover/focus styles, and so on
livid ocean
I may have mis-understood something. Because until now, the button didn't resize to reflect what was inside it. Here it would? How?
wise siren
Ah sorry, the opposite; you'd set the button size from the marginContainer
I was coming back to say that, went back to work then realized I switched them up
livid ocean
Oh okay! I see!
It should work indeed. Especially if I paint that in the right order so that the button appear behind.
I will try that this evening. Thanks!
Still. do you know if allowing more composition in Button is something planned?
wise siren
No, probably not. A button displays text and an icon; on the web, it's similar, if you wanted to a complex shape interactive, you'd either overlay an invisible button or a link on top, or you'd assign an onclick() behavior in code
Just like in Godot, if you just assign onclick without overlaying a button or anchor, you would lose on accessibility features like hover or focus, and would have to code those in yourself
livid ocean
Not sure to follow, you can put whatever you want in a button? 🤔
It's just in Godot that this design pattern isn't valid by default apparently? But I remember in your lesson that you talk about how HTML is different than Godot UI. So maybe that's something that I need to re-read a bit more
wise siren
You're correct, I forgot that you can add more in a button than I remembered (though divs are not allowed -- but browsers are permissive). But for sure, you can use <span/> and decorate them to be whatever you like, it's true
I just have the habit of overlaying anchors/buttons, but I forgot the exact reasons over time
livid ocean
Well, I forgot about div. But we clearly have an issue for links. When you try to put an anchor inside another one
In this case, I also use the sibling with a absolute position inset
And you could have the same issue with buttons inside buttons
(which is not something you would want to do... but sometimes... well sometimes they want weird stuff)
wise siren
Or sometimes you use an element that has links for other contexts, but is in this case used as a button (e.g, card in search results)
Overlays also yield more accessible designs.
If you have a very complex design, which has multiple elements, accessiblity-wise it's nicer to have a link "read more" which is overlayed in CSS to cover the entire card, rather than embed everything within the link
livid ocean
But for standard use cases with just a bit of layout, I don't see any issues
wise siren
Yea, it's fine
livid ocean
Well, maybe I will ask later on in the godot issues for a ButtonContainer 😄
But I need first to get a good feel for the UI and what exist already!
Anyway thanks for the answer! I put the question as solved! 👍
wise siren
No probs! Sorry for the confusion, I shouldn't answer while focused elsewhere
livid ocean
Oh I'm glad you did nonetheless! Sorry to disturb you while you write those awesome courses 😛
nimble ice
A Button is a Control, so it has the same anchor logic as other Controls. Mainly, the part you care about is that it has a position & size, and these properties can govern how child Controls behave based on those childrens' anchors (not their "child of a container" layout behavior). So, yes, you can have children 'care about' the rect of your Button, they just do that via their anchor settings alone. If you put a container as a child of a button, and set that container's anchor preset to "full_rect" as shown in my included image, it will anchor itself to the Button's bounds. Then, all children in the container would follow container logic as normal within that container.
However, for what you seem to be trying to do, I'd do this, instead:
