How to reduce spacing between label and field?

[kytan5]

I have submission form and when i put label position = left. the field/form element (could be a textfield, dropdown etc) will appear to the far right.

Example:

Expected result I am looking for

Brand Type:  <text field>

What I see on caspio form

Brand Type:                                          <text field>

 

How do I reduce the spacing between label and form element? I don't know where in the style is controlling the spacing. I need the table or container to be 100% as my page is suppose to be responsive page.

Can anyone help?

 

 

[Mathilda]

Hi,

Try editing style associated with the datapage.

You may try changing layout for Label-Cell element. You need to change padding attribute try using 0 px instead of 14 px.

Please take a look at the screenshot. You may read more about customizing layout here

Also if you need to create a responsive datapage, you can find instructions here

[kytan5]

I tried the padding, doesn't seem to do much. effect happens on cell width but it is hard to give 1 generic width to fill all scenarios.

[Mathilda]

4 hours ago, kytan5 said:

I tried the padding, doesn't seem to do much. effect happens on cell width but it is hard to give 1 generic width to fill all scenarios.

Can I take a look at an URL of the datapage? 

[MayMusic]

If you have any long label system will adjust the size of the label to the longest one... I am trying to see if can be the size of label text on each field

[MayMusic]

Caspio places the labels in a td so there is no way to have auto width and it is a fixed with. But you can use HTML blocks instead of labels. Choose No label option for the section with all the fields, add HTML blocks in front of each field, and type label in it, check Continue next element on the same line for each HTML block.

[satch]

I had the same problem.

The fix is to set #of columns for that section to a high number. (6 or 8)

I suppose you had 1 or 2 columns, then the field and label will be streched out over the complete row.

 

 

 

[kytan5]

I tried but what happen is now the bottom fields get line up in 1 row.

Eg

What I see on caspio form

Brand Type:      <text field>           Type 1:      <text field>          Type 2:      <text field>  

 

[satch]

Ahh, didn't know you had more fields in that section.

You could fix that with making a section per field.

It's a workaround, I admit. But it works.

 

[sunsensesolar]

add display: inline-block; to the css for .cbFormLabel, .cbFormDataCell, and .cbFormDataCellNumberDate