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

Question

Question

Put field label above input box in forms 11

Forms Version 11
Updated September 14, 2022
asked on September 13, 2022

In forms 10 I used this CSS for putting the labels for an input fields above the input field on the form:

.cf-field, .cf-label {
  width: 100% !important; 
  text-align:left;
}
.choice {width: 25%;}

Since upgrading to forms 11 and all its changes, this CSS does not work.  Does anyone have an upgraded CSS for what I am trying to do? 

Wish that Laserfiche would have added this selection to the Fields Styles section.

0 0

Answer

SELECTED ANSWER
replied on September 13, 2022

Are you targeting specific elements? The code you have would have affected all fields, in which case wouldn't it be better to just change the form-wide label placement?

In the new designer, Left labels are in a parent with flex display, so setting the width won't work the same. However, when you set it to Top it changes the parent to a block.

If you only wanted to change specific elements, you could then do something like this

.topLabel .form-q {
    display: block;
}

where you set the custom css class of topLabel on the items you want to have a top label, however, like I said before, if you want them ALL to be top labels, changing the form configuration is better.

0 0
replied on September 14, 2022

Hi Jason, 

I didn't even think of selecting the title on the form to get to the forms setting page and then find the label placement section.  

Yes, I was looking to change the label placement on the whole form.

Thanks!

0 0

Replies

You are not allowed to reply in this post.
replied on December 12, 2023

We have a form that most fields are label-top, which is fine, but we need labels to be on the left just for a few. I tried some examples from earlier posts I found here, they didn't work. 

Then I found few examples on the internet for the "responsive" design but none worked, see below;

First approach was "to target the input element directly"

$(".phone").find("input").inputmask("(999) 999-9999");

Second was called "Event delegation"

$(document).on("focus", ".phone input", function() {
  $(this).inputmask("(999) 999-9999");
});

The third is called "data attribute"

$(document).ready(function() {
  $("[data-mask]").each(function() {
    $(this).inputmask($(this).data("mask"));
  });
});

I don't have coding experience but I know that what I'm asking here is an elementary level request because we use these in our Form 10 and they are working perfectly.

We switched to forms 11, expected that things will be easier with "responsive" design form; however, we are having difficulties to get these simples codes working, backward compatibility doesn't function.  

Can someone help with a working codes. I need the same reformatting for social sec numbers.

You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...