Question

space between fields when placed side by side

Updated September 20, 2017

asked on September 19, 2017

I have a collection fields that I need to place side by side. I have scoured LF Answers and have found many answers. Now, I am thoroughly confused. I have tried a variety of options, but nothing seems to work. If I get the fields closer, the title is condensed...or, the field input is not big enough.

I have tried changing the percentages, pixel size, label size, field size, and more...I guess I am not getting the proper grouping.

I want to remove the part indicated above. Can anyone explain to me how to put two fields (I need to add more fields at a later stage) in an inline block, but not have all the space?

If there is a whitepaper, video, or anything out there that explains how to space fields like this, I would love to know. I had trouble with spacing before, but it was with a table. I ended up getting help with that, too.

Please help.

Thanks in advance.

0 0

Replies

replied on September 19, 2017

Use Float Right on the righthand field, then use Margin Right to shift it away from the edge. Inline-block is way too much of a headache when trying to do what you're doing.

0 0

replied on September 19, 2017

I did something similar like this...

In CSS

/*Displays two fields per line*/
.TwoPerLine{display: inline-block; width:50%;}
.TwoPerLine .cf-medium{width:120%;}
.TwoPerLine img.ui-datepicker-trigger {display:none!important}

and to hide the label in the second "column"..

/*Hide Labels*/
.Hide .cf-label{display: none;}

Looks like the attached image

Capture.PNG (9.16 KB)

| Download

0 0

replied on September 20, 2017 • Show version history

Maybe you have other styling interfering with things? I tried the following code, which is essentially the same as yours, and it seemed to work correctly.

.Hide .cf-label {
  display:none !important;
}

.TwoPerLine {
  display:inline-block;
  width:50%;
}

.TwoPerLine .cf-medium {
  width:120%;
}

I would open the page up in Chrome and inspect the elements to see exactly what is going on with the element styling.

0 0

You are not allowed to follow up in this post.

Question

Question

space between fields when placed side by side

Replies

Sign in to reply to this post.