Jump to content

Search the Community

Showing results for tags 'collapse'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Caspio Bridge
    • Caspio Apps for Ukraine
    • General Questions
    • Caspio JavaScript Solutions
    • Tables, Views and Relationships
    • Import/Export and DataHub
    • DataPages
    • Deployment
    • Security, Authentications, Roles, SAML
    • Styles and Localizations
    • Parameters
    • API and Integration
    • Calculations and aggregations
    • User JavaScript and CSS Discussions

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


MSN


Website URL


ICQ


Yahoo


Skype


Location


Interests

Found 4 results

  1. Hi, I've got a tabular datapage set to be responsive. Normally I use a toggle link to hide/show the Search form above the results (it's a better UX in that you can more easily style the overall page the datapage is deployed on). However, when set to Responsive it doesn't work anymore. I've tried to use the new methods for forms but it doesn't work. This is what works if the datapage is not responsive: The link on the host html page that shows/hides the Search form: <a class="btn page-action" href="#filter" data-toggle="collapse" style="color:green;"><i class="fa fa-filter" aria-hidden="true"></i> Filters</a> In the Search form's header: <div id="filter" class="collapse" style="text-align:left"> In the Search form's footer: </div> I've tried this but it doesn't work (using the same link to toggle): In the Search form's header: <div id="filter" class="collapse" style="display:none;"><div> In the Search form's footer: </div></div> Does anyone know how to use "collapse" with a responsive tabular datapage's Search form?
  2. I'm looking to add a expand all/collapse all button to my results page. I'm using the setting to collapse all now but would like my users to be able to expand all on the results page. Can this be done?
  3. I thought this might be helpful across the board for people developing in Caspio. I've been trying to do a better UI for data entry on web pages that also have to show results in a tabular report. Since iframes don't reliably pass parameters from parent to child and back it's necessary to sometimes deploy 2 datapages (a Submit or Details and a Tabular) on the same web page. This doesn't really look good from a UI perspective. This solution requires using bootstrap and jquery but it's fairly straightforward. One option is to put the the Submit/Details deploy code in the first div with something like class="col-md-3" and the Tabular deploy code in the next div with class="col-md-9" (divs in bootstrap with col classes must add up to 12 but no more than 12, in basic mode). This will put the 2 datapages next to each other, the 1st with 1/4 screen width and the 2nd with 3/4th. However, this setup looks cluttered and can constrain the Tabular report which often needs full page width to show its data clearly. So the ideal would be to onload hide/collapse the first div (with the Submit/Details form) and have the second div (tabular report) a full 12 columns wide. Then click a button or link to show the 1st div (Submit form) and change the 2nd div (tabular report) to 9 columns, thereby displaying both datapages when data entry/edit is needed. Clicking the button/link again (in this method) will collapse div1 and expand div2 back to 12 columns. So it's easy to toggle views this way. To do this: Put this in the body of your webpage (you may have bootstrap and jquery referenced differently): <div class="container-fluid"> <br> <div class="row"> <div class="col-md-3 bg-faded"> <div id="showsubmitform" class="collapse"> Caspio Deploy Code for Submit/Details form </div> </div> <div class="col-md-12" id="right"> <div> Caspio Deploy Code for Tabular Report </div> </div> </div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> $('#btnSwitch').click(function(){ $('.col-md-3').toggleClass('show'); $('#right').toggleClass('col-md-9 col-md-12'); }) </script> And then put a button or link elsewhere on your page, wherever you want to show it: <a class="btn page-action" id="btnSwitch" href="#showsubmitform" style="color:green;" data-toggle="collapse"><i class="fa fa-plus" aria-hidden="true"></i> Submit New Data</a> When the page is loaded the Tabular Report will be the only datapage showing, in full width. When the 'Submit New Data' link is clicked the Tabular Report moves to the right and shrinks to 9 columns from 12. The space that opens on the left is 3 columns wide and will now show the Submit/Details form. When the 'Submit New Data' link is clicked again it will hide the Submit/Details form and expand the Tabular Report back to 12 full columns. You can change the column numbers of the divs and button ids and labels to suit. This solution might help with some UI massaging, if anyone is working on that aspect of their app...
  4. I saw in this article that it is recommended to keep search forms short, and use an advanced search form if necessary. However, I could not find an article on how to link a simple search form and an advanced one together. What I would like to do is to have a simple search form, with 3-4 fields, and a button/link that says "Advanced options" that will expand the search form to reveal maybe 10-12 fields. I do not want to have the new advanced search form open in a new page; I'd prefer that everything stay on one page for the user's convenience. Ideally, I would like one long search form that can collapse to 3-4 simple fields, and expand to reveal all fields if necessary. Is this possible? Thank you!
×
×
  • Create New...