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";

}

 

[DaveS]

Hi, @DesiLogi and @Vitalikssssss

 

I have a variation on this topic and hope one of you might have a suggestion...  I have a search form that I would like to always be open... 

Caspio's responsive behavior hides the search form and my custom search button on mobile devices, leaving just a search button.  I can see that it is happening at the 576/580 px breakpoint and that it is the cbFormSection / cbSearchSpa classes that seem to be impacted, but I can't seem to figure out how to override it.

 

I've tried variations like this...

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

and this:

 

.cbSearchSpa {

display:block !important;

}

 

Any suggestions greatly appreciated!

 

Dave

[DesiLogi]

Hi @DaveS,

I ran into something similar and below is part of the solution, which I think is what you're looking for: 

This code in the header will show the Search Fields in mobile regardless of responsive settings: 

@media only screen and (min-width: 320px) {
section[class^="cbFormSection"][class*="cbSearchSpa"] div{
display:block;
}
}
@media only screen and (max-width: 576px) {
section[class^="cbFormSection"] input[type=submit]{
width: 50% !important;
}
  
.cbSearchButtonContainer
{
 display:none !important;
}
  
}

I put in the .cbSearchButtonContainer part so you don't have 2 search buttons showing in mobile. You can change it for just the Search button instead of the container but I use the container class because of other things going on. Hope this is what you're looking for and helps-- 

[DaveS]

@DesiLogi - thanks so much for the reply on this and apologies for my delayed response!  For some reason I didn't see the alert!

I've implemented your code above, and the behavior is kind of fascinating...  On the initial load of the page, it is working to keep a custom HTML field (image) and the search field open, which is great, but I'm getting 2 search buttons.   Then, after an initial search, one of the search buttons disappears and the page behaves as expected.  I can do multiple searches and everything works fine.  Then I refresh the page and both buttons are back.

I will mess around with it a little more and will post a final solution if/when I get there.  I really appreciate the assist!