BUG: Widget height inconsistent if labels are used

Dropdowns, Text Input, Number Input widgets have visually different height although same font size and height property is set.

Example: DropDown
image
image

Example: Number Input
image
image

As you can see, the Number Input is larger than the Dropdown menu. The only workaround is to not use the label property and use Text Widget as a replacement.

This issue seems only have to do with the single select.
I don’t see any connection to the usage of a lable. As soon as you change the font size from the initial 40 it starts becoming inconsistent:

(All Fonts set to 30)

Font Size 12:
image

Font Size 80:
image

1 Like

Hello @jas ,

Historically, all of our input widgets were made at different points of the app editor’s life which has led to some inconsistencies in the way that they scale and the default styling they inherit. We are aware of the ways that the behavior of these widgets diverge and are working towards defining a process for us to make these incremental improvements to widgets without affecting all live instances of the widget.

Thanks for flagging! And super helpful investigation from @thorsten.langner :slight_smile:

1 Like

Thanks @ychan164,

I want to add, that you can change the border (thickness and color) on text and number inputs, but not on single, and multi selects…
This also leads to two issues:

  • Inconsistant layout
  • Bad visibility on light backgrounds