Slate - Center items, force sizes

Development Programming & Scripting UI
, , , ,
1

Hi,

I am having fun with Slate designing layouts.

However, the API seems designed around fluid layout : a SBorder will wrap an element, but there is no apparent way to force its size in a convenient manner. Sure, I can use .Padding, but it feels like a hack. Why is there no .Width or .Height on widgets ?

The same goes for simple positioning of items. How can I center text ? How can I constrain the width and height of an item ? Can I make an “overlay” item that would be floating on top of other items ?

I’m not sure whether are just rants, or features that I missed, or features that really lack. What do you think ?

2

The simplest way to force the size of a widget would to to use an SBox and set the width and height override to a fixed value, ensuring that the HAlign and VAlign of the SBox are both set to Fill (I believe they are by default).

SNew(SBox)
.WidthOverride(600.0f)
[
    YourWidget
]

To center a widget, you would set the HAlign of the appropriate container element (eg, SHorizontalBox) to HAlign_Center.

Slate contains an SOverlay type which can float above other widgets.

1 Like
3

Ah, that’s a fairly common mistake.

I forget how strange that logic is when you first see it. I’m used to it, since before I started working with Slate, I did a fair bit of work with wxWidgets, and the sizing model of wxWidgets is not too dissimilar to that used by Slate (both use very fluid proportional based box sizers, which control the size and alignment of their child widgets).

4

You did it again !

Thanks a lot, it does work. I didn’t understand how the alignment worked until now, I thought the VAlign/Halign were applying to the slot itself, not the contents…

5

i am a bit puzzled about this as well. I have something like this

SNew(SVerticalBox)
+ SVerticalBox::Slot()
.AutoHeight()
[
	SNew(SHorizontalBox)
	+ SHorizontalBox::Slot()
	.HAlign(HAlign_Left)
	.MaxWidth(90.0f)
	.Padding(0, 60, 40, 10)
	[
                 SNew(STextBlock)
		 .Text(LOCTEXT("MyStrings", "VariableName"))
	]
	+ SHorizontalBox::Slot()
	.HAlign(HAlign_Fill)
	.AutoWidth()
	//.MaxWidth(300.0f)
	.Padding(0, 60, 0, 10)
	[
		SAssignNew(MyNameComboBox, SComboBox<TSharedPtr<FString> >)
											.ContentPadding(FMargin(0.0f, 2.0f))
		.OptionsSource(&ServerNameList)
		.OnGenerateWidget(this, &SMyHelper::HandleNameComboBoxGenerateWidget)
		.OnSelectionChanged(this, &SMyHelper::HandleNameComboBoxSelectionChanged)
		.IsEnabled(this, &SMyHelper::HasNamesList)
		[
			SNew(STextBlock)
			.Text(this, &SMyHelper::HandleNameComboBoxContentText)
		]
	]
]

my problem is that I would like to be able to set the combo box to be filling the width of the my window starting from the “VariableName” text block

yet the combobox is only as wide as the string contained within and the width changes depending on string in the combo box. How do I fix that ?

1 Like
6

Overall it really depends in what container whole structure you posted is. If it’s in something that is using AutoWidth, you may not get what you’re looking for. But here’s something that should work like you described (I used SButton instead SComboBox). You can also play around with FillWidth(Coef) properties to get desired width ratio of two (or more) widgets.

SNew(SVerticalBox)
				+ SVerticalBox::Slot()
				.AutoHeight()
				[
					SNew(SHorizontalBox)
					+ SHorizontalBox::Slot()
					// Using AutoWidth should do the trick here
					.AutoWidth()

					// And while using AutoWidth alignment within slots does not matter
					//.HAlign(HAlign_Left)

					// Max width seems to be doing something weird with all other slots sizes...
					//.MaxWidth(90.0f)
					
					.Padding(0, 60, 40, 10)
					[
						SNew(STextBlock)
						.Text(FText::FromString("Variable name"))
					]
					+ SHorizontalBox::Slot()
					// Containers like S*Box'es have thier V/HAlign properties set to _Fill, so no need to redefine it
					//.HAlign(HAlign_Fill)

					// If you want widget to fill all allocated space you dont use AutoWidth
					//.AutoWidth()
					.Padding(0, 60, 0, 10)
					[
						SNew(SButton)
					]
				]