Hide Search form

[KAPITYAN]

How can I hide the Search Form section of a Tabular report, without hiding the Table report itself?

I tried this out in my own html file:

<style>
#caspioform {
display: none;
}
</style>

But it hides the whole datapage. I need to hide only the Search Form section. And I need to do it only in my .html file, not the datapage ( I mean I can't do this on the footer o header).

[NailDyanC]

Hi,

There are two ways to achieve your workflow, first is by using standard option, just duplicate your DataPage then in the "Search and Report Wizard - Search Type" you may choose the "Filter data based on your pre-defined criteria" option so that you will not have a search form in your tabular report.

Make sure as well not to include fields in the search filtering once you choose that option. The second option is by using custom CSS to hide the Search form. You may try and check this code:

div[id^="cbOuterAjaxCtnr"]:nth-child(1) {
    display: none !important;
}

[samscot]

div[id^="cbOuterAjaxCtnr"]:nth-child(1) {
    display: none !important;
}

I tried the same but there arn't results. Anyone else could come with different option plz?

 

[sandy159]

Hi @samscot,

The code actually worked for me as well.  Did you insert the CSS code inside the <style> tag in the Header on the 'Search and Report Wizard - Configure Search Fields' tab?

<style>
div[id^="cbOuterAjaxCtnr"]:nth-child(1) {
    display: none !important;
}
</style>

But actually, it is much easier to do this without coding, with the standard features of Caspio. As suggested above, in the "Search and Report Wizard - Search Type" you may choose the "Filter data based on your pre-defined criteria" option so that you will not have a search form in your tabular report.

Regards

[samscot]

OK Sandy

[MaraMara]

On 9/12/2020 at 2:57 PM, KAPITYAN said:

How can I hide the Search Form section of a Tabular report, without hiding the Table report itself?

I tried this out in my own html file:

<style>
#caspioform {
display: none;
}
</style>

But it hides the whole datapage. I need to hide only the Search Form section. And I need to do it only in my .html file, not the datapage ( I mean I can't do this on the footer o header).

 

I also solved it with the following :

<style>

 

section[class^="cbFormSection"] {

display: none !important;

}

 

</style>

in my html page. (the problem with this is that it also hides the form of the bulk edit window.

 

 

[Vitalikssssss]

Hi @MaraMara,

Try the following CSS snippet:

<style>
.cbSearchSpa {

display:none !important;

}
</style>

This should hide the Search Form.

Regards,

vitalikssssss

[KongenAvKjelsaas]

On 9/14/2020 at 1:46 PM, sandy159 said:

Hi @samscot,

The code actually worked for me as well.  Did you insert the CSS code inside the <style> tag in the Header on the 'Search and Report Wizard - Configure Search Fields' tab?

<style>
div[id^="cbOuterAjaxCtnr"]:nth-child(1) {
    display: none !important;
}
</style>

But actually, it is much easier to do this without coding, with the standard features of Caspio. As suggested above, in the "Search and Report Wizard - Search Type" you may choose the "Filter data based on your pre-defined criteria" option so that you will not have a search form in your tabular report.

Regards

Wow Sandy159! How did you made out this code?  Impressive. Does this mean it is possible to manipulate CASPIO css tags to override styling in each form at runtime? Does this make it possible to use Bootstrap like containers, rows and columns? Thank for any reply!

Best

[sandy159]

Hi @KongenAvKjelsaas,

Yes, you may use CSS code to style Caspio Form Elements. Please check the following forum post for your reference: JS Guide: Caspio Form Elements.
Also, you can use native Caspio Styles and modify elements to your needs.

Unfortunately, it is not possible to use Bootstrap classes in your DataPage, because Caspio classes have higher priority. But you can definitely use Bootstrap to create your HTML pages for the site where you are going to embed Caspio DataPages.

Hope this helps!

[petercohen090]

Hi

You can do this using java coding. It will surely help you.

[DesiLogi]

Hi @Vitalikssssss,

I like your solution to hide the Search form-- is there a way for a button on the host page to run js to change display:none to display:block (or whatever the right connotation is) to show the Search form? That way you could use a button to toggle the Search form visible or not. 

I'd like to figure out how to use this vs using Caspio Rules to show/hide because, if hidden on page open, the Search form always 'hiccups' (shows for a flash before hiding) and this looks very bad for the UX. To have the Search form hidden by css on open, then have a button run a function to change the display, would be ideal. I was thinking either of these would work, if a button/function could change the display value.  I just can't figure out how. 

div[id^="cbOuterAjaxCtnr"]:nth-child(1) {
    display: none !important;
}

//OR USE THIS TO HIDE THE SEARCH FORM
.cbSearchSpa {

display:none !important;

}

I think something like the below would work but it's not quite right: 

function showhide(){
document.getElementsById('cbOuterAjaxCtnr').style.display="block";
}
//OR CHANGE THE CLASS STYLE

function showhide(){
document.getElementsByClassName('cbSearchSpa').style.display="block";

}