Search the Community

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?

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.

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

Hi, Does anyone know if/how to change the responsive setting for 'tablet' view from the 1024px to something lower like 800px? A calendar datapage is really not good in responsive mode because it changes from full view to a slim list when less than 1024px. This gives a bad UX because you might have a screen 1050px or so and the calendar goes responsive from full month view with blocks to a mobile 'list' that the user has to scroll a lot to see the entire date range. LOTS of white space to scroll past, with this method. It would be great if one could change the setting for 'tablet view' from < 1024px to something like < 800px. I don't see anywhere in the Styles to do this--is it possible? Thanks for any help-

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

Hi, I have a datapage set to Responsive and it is used in several locations (deployed on several different html pages)--some of those locations are full screen and some are in locations with a constrained width (700px min-width but up to 1000px or so, depending on where). When deployed in the constrained width locations the datapage reverts to 'tablet' responsive display (568px – 1024px – tablet devices) because those location's widths fall within the 'tablet' setting. Is there a way to adjust, in the datapage itself so it doesn't affect all datapages with the same Style, the Responsive range for tablets? Meaning change "568px – 1024px – tablet devices" to "568px – 700px – tablet devices" and "1025px and above – desktops and laptops" to "701px and above --desktops and laptops"? This particular datapage is less useful, and looks bad in 'tablet' display (in these particular locations) and doesn't actually need to be responsive between 700px-1000px. I do need to have it be responsive otherwise, to change for small tablets and mobile devices so I think the easiest thing is to change the Responsive 'ranges.' I just don't know how-- I imagine it would be some CSS in the datapage header, something along the lines of: @media only screen and (min-width:700px ) {} Anyone have an idea how to do this? Many thanks in advance--

Hi, Does anyone know if there's a way to tweak a Calendar datapage that shows the full month for full screen (meaning a large rectangle with a panel for each day) to show only the current week when showing in tablet or mobile format? I have a calendar that is full size on the 'main' page but is also used in smaller displays (falls into the tablet range) for specific related records and in those instances I need to show just the current week, or at least have it start with the current day so the user doesn't have this super long list for each day of the month (most of which will be blank). I'm basically trying to use the same Calendar datapage for a full-view (laptop/desktop in responsive) and a narrowed dataset for current week or starting with current day when in tablet or mobile view. I can't find a way to do this in the Style section--if anyone has an idea how to do this I'd really appreciate it!

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?

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

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!

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?

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

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

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!

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.

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?

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!

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.