Float label left of field value

This thread is resolved. Here is a description of the problem and solution.

Problem:
Float label left of field value

Solution:
You need to adjust your HTML output by adding custom CSS.

You can find the proposed solution, in this case, with the following reply:

https://toolset.com/forums/topic/float-label-left-of-field-value/#post-1166178

Relevant Documentation:

This support ticket is created 6 years, 2 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	10:00 – 13:00	10:00 – 13:00	10:00 – 13:00	10:00 – 13:00	10:00 – 13:00	-
-	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-

Supporter timezone: Asia/Kolkata (GMT+05:30)

Tagged: Toolset Forms

This topic contains 2 replies, has 2 voices.

Last updated by GamX 6 years, 2 months ago.

Assisted by: Minesh.

Author

Posts

December 13, 2018 at 8:06 pm #1165765

GamX

ON THE USER FRONT-END

This is what I currently see:

This is the field label
[this is the field input box]

But instead, I want to see this:

This is the field label [this is the field input box]

I've read your page on CSS and explored some related tickets about floating the label left, but I don't know how to translate it to my specific case. Would love your help!

CURRENT FORM CODE:

[creduserform]
<div class="form-group">
<label>Hero First Name </label>
[cred_field field="1-1-hero-first-name" force_type="field" class="form-control" output="bootstrap"]
</div>
<div class="form-group">
[cred_field field="form_submit" output="bootstrap" value="Enter" class="btn btn-primary btn-lg"]
[/creduserform]

FAILED ATTEMPT AT CSS CODE WITHIN "EDIT USER FORM":

div.form-group label {
float:left;
}

December 14, 2018 at 7:12 am #1166178

Minesh

Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Hello. Thank you for contacting the Toolset support.

Well - what if you try to use following CSS. Add following CSS to your forms CSS box:

.form-group label {width:21%; float:left;}
.form-group input[type="text"] { width:75%; }

December 14, 2018 at 7:16 pm #1166470

GamX

Thanks... I tried this and also played around with the numbers a bit... but got mixed results. This makes me wonder if I should just stick with the defaults for the time being. I may write back later if I want to give it another shot. Thank you!