Question

Aligh fields to right

Updated August 13, 2018

asked on August 7, 2018

HI
I need to align Subtotal, HST and Total fields under Total field as shown in the screenshot below. In other words, I need to move these fields to the right.

I believe I have to use CSS. Any code sample will be a great help.

Thanks

0 0

Replies

replied on August 13, 2018

Add a CSS class to your fields (Subtotal, HST, Total), then add that same class to the CSS and Javascript section. Since Forms doesn't apply the class to the actual input, you'll need to specify like so:

.right input { text-align: right; }

(right is the CSS class I've specified in my fields)

0 0

replied on August 13, 2018

Hi Andres,

Thanks for the reply.

The CSS is moving the numbers inside the input boxes. What I need is to move the entire field including Field Lasel to the right so that the input boxes are below the Total Fields above. Currently, the three fields are below the "Description" field.

Thanks

0 0

replied on August 13, 2018

Like a Table footer?

0 0

replied on August 13, 2018

The easiest might be to do a float on the input:

.right input { float: right; }

I think it's probably best if these fields were in a footer, but I don't know if that's possible in Forms without custom javascript.

0 0

replied on August 13, 2018

Hi Andrew,

Thanks for the updated CSS code. I merged the two CSS into one. It worked as required on the input boxes only. The Labels remain unchanged. Any suggestion?

Thanks

0 0

replied on August 13, 2018

I assume you'd like the labels next to the input fields, right-aligned? I don't think you'll get that easily because of the way Forms renders the HTML. For that, I believe, you're going to need to do some manipulation in javascript - which is always a bit unsettling as you don't want to break something else as a result.

A possible way to do this is by adding javascript:

$(document).ready(function () {
  $( "<span class='rightAlignLabel'>Subtotal:</b>" ).insertAfter( "#Field44" );
});

And another CSS line:

.rightAlignLabel { text-align: right; float:right; font-weight: bold; padding-right: 15px; }

Then clearing out the label text on the Layout tab.

Field44 in my example is the subtotal input field ID on my test form - that'll obviously differ in your case.

There probably is a better way to do this though.

0 0

replied on August 13, 2018

Hi Andrew,

The code has worked to some degree. I have to play with it to get it right the way I need the form to look like.

Thanks for the direction.

Regards,

0 0

You are not allowed to follow up in this post.

Question

Question

Aligh fields to right

Replies

Sign in to reply to this post.