Radio button

[Role21]

How can I modify the font size of Radio Button options? I cannot see them under Styles

[JolliBeng]

Hi Role21,

You may add this CSS code on your DataPage Header:

<style>

input[type="radio"] + label {

    font-size: 16px !important;

}

</style>

 

just change the font size to your desired size.

 

-JolliBeng

 

[jnordstrand]

Hi JolliBeng,

 

Is there a way to increase the actual Radio Button Size as well?  I was able to increase the label size with your help.

 

Thank you,

Jeff

[kpcollier]

19 minutes ago, jnordstrand said:

Hi JolliBeng,

 

Is there a way to increase the actual Radio Button Size as well?  I was able to increase the label size with your help.

 

Thank you,

Jeff

Hey @jnordstrand, try this and let me know if it works.

input[type=radio]{
 transform: scale(1.5);
}

[jnordstrand]

Hey there.  It worked to some extent.  Once the actual radio buttons were enlarged they squeezed out the labels.  I would like to stretch out the area to allow for larger buttons and labels.  

 

Thank you,

[TsiBiRu]

Hi @jnordstrand,

To better assist you with this, kindly provide us with the deployed URL of your DataPage so that we can try to formulate/create some CSS styles override to fix this using the Dev Tools in the browser. You can just remove the deployed URL of your DataPage in this post after this has been sorted out.

Regards,

TsiBiRu 

[jnordstrand]

Please take a look.  I would like to have large buttons and labels so that someone can easily enter from a tablet with their fingers.  

 

https://c0bkr285.caspio.com/dp/b1b33000a0cb2bbe80f14625b947

Thank you,

 

[jnordstrand]

Hi guys,

I did some research and taught myself some things. 

<style>

input[type="radio"] 
{
margin-right: 30px;
}
input[type="radio"] 
{
margin-left: 30px;
}
input[type="radio"] + label {

    font-size: 32px !important;

}
input[type=radio]{
 transform: scale(4);
}
</style>

 

This works and gave me Big buttons with spacing in between.  

  

[Role21]

I have another question.

I put a line break on my radio button. So my radio button looks like this:

My question is, how do I align the label? So, it should look like the following:

• Option

              123456789

 

 

TIA.

[TsiBiRu]

Hi @ Role21

I think you can just put two non-breaking line (&nbsp)  after your line break (<br>)

Here is a screenshot of the DataPage

Here is a screenshot of the preview mode.

If you want to further move the number (123....) to the left, just add one more non-breaking line (&nbsp)

I hope this helps.

Regards,

TsiBiRu

[Role21]

Hi @TsiBiRu

I actually tried that already.

As you may see, it still does not align properly. Look at the "O" in Option and "1".

I want that to be aligned.

[Kurumi]

Hi - Just an update regarding Radio Buttons. Caspio will be introducing a new DOM structure of the radio button in DataPages. If you are using custom scripts to access the DOM structure of radio button groups, you should revise them to use the element “ID” or “name” or type=radio attribute instead. 

For more information, you can check it here: https://howto.caspio.com/release-notes/caspio-34-0/impacted-areas-34-0/