Jump to content

caspio radio button remove any option for Yes/No fields


Recommended Posts

Hi,

I have a Yes/No field that is used in the Search form on a tabular datapage. I want to use a radio button for this field but I need to remove the 'Any' option (where the result is blank/null and all records show). I need the user to be able to only see 'Yes' and 'No' results separately and not all mixed together with the 'Any'/Null option. 

The setup wizard doesn't allow for removing 'Any' on a Yes/No field so I'm trying to do this with css. The radio button field is the 3rd in the list so I've been trying versions of: 

input#value3_12{

display: none!important;

}

Or 

input[id="value3_12"]{

display: none!important;

}

Neither of these works but it's got to be close. Does anyone know how to remove the 3rd 'Any' choice in a Yes/No radio button? 

Link to comment
Share on other sites

Hi Futurist,

Thanks for posting but I  couldn't get that to work.  To help clarify, I've taken screenshots of the datapage Preview with Inspect open. 

I got rid of the display part of the 'Any' choice by putting <style display:none;></style> in the Display section of the radio button choices (where the word 'Any' would be). This removes the label but the button choice remains. That's what I'm needing to hide. 

If you look at screenshot (I hope they're legible--Caspio's size limit for attachments is extremely small) one you can see the radio button and its reference in Inspect. 

Screenshot 2 shows that when you put display:none in the Inspect Style section (for temp styling on a page) the button does disappear. I just don't know how to reference this control on the datapage itself. 

 

Screen Shot 1@0.5x.jpg

Screen Shot 2@0.5x.jpg

Link to comment
Share on other sites

Hi @DesiLogi,

In order for you to reference the actual button, you can use either the type, name, or id. But as you might notice, they all share the same values for those three attributes, so instead, you can reference them by the nth-child property (https://www.w3schools.com/cssref/sel_nth-child.asp) by which order they came in (and the Any option always comes in last). However, one thing I noticed with Caspio is when you call the nth-child(1), it points to the first radio button (which is expected), but when you call the nth-child(2), it does not exist. On nth-child(3), however, the 2nd radio button is pointed. Similarly, nth-child(5) points to the third radio button.

Anyway, in order for you to reference the Any radio button, simply refer to it as the nth-child(5), just like what I did.

Can you try using this instead:

<style>

input[type='radio']:nth-child(5), input[type='radio']:nth-child(5) + label{
display: none;
}

</style>

 

It hides the Any radio button and the label beside it

 

 

Link to comment
Share on other sites

Hi @futurist,

Ah that's it--works like a charm! Funny, I was trying lower numbers and just needed to go up instead. Many thanks for this explanation, I wouldn't have figured it out otherwise. Now I understand the concept, too, so it'll be easy to implement it in a number of places. 

Thanks again!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...