How do I set the font size of the UMG ComboBox (String)?

Also check out the answer by rocweb. It works very well and is incredibly simple to implement.

  1. Create a Horizontal Box onto either the canvas or the root if you deleted the canvas.
  2. If you want to give your Combo Box a label, place text inside the Horizontal Box, otherwise proceed to step 4
  3. Place a “spacer” inside the Horizontal Box
  4. Place a “scale box” inside the Horizontal Box
  5. Place a Combo Box(string) inside the scale box

Adjusting the scaling for the combo:

  • Click on the “scale box” you added into step 4.
  • On the details tab, you will see the horizontal and vertical alignments as well as size. Choose “Fill” for size and then select your h/v alignment. Best course for larger sizes is to horizontal and vertically fill.
  • Directly below that you will see the “stretching” properties.
  • Set stretching Direction to “both” then Set Stretch to “scale to fit”
  • Set User Specified Scale to something like 2 or 2.5 if you choose to set thestretch to user specified”, otherwise this setting has no impact.
  • Click on your "combobox(string) and set the horiz. & vertical alignments to “fill”.
    Your combo box will now show up in a much larger scaled or rendered size!! I’m taking all these steps from memory and I think I got them all…

NOTE: This scaling trick works ALL the time except when you place your horizontal box with all the other widgets, inside another widget. For example, if you have a border widget and then place your horizontal box as created above inside the border widget, the scaling will not take place because it’s being re-scaled off the border widget which then reduces the overall scaling of h-box and scale box. It’s a little tricky sometimes!

Two examples from a menu system project I’m working on now…

Thanks , really easy!
Need to move your answer to the top, heh.
Drag on scale box and then drag your control into the scale box and set to full scale for horizontal and vertical.

69522-teammenu.png

1 Like

How is this not a core feature? Kind of embarrassing…

See 's answer for why it may have been done this way and aBitOWhit’s answer for pictures of how to implement 's answer.

No, this is just horrible design. This widget should never have been released. 's answer doesn’t help me change the font type. It helps me “scale” it up which isn’t even the correct way to implement font size either. The ootb combobox is useless without being able to change the font type, size, etc. This is just bad.

@Ariath can you elaborate on how you did this? “Now, in our ComboBox (String), we need to go to the Events section and bind a new function to the OnGenerateWidget event.” Did you create a new widget that contained the ComboBox (String)? Or what?

Actually I can’t find the OnGenerateWidget event at all.

I figured out where you bind to the OnGenerateWidget. So this is a per combo box solution that needs to be implemented for every combobox individually. http://puu.sh/mnizI/a0774f23d1.png

Also just to note, I think something has changed with Scale Box since this fix was first discovered. Mine shows up like this.

http://i.imgur.com/1Wm18Kl.png

Are you simply trying to set the text for your combo box selections? Item1, Item 2, etc (1)?
If so, you can add them on the right details tab under content by adding additional elements (2). I also set the “Selected Option” as the first element name so it is visible and not blank.
You can size a combo box size the same way as the others by embedding it within a scale box (3). You can then bind to the selected text the user selects by binding the onSelectionChanged Event on the right. If this is all about changing the actual font than never mind…heh.

Apologies if I am totally missing the point, just trying to help out. :slight_smile:

73382-cb1.png

73383-cb2.png

73384-cb3.png

1 Like

On the text being off, try setting it to justify instead of left align. This should make it stretch the scale box.

73385-justify.png

My end goal was to make something like this

73399-dropdown.png

I wanted to change the font style and size. So I implemented Ariath’s solution. Which actually worked for the most part.

My results are here

73411-results.png

However, there is a bug with the combobox so that we can’t change the dropdown arrow image. Also, with Arianth’s solution it would be hard to get the dropdown section and the button to look right together. Basically, I’ve come to the conclusion that this combobox element is unusable for real game implementations until Unreal fixes it.

I see what you are saying now. I was able to get closer to the basic look you were getting at with a quick image on the drop down but cannot get the text color to change to white so you could not see what it said. I was also able to get the lighter arrow using an image but it showed colored on the right but the color on the dropdown was still black. A lighter dropdown graphic did not look as good…strange. Good luck with it and sorry I was not much help.

73407-dropdark.png

73405-drop1.png

73406-btnarr.png

erebel - This is not horrible and it’s not bad either. It does work and it’s NOT scaling in any way, shape or form. If you are actually scaling, then your not doing it correctly. There are multiple ways to achieve what your doing and myself and Ariath have provided two of these ways. If you read my last post, I put steps into the posting that actually walk you through what you need to do. The scaling is based on the other containers sizes and scale settings, so you must have something set wrong. If you look at aBitOWhit’s posts below mine (see my pics too) as well as his pictures, you’ll see it works really quite well. Your containers will auto-scale when the engine renders which is the main reason, I believe, that font sizes are not part of the initial widget as people tend to over size things and thus this eliminates a lot of bad looking user fields.

Hey! Your welcome… Glad I could help… It’s actually quite easy once you manage to figure out which container, depending on how many containers are in your widgets, to place it. Has worked for me over a span of projects and have never had an issue with it over-scaled or anything.

Add an interest bump for me too! I tried using some combo boxes for my UI on an android device and the options were so small I couldn’t even select them with my finger and barely read them! I guess I’ll try the workaround, but this really should be a built in feature!

So I guess font size has not been added yet?

's method works but some of my drop down boxes flicker, and the scrolling button is twitches around if I try to use it. Using the scroll button on the mouse works fine though to scroll.

Just to make the Simple Answer more visible:

You simply need to add a ScaleBox to your widget, specify the size you want it to be (for example X: 400, Y: 80), then drag your ComboBox into the ScaleBox in your widget’s Hierarchy Panel and hit the Fill Horizontal and Vertical buttons.

Thanks to BitOWhit and for the solution.

5 years later… how we doing on this? Still can’t set the font options on a combo box.

2 Likes

aaaand +2 years… still a problem and still not possible :frowning:

1 Like