Question

How do I assign a CSS class with a common name so that I can force a right align on Currency fields?

Forms Version 10

Updated February 17, 2021

asked on August 24, 2017 • Show version history

How do I assign a CSS class with a common name so that I can force a right align on Currency fields? I suspect I know that answer to this: place it in the CSS Class field in the Advanced Tab of the form field, but this is a collection field and I have "SUM" already in there.

I've tried this: in the collection field. Wasn't sure if the SUM should be before or after.

What about this:

But be aware that this input line showing here is what I HAD in here for the COLLECTION field to right align, which works in test mode but not in the submitted form saved into LF.

Both fields, the collection and the total field, are coming out like this (left aligned):

1 0

Answer

SELECTED ANSWER

replied on February 17, 2021

The structure of the fields in the read-only/archive version of the form is rather different than it is in the live version of the form.

Things like the input/select/textarea inputs are replaced with text fields, some classes change around, and some formatting changes too.

Here's some CSS to compare between a live version of a currency field and a read-only/archive version of the same field. In the live form, we can refer to the input element, but in the read-only/archive version, that doesn't exist, so we can refer to the .cf-field .ro classes.

/*set the field as right-aligned on the active version of the form*/
#q1 input {text-align: right; !Important;}

/*set the field as right-aligned on the read-only version of the form*/
#q1 .cf-field .ro {width: 25%; text-align: right; !Important;}

Additionally, the read-only/archive version of the currency field doesn't maintain the sizing set on the layout page (via the cf-small, cf-medium, cf-large, and cf-xlarge classes) - this isn't a problem on a single-line field, which retains sizing, but the currency field doesn't do that, so we need to set field width in the CSS as well as the right-alignment.

width: 25% will mimic what the system does when you have set the field to be size Small (cf-small class).
width: 50% will mimic what the system does when you have set the field to be size Medium (cf-medium class).
width: 75% will mimic what the system does when you have set the field to be size Large (cf-large class).
width: 100% will mimic what the system does when you have set the field to be size Extra Large (cf-xlarge class).

1 0

Replies

replied on August 24, 2017

I'm not 100% sure exactly what you are after but hopefully this helps.

Assuming you want to apply this formatting to all currency fields you shouldn't need to create a new class for currency as laserfiche automatically assigns the class 'currency' to currency fields.

just add a blanket:

.currency{ text-align:right;}

0 0

View 9 previous replies

replied on August 25, 2017

Tried this; didn't work. I have Currency in the CSS Class (Advanced Tab) for these two currency fields, as well. Not sure what steps I'm missing. I tried all combinations of those showing in my printscreen clip above.

0 0

replied on August 25, 2017

Remove currency from the css class section(advanced tab). Because laserfiche already uses that class name it could be causing issues. And in the css add the line i gave you above.

Keep in mind the css i gave was to align the text to the right not the entire text box if you want to have the entire textbox aligned to the right you will need to float:right;

If this still dosnt work can you provide a snipit of your html source, specificly a section containing the currency boxes.

0 0

replied on August 28, 2017

Aaron, tried it again and still no difference. Removed the word currency out of the css class section as you instructed and tried it again with just your code, but I still get right-align in the form while submitting and left-align on the final product.

I tried it with just your code and no other right-align instructions anywhere else and in that case, the right-align doesn't happen even in the first part, so I added back in the lines for right-align that make it happen at least for that part.

Any other ideas on what might be causing this?

0 0

replied on August 28, 2017

Hey,

Try this:

.cur .cf-field .ro {
  width:200px;
  text-align:right;
}

Add that to your css section and in the advanced tab of the fields you are formatting add the class 'cur'. You will probably need to tweak it to get the look you are after but this should be a start.

0 0

replied on August 30, 2017

Still not working. :(

0 0

replied on August 30, 2017

Hey Connie,

I'm not sure why this isn't working for you. Would you be able to download and attach your form? If I can have a look at how you have set up your form I should be able to better assist you getting this to look the way you want.

After your last message I created a form that looks roughly like you screenshot and the last code I posted worked on it so there must be something else messing with the formatting.

0 0

replied on August 31, 2017

Thanks, Aaron. I downloaded it, but not sure how to get it to you.

0 0

replied on August 31, 2017

You should be able to attach it to a reply using the 'attach a file' button under the comment box.

0 0

replied on September 7, 2017

I tried that. It says it "cannot be uploaded" due to the extension of .xml

0 0

replied on September 7, 2017 • Show version history

Soz about that, didn't realize that was a limitation. Can you email it to me?

0 0

replied on September 20, 2017 • Show version history

NOTE: I've checked off MARKED AS ANSWER on Aaron's post so that he gets the credit for helping me on this, however, during some emails between us the actual coding that worked (provided by him) was as shows below and with rightAlign in the CSS Class in the Advanced Tab on all three fields involved:

.rightAlign .cf-field {
text-align:right !important;
}

1 0

replied on November 25, 2020

THIS HELPED ME! Thank you!

0 0

replied on September 20, 2017 • Show version history

So, with Aaron Hailey's help, I got everything right aligned with this code:

and "rightAlign" in the CSS Class in the Advanced tab on all three currency fields involved.

Thanks so much Aaron!

Note for anyone struggling with this, Field 142 was part of a collection field and that is why the coding is different for that one.

0 0

You are not allowed to follow up in this post.

Question

Question

How do I assign a CSS class with a common name so that I can force a right align on Currency fields?

Answer

Replies

Sign in to reply to this post.