You are viewing limited content. For full access, please sign in.

Question

Question

Custom Field Sizes and the Right Margin

Forms
Updated July 20, 2017
asked on July 20, 2017 • Show version history

I am trying to create a form that has the right margin roughly matching the left margin.  So the space between the left edge of the form and the field label is the same as the space between the right edge of the form and right end of the input field, this works when I put fields side by side, but not in a field by itself.  In the screenshot, you will see the top section of my form achieves my goal, but the next field down, DEVICE ID, does not.  I have set the field size to 610px there, but as soon as a bump over that (to 611px) the input field wraps and ends up below the label.  Any tips?

 

Here is the pertinent CSS code:

/*Correction By and Date Resolved side by side*/
/* Correction By */
#q38, #q19 {display: inline-block;  }
#q38 label {width: 150px;}
#q38 .cf-medium {width: 250px;}
#q38 .cf-field {width: 250px;}

/* Date Date */
#q19 label {width: 130px;}
#q19 .cf-medium {width: 105px;}
#q19 .cf-field {width: 105px;}

/* Device ID 610 is max*/
#q8 label {width: 150px;}
#q8 .cf-x-large {width: 610px;}
#q8 .cf-field {width: 610px;}

 

0 0

Replies

replied on July 20, 2017

Alon,

The field is spilling over into the next line because the parent container is not wide enough. Try adjusting the size of the parent elements and it should help.

For example, on your Device ID field, you set the label and field widths, but try inspecting the width of the "#q8" element and I'm betting you'll find that to be the culprit.

If that's the case, then you should be able to fix this by adding something like:

#q8 {width:100% !important;}

It might work without adding !important, but that guarantees you don't have to worry about the defaults.

replied on July 20, 2017 • Show version history

Alon,

Padding, margins, etc., can be a real headache for something like this because you're fighting the width, margins and padding of the parent #q8, plus the width, margins, and padding of the children .cf-label and .cf-field, as well as the width and padding of the label/field.

I would suggest inspecting the element in a browser, then try adjusting the width and padding of the #q8 element until it looks more like what you want.

Basically your goal is:

width of .cf-label + width of .cf-field < width of #q8 (including margins/padding)

By default, the Forms usually have 10px of padding on the left and right, and the field containers (like #q8) have 10px padding all around.

So, you're already losing 40px to padding. If you can't go past 610, then I would guess that your form width is 800px. Hence something needs to give because

40 + 150 + 611 = 801 > 800

If you added a border around the form, you might run into the same problems with that top section because that cuts into the available space as well.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...