Having difficult resizing input fields in Customs forms

Support - Assistance technique
1

Hi, everyone.

I am trying to reduce the size of the input fields in a custom form so that that it fits the page properly. Here in the community I have read that I can add the following Script at the top of the custom form:

input { width: 3em !important; }, but it is no working. Adding style=“width: 3em;” in each input field does reduce the size but there are too many fields and doing this will not be simple.

I am wondering if the script should be put where there a pipe in the picture below. As I want to have style rules embedded within the page, do have to I use . How should the whole script be?

image
image1126×471 59.4 KB

I just used a small number of data elements just for test but it’s a very big form.

Thanks in advance

2

You can use CSS styling to override the basic style of all the input elements

3

Hi @ahmed685,

Do have to use { }? as I want to embed CSS within the source HTML. Could you guide me through it?

Thanks

4

i have used the following code in style tag and it worked :
input { width: 3em !important;** }

also you may have to use the following as well in jquery , which enforces the size of input:

$(“input[type=text]”).attr(“maxlength”, 8);
$(“input[type=text]”).attr(“size”, 5);

5

Hi @ahmed685,

Thank you very much.

The have put the code in style tag is working now. But why does the code affect the complete, incomplete and run validation buttons?

image

When I tried the other code for Jquery, things are not working. What may be wrong?

Thanks again

6

Try the following then:
input[type=text] { width: 3em !important; }

this will only enforce the styling on the Input fields. and will skip the buttons

7

Hi @ahmed685,

I tried input[type=text] { width: 3em !important; } and things are working fine now.

I’m very thankful to you for helping me

1 Like