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

Question

Question

Place radio buttons on the right of the field label

Forms Laserfiche Cloud
Updated July 31
asked on March 30

In the modern form designer, I have labels aligned on the top of fields. In one area I'd like to have several radio button fields with the field label aligned left and the radio option aligned right.

For example:

Any help would be appreciated. Thanks!

0 0

Answer

SELECTED ANSWER
replied on March 30 • Show version history

Hi Jim, 

Try to use this CSS and let me know if its works (set the radio-inline class to the radio button you need apply it.: 

.radio-inline .form-q {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

.radio-inline .form-q .field-label {
  flex: 1 1 auto !important;
  margin-bottom: 0 !important;
}

.radio-inline .form-q .cf-field {
  flex: 0 0 auto !important;
}

.radio-inline .form-q .field-body {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: nowrap !important;
}

 

4 0
View 1 previous reply
replied on July 30

The code works great, but how can I extend the label field to be longer and not wrap?

Thanks!

0 0
replied on July 31

Hi Steven,

The label is wrapping because the current flex configuration allows it to shrink. Try replacing the existing .field-label and .cf-field blocks with the following:

.radio-inline .form-q .field-label {
  flex: 1 0 auto !important;
  min-width: max-content !important;
  white-space: nowrap !important;
  margin-bottom: 0 !important;
}

.radio-inline .form-q .cf-field {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

This prevents the label from shrinking or wrapping while keeping the radio options aligned to the right. Make sure the field occupies a full-width row; otherwise, a long label may overflow in a narrow column. For mobile screens, I would still recommend allowing the label to wrap or stacking the options below it.

Let me know if that works for your layout.

1 0
replied on July 31

Thanks!!  That worked great!!

1 0
replied on July 31

Great! 

0 0

Replies

replied on March 31

Brilliant! That worked perfectly. Thanks!

1 0
replied on March 31

Great, it's good to know it could be useful

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...