caspio radio button remove any option for Yes/No fields

[DesiLogi]

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? 

[futurist]

Hi @DesiLogi,

You can use this CSS on the header of the search form

 

<style>

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

</style>

 

[DesiLogi]

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. 

 

[futurist]

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

 

 

[futurist]

@DesiLogi, can you send the deployed URL of your DataPage so I can check the actual page and try adding in css on the Inspect Element?

[DesiLogi]

@futuristThanks for updating the thread--I still couldn't get it to work, though. As per your suggestion I created a temporary datapage that doesn't need authentication so it can be accessed and inspected. Here's the url: https://c0afw773.caspio.com/dp/c2104000b4094baa9fb94abb9f37

Thanks for checking it out-- 

[futurist]

Hi @DesiLogi,

that radio button is apparently the 7th child, so try using this CSS:

 

 

<style>

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

</style>

 

[DesiLogi]

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!

[futurist]

Hi,

Just wanna share this because I found an easier way to hide all/certain "Any" options in DataPages.

 

If you wish to hide ALL "Any" options for all radio button fields, you can use the following script:

 

<script>

var allElements = document.querySelectorAll('label');
var myElements = [];

for (var i = 0; i < allElements.length; i++) { 
    if (allElements[i].innerHTML.startsWith('Any')) {
        myElements.push(allElements[i]);
    }
}

[].forEach.call(myElements , function(elem, i) {
elem.style.display = "none";
elem.previousSibling.style.display = "none";
});

</script>

 

If you have multiple radio button fields with the "Any" option but you only want to hide certain "Any" options, you can use the following script:

 

<script>

var allElements = document.querySelectorAll('label');
var myElements = [];

for (var i = 0; i < allElements.length; i++) { 
    if (allElements[i].innerHTML.startsWith('Any')) {
        myElements.push(allElements[i]);
    }
}

myElements[1].style.display = "none"
myElements[1].previousSibling.style.display = "none"

</script>

 

myElements[1].style.display="none" and myElements[1].previousSibling.style.display = "none" hides the second "Any" radio button. If you wanna add more, duplicate those two lines and change the number in [1] with the number at which the "Any" option you wanna hide comes in (first "Any" would be 0, second "Any" would be 1, and so on).

[DesiLogi]

@futurist, really nice wind up on this subject--thanks!