Jump to content

Search the Community

Showing results for tags 'responsive'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • 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


Last Updated

  • Start


Filter by number of...


  • Start




Website URL






Found 15 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. Hi, if you're like me, you want to optimize the Bulk Edit modal window for smartphones. This CSS works for me: http://cameronbaney.com/2012/07/26/pure-html5css3-responsive-modal-window/ add it to #BulkUpdateForm
  3. Hi, I would like to hide fields properly in the new responsive code. I've been enclosing fields via HTML Block via <table style="display:none"> Field1 Field2 </table> to hide my fields but with the new responsive feature enabled. It is not hiding the fields properly. Any thoughts/suggestions on this?
  4. Hi all, I am using the code to make a datapage more responsive, and while it works wonderfully, I don't know how to make the calendar popup larger to be usable on mobile. When I click on the calendar it shows up but it is way to small to be mobile friendly. Below is what I have for the responsive code. I've been searching styles to try and find out how to change the popup but have been unsuccessful. Any and all help is much appreciated! <!-- Responsive Code Begin --> <style> /* Change max-width to what size you want the form to change at */ @media (max-width: 767px) { #datapage-form table { width: 100% !important; margin-top: 1px !important; } #datapage-form td { display: block; } img[alt~="Calendar"] { position: relative; top: -5px; } } </style> <div id="datapage-form" > <!-- Responsive Code End -->
  5. Hello! I have been trying to get this signature box to work with a responsive submission form but i can´t get it to work, it shows up in the form and i can draw in the box but it doesn´t save to the table. It works fine if I disable responsive and ajax. Does anyone have any ideas to solve this? Kind regards / Chrille
  6. esisov

    Responsive Forms

    Hi, i have been using the responsive code that we can found on online help form my forms. However, it is not truly responsive because we can see completely the fields or text that is it on the forms. I also made some tests changing this portion of the code with 90% but does not working either. Anyone have an idea of how to solve this? Thanks!
  7. Watched a YouTube video about making a DataPage responsive. Then, I checked my account, but it seems that is not yet available. When can I expect this feature be added in my account?
  8. My company's website is now going to a completely responsive front end, but currently none of the Caspio forms on our site work this way. I'm wondering id there are any others who are facing a smilier problem and if there is a solution available. I understand that Caspio forms are not responsive out of the box, but can they made to be? Philip
  9. Hi all, Does anyone know how to make image responsive? There is a responsive code for image, but it doesn't work on datapage when you have an image. Thanks
  10. Hi, With the responsive gallery code ( on mobile), the results are confined to being separated by <tr>'s (or in some cases colspan="2") meaning that a field label can't be followed by it's value on the same line. I'm wondering if I hide the field label can I append the field label to the value using javascript? For instance: (as it exists) Booth # 34 For instance: (as I'm trying to do) Booth # 34 <---- ("Booth #" label hidden in datapage but appended to beginning of value through code) Never mind! I figured it out No JS needed!
  11. I've built an embedable tabbed interface that contains 3 iframe tabs, using the standard Caspio code http://howto.caspio.com/tech-tips-and-articles/advanced-customizations/create-embeddable-tabbed-interface/. One tab is a pivot table, another a tabular report, the other is a list. I've deployed the whole interface using the embedded option. But how can I make this whole package responsive? Do I apply Caspio responsive code to each report separately, to the interface, or what? Any help appreciated.
  12. Hello, I have implemented the Caspio responsive code on several types of reports and they have worked perfectly. However, I am now trying to use the responsive code on a submission form and the page width does not adjust correctly. I believe it is due to the submit button within the form as it is not scaling properly. Since the submit button image does not adjust, then this impacts the overall width of my page when viewed on a mobile browser. Below is the URL: http://directlinecruises.com/carsite/freecruisebrochure.htm Any suggestion on how to control the scaling of the submit button to fix this issue? Thank you.
  13. Hello, I read through the responsive datapages overview, but there is no information or guidance on how to apply that code to a map display. Is there a way to make a Google map responsive or override the inline styles based on device once the map loads on the page? Also, if I want to have smaller map appear on the details page than the main large one on the results page, do I need to create and apply a map specific to a unique details datapage setup?
  14. Good morning all, I am currently using the Caspio article to make my datapage responsive, the one issue I am having is trying to adjust the label text so it is left aligned instead of right aligned when the page responds to a smaller view width. I have put the line of code I have been trying to use between two "//PROBLEM CODE HERE//" lines. This is a details datapage where the labels are normally right aligned. <!-- Responsive Code Begin --> <style> /* Change max-width to what size you want the form to change at */ @media (max-width: 768px) { * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } //PROBLEM CODE HERE// #datapage-form labelcell {text-align: left !important;} //PROBLEM CODE HERE// #datapage-form table { width: 100% !important; margin: 0px !important; } #datapage-form td { display: block; } #datapage-form input, #datapage-form select, #datapage-form textarea { width: 100% !important; } #datapage-form input[type=radio], #datapage-form input[type=checkbox] { width: auto !important; } #cbCalendarConteiner {;} img[alt~="Calendar"] { position: relative; left: -19px; top: 5px; } img[alt~="Audio"] { position: relative; left: -19px; top: 5px; } img[alt~="Download"] { position: relative; left: -46px; top: 5px; } #datapage-form input + span > a { display: inline-block; width: 1px; overflow: visible; position: relative; left: -8px; } #datapage-form input + a[href="#"], #datapage-form input + a[href="#"] + a { display: inline-block; width: 1px; overflow: visible; position: relative; left: -8px; } } </style> <div id="datapage-form"> <!-- Responsive Code End --> Thank you!
  15. I have a responsive template on my website, but one particular section on a phone overspills over the right edge. This happens on any page that has a form / text from a Caspio deployment. An example page is: https://beautyandfragrancejobs.com/sign-up-step-3/?Candidate_ID=29500 I'm talking about the 'What You Get Section' On my iPhone the 3rd picture in each column goes over the right hand side of the site. How do I fix this? Thank you in advance.
  • Create New...