How can I prevent Text flicker, with a Center Justification EditableTextbox

Development Programming & Scripting UI
,
1

I have an [EditableTextbox] in my menu. I plan to have the player be able to select text in that box for various reasons, including copy and pasting from one [EditableTextbox] to another.

I need the text displayed in these boxes to be centered, and the “editable area” to fill the entire horizontal area of the overlay widget it is in. This will allow a wide area in which the player can click into to acquire focus on the [EditableTextbox]. Which is important, because if the editable area is too close to the actual text in the [EditableTextbox] it will make it annoying and frustrating to drag select the whole text.

I can achieve this by setting the [Slot]'s [Horizontal Alignment] to Fill, and the [Font]'s [Justification] to Center. But when I do this, When the menu is first created(and also when I click compile in the editor) the text in the [EditableTextbox] starts [Left to Right] for an instant, then changes to [Center]. This results in a fast, be still very much noticeable flicker.

Is there any way to force the [EditableTextbox] to be Center justified by default? or is there a different way of centering the text in an [EditableTextbox] with a [Horizontal Alignment] that is set to Fill?

2

Upvote, I have the same issue. AlignTextLeft justification works fine, the other two have one frame flickering, somewhat teleporting the text from a slightly left position to the current one. Seems like an Engine bug.

1 Like
3

You can try using the “Force Layout Prepass” node, with the container or the containers parent as the target, and calling it immediately after setting the text.
That helped for me when I ran into this issue but with a regulare Text element that was supposed to be right aligned.