Question

Wrap 'text below a field'

How To Forms

Updated June 4, 2018

asked on December 14, 2017

Is it possible to make 'text below a field' wrap, and not run off the side of the form with all text in a straight line? In this particular form, I have to include numerous time fields, and under some of those, they need descriptions (which are lengthy). I am trying to make the text wrap and stay under the field I am describing. Any insight or guidance will be greatly appreciated. See attachment.

Wrap Text.PNG (22.81 KB)

| Download

0 0

Answer

SELECTED ANSWER

replied on December 17, 2017

This will make the text wrap, all that's left is to get the formatting the way you want.

.TwoPerLine label {white-space:normal;}

0 0

View 3 previous replies

replied on December 19, 2017

Thanks Aaron. That worked. I just have to fix the spacing because it moves the other field down at the right of the screen. Thanks again!

0 0

replied on May 31, 2018

Hi Bill,

Were you able to find a way to prevent the field on the right from dropping down when you enter text below a field on the left?

Thanks,

Andy

0 0

replied on May 31, 2018

Hi Andy,

Yes sir, I was! The CSS @████████ provided worked like a charm. See snippet for what it looks like now.

Thanks

Capture 5-31.PNG (16.93 KB)

| Download

0 0

replied on June 4, 2018 • Show version history

Hi Bill,

Any chance you can post a section of your CSS for the above snippet?

Below is what I'm attempting to solve.

Many Thanks,

Andy

0 0

replied on June 4, 2018

I apologize; I have been leading you in the wrong direction. I totally forgot that this was what I ran into as well. I went back and looked at my form again, and what I ended up doing was using Custom HTML fields below the time fields instead of using text below field. So as you see above, Set-Up Start and Start Time of Event have two HTML fields below them (both with CSS class TwoPerLine) to keep them lined up perfectly. I done the same thing after End Time and Tear Down. Let me know if this doesn't make sense, and I will try to explain in better detail.

0 0

replied on June 4, 2018

Hi Bill,

Thanks for your help. I managed to sort it using 'vertical-align:top' in my CSS.

Andy

0 0

Replies

replied on December 14, 2017

It depends on the css you are using for your formatting. Can you post the css you are using.

0 0

replied on December 15, 2017

.TwoPerLine{display: inline-block; width:47%;}
.TwoPerLine .cf-medium {width:97%;}

.ThreePerLine {display: inline-block; width: 31%;}
.ThreePerLine .cf-medium {width:97%;}

And in the pictured section, these are in the TwoPerLine class. It works great for the field itself, but doesn't seem to work for the text I entered in the 'Text below field' line in edit mode.

0 0

You are not allowed to follow up in this post.

Question

Question

Wrap 'text below a field'

Answer

Replies

Sign in to reply to this post.