BUG: Widget height inconsistent if labels are used

Support, Troubleshooting, & Help
1

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.

2

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)

image
image1402×268 14.7 KB

image
image1443×208 8.79 KB

Font Size 12:
image

Font Size 80:
image

1 Like
3

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
4

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

image
image1348×130 7.99 KB

5

@ychan164
after nearly a year of silence: when will this be fixed?

This issue exists also when no label is used.

Btw:
There are so many other points inside the developer UI, which need to rework (inconsistent structure and use, unsorted lists …) and were specified (long) time ago :thinking:

Still hoping
Chris

1 Like
6

@ChrisF , @jas , @thorsten.langner , Product Manager from the Apps Team here — thank you for your patience.

We’ve noted these improvements (input field height, border styles) and have them slated for the end of this year.

Please let me know if there are any other improvements that you come across for these widgets (or others).

1 Like
7

Hi @shep

are you sure? This could be a long list :wink:

First of all: use or create a style guide for all your Widgets with the focus on

  • equal properties where necessary
  • naming
  • grouping
  • name/group order
  • selection area (round/square)
  • sorting order if a variable can be used
    …

I think that’s work for a few month and most of these are reported in the past…

Chris