Reduce frame size for input field

UI Builder
1

I’m using the input form field with a number type.
image

Two questions:

  1. In the “outline” variant, the frame size is pretty big (the “padding”) compared to the contained number. How can I reduce it?
  2. How can I achieve a right-aligned number?

I fiddled around with the .bl-input class without success …

Regards,

2

Hello @Klaas_Klever,

Thank you for your patience. Currently, it’s not possible to resolve this issue without using CSS. I will discuss with our team the possibility of adding additional settings to adjust the size of this component. Additionally, I’m attaching an example of CSS code that you can apply to reduce the padding of the component.

Go to theme → new extension → editor → paste this code
then add the “customIntup” class to your input component

.customIntup input {
  text-align:right;
  padding-top: 10.5px;
  padding-bottom: 10.5px;
}

.customIntup label {
  transform: translate(14px, 12px) scale(1);
}

Regards,
Sergey

3

Thanks. I could adapt it well to my case!