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

Question

Question

Customize formatting of a word in radio button text?

asked on August 28, 2023

I was asked if I could customize specific words in radio button text. I tried copying the text with formatting incldued, but it does not work like it would with an HTML field. Any advice? 

0 0

Answer

SELECTED ANSWER
replied on August 28, 2023

This should help get you going in the right direction.

Add the "noLabel" css class to the radio button field, and add the "customLabel" class to the custom HTML element above it.

.noLabel .cf-label {
  display: none;
}

.noLabel {
  padding-top: 0 !important;
}

.customLabel {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

If you put this in the custom HTML, the cf-label class should make it inherit the default form label styling so you don't have to do as much to make it match.

<label class="cf-label">Custom Label</label>

1 0

Replies

replied on August 28, 2023

Which version of Forms? You can't format individual words in the labels, and if you're using the modern designer I don't think you can use JavaScript either.

I think the most viable option is probably to use CSS to hide the existing labels and then add Custom HTML elements above the fileds to create your own labels.

0 0
replied on August 28, 2023

I am using the Classic Designer Laserfiche Forms Professional Version 11.0.2212.30987. That is an interesting idea to use CSS to hide the labels. I am not super advanced but might be able to pull something like that off with the help of Google and Laserfiche Answers! Thank you!

0 0
SELECTED ANSWER
replied on August 28, 2023

This should help get you going in the right direction.

Add the "noLabel" css class to the radio button field, and add the "customLabel" class to the custom HTML element above it.

.noLabel .cf-label {
  display: none;
}

.noLabel {
  padding-top: 0 !important;
}

.customLabel {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

If you put this in the custom HTML, the cf-label class should make it inherit the default form label styling so you don't have to do as much to make it match.

<label class="cf-label">Custom Label</label>

1 0
replied on August 29, 2023

We haven't tried this in the Modern designer, but in the Classic designer, we've been able to put HTML tags directly in the checkbox/radio button choice. 

Here's one example where we even changed the color of the text.

on_form.jpg
checkbox.jpg
on_form.jpg (22.25 KB)
checkbox.jpg (23.28 KB)
1 0
replied on August 29, 2023 Show version history

Jennifer - For some reason it didn't work with the radio button field label, but this is a great tip for future projects. Thank you for your help and taking time to show me this! 

Jason - Thank you for this, it worked and was easy to follow. I appreciate your help! 

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

Sign in to reply to this post.