Hide Search form

[KAPITYAN 2]

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 10]

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 0]

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 10]

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 0]

OK Sandy

[MaraMara 1]

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 67]

Hi @MaraMara,

Try the following CSS snippet:

<style>
.cbSearchSpa {

display:none !important;

}
</style>

This should hide the Search Form.

Regards,

vitalikssssss

[KongenAvKjelsaas 0]

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 10]

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 0]

Hi

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