How to format selection fields?

  • 11 September 2017
  • 2 replies
  • 1 view

Badge +3

Hello,

today I would like to ask something regarding formatting of a selection-fiel. I created a list containing a choice-field. The user can select one of the offered items in a dropdown-field or enter a own item in the offered text-box.

This picture shows the dropdow with "please choose one value" [sorry for the German language ;-) ] and below the box for entering an own value labeld with "enter your own value".

As you can see this textbox is very short, not comfortable and I would like to format this box e.g. to define a width. How can that be done? I tried a few things with CSS but I didn't find the right way.

Thanks in advance for your answers.

Kind regards

MartinN


2 replies

Userlevel 4
Badge +12

Hi Martin,

first I'd give the control a custom CSS class to let it have a specific design:

207441_pastedImage_1.png

Now open form settings (Einstellungen), go to custom CSS (benutzerdefiniertes CSS) and scroll all the way down to append the following code:

.myCustomClass input
{
    width: 400px;
}

This will make the input box wider than normal:

207446_pastedImage_3.png

You can now modify the code to make it as wide as you like it or make width relative or whatever you desire.

Hope this helps.

Best regards from Berlin,

Enrico

Badge +3

Hello, thank you for the answer. Yes, I did not use the right selector. Now I got it working.

Kind regards

Martin

Reply