Question

how to right align the datetime picker using CSS

Business Processes Forms Layout Designer Laserfiche Cloud

Updated June 11

asked on June 9

I am working in cloud, in modern forms and would like the date time entry control to align right of screen. Is it possible to use css to align the entire datetime control to the right? Ideally i'd like to use a class

I have applied a custom class dateRight

.dateRight {
text-align: right !important;}

I've also tried selecting the specific field

#q160 fl-date-time {
text-align: right !important;
}

and

#q160 selectors-display-content {
text-align: right !important;
}

I've also tried to set the width, nothing seems to work

#q160 .cf-field {
width: 10px !important;
}

0 0

Answer

SELECTED ANSWER

replied on June 10 • Show version history

I was playing around with this and couldn't get it to work the way you've written, it was moving slightly to the right but not all the way.

I simplified it a bit and ended up with this, which is working correctly for me in Cloud (and targeting both the label and the input box):

#q160 .fl-component {
  display: flex; justify-content: flex-end;
}

Hope this helps!

Edit: Alternatively if you wanted to use a class, you could use:

.dateRight .fl-component {
  display: flex; justify-content: flex-end;
}

3 0

Replies

replied on June 10

Try something like this:

#q160 .form-q {justify-content: flex-end;}

The Forms Designer places all elements within a flexbox, so "justify-content: flex-end" essentially replaces "text-align: right".

1 0

replied on June 10

I just noticed that you are using top label as your default instead of left label, so the code is slightly different. However, something like this should work:

#q8 .field-label {display: flex; justify-content: flex-end;}
#q8 .fl-component .fl-datetime-inputs {display: flex; justify-content: flex-end;}

I tested this using top label as my default. The first line moved the label to the right, and the second moved the field to the right. Let me know if this works for you!

1 0

replied on June 10

Just replace #q8 with #q160.

1 0

SELECTED ANSWER

replied on June 10 • Show version history

I was playing around with this and couldn't get it to work the way you've written, it was moving slightly to the right but not all the way.

I simplified it a bit and ended up with this, which is working correctly for me in Cloud (and targeting both the label and the input box):

#q160 .fl-component {
  display: flex; justify-content: flex-end;
}

Hope this helps!

Edit: Alternatively if you wanted to use a class, you could use:

.dateRight .fl-component {
  display: flex; justify-content: flex-end;
}

3 0

replied on June 11

Amazing, thanks for sharing this to you both. This looks so much better

1 0

replied on June 11

No problem at all, happy to help!

1 0

You are not allowed to follow up in this post.

Question

Question

how to right align the datetime picker using CSS

Answer

Replies

Sign in to reply to this post.