Question

CSS format for currency field does not show up on the form in repository

Forms Version 10

Updated February 18, 2021

asked on August 4, 2017

This is a common question and I have found numerous posts on it, which is where I found this suggestion:

How can I use this code to force all Currency Fields to show up right aligned when it gets saved into the Repository (sorry, just not familiar with all this code).

My current code, that works in the preview but ended up not right-aligned in the currency fields on the saved form in the repository, is like this:

1 0

Answer

SELECTED ANSWER

replied on February 17, 2021 • Show version history

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

replied on February 18, 2021 • Show version history

Thanks so much, Matthew! This is a big help! This worked for me after I put .currency in place of the #q1 for some reason (and currency in the CSS in the Advanced Tab on the target fields). Not sure why that made a difference on mine, but it did.

1 0

Replies

replied on August 4, 2017

Hi Connie,

Try just using this CSS instead to right-align your currency field(s).

#q1 {
  float: right;
}

Here I targeted the currency field's ID (q1) and you can see in the preview it's right aligned just fine.

And the form saved into the repository is also right-aligned as expected.

To do this for all of your currency fields, I would recommend assigning them all to a CSS class with a common name such as "Currency" and target that class with your CSS class, i.e.:

.Currency {
  float: right;
}

Let me know if this doesn't solve your issue.

0 0

replied on August 4, 2017

Thanks, Tri Pham. I just had a few minutes to play with this. Haven't got it working yet, have tried it a number of ways, but... unfortunately, I'm gone now for two weeks and will have to finish up later this month.

Question: About putting the word Currency in the CSS Class under the Advanced tab for the field. What about the collection field that is a Currency field? It has the word SUM in that spot as there is another Total field that is summing up all the entries in that collection field. Do I put the word Currency after the word SUM? Do I put it before? Is there a separator needed: SUM; Currency (like that?)

0 0

replied on August 4, 2017

And another question (I need a book called CSS for Dummies!!!)

QUESTION: Why is the code separated onto three lines like that sometimes? Is it necessary? Can't it all be on one line? (Just curious; I REALLY need to take a course on this!!) :)

0 0

replied on August 4, 2017

Nope, still didn't work (stayed late to keep trying). I tried it exactly how you had it laid out, I tried it without my other coding, then added back in parts of my coding, then tried a bunch of different variations. Here is where I'm leaving it for today:

Again, everything looks fine on the preview page, but after a full test run, it's all left aligned again. Am I missing something?

0 0

replied on August 25, 2017

Still trying to get this right. Still can get it to right align on the submission form, but end result on the form saved into LF is left aligned.

I've tried a suggestion of setting a CSS class with a common name of Currency, then any number of versions of the following:

.Currency {text-align: right;}

.Currency {

float: right;

}

0 0

You are not allowed to follow up in this post.

Question

Question

CSS format for currency field does not show up on the form in repository

Answer

Replies

Sign in to reply to this post.