Responsive web design is an approach for creating web pages that through a fluid layout dynamically adapt to various devices and screen sizes for better user experience and to eliminate or reduce manual resizing or scrolling.

Currently, Caspio DataPages are not inherently responsive, but you can make any DataPage responsive by applying the steps in this Tech Tip article. The process is the same for all DataPage types, but the code segments that you need to use are different. The code segments provided are purely CSS and HTML and no JavaScript is required.

Note that for multi-page DataPages such as Reports, you will need to follow the steps for Forms for the search form, then the steps for Tabular (or Gallery) in the result set, and then the steps for Forms again for the details page.

The responsive behavior provided here is compatible with all recent versions of Safari, Firefox and Chrome, as well as IE 9.0 and above.

Live Demos

We have created a few examples to show you how the end results of these tech tips work. The links below open a new tab or window and load a responsive DataPage. Open them on different size devices such as phones and tablets and note the difference in rendering. Alternatively, while opened in a desktop browser, resize the browser window and notice the on-the-fly change in rendering.

Different DataPage Deployment

The Tech Tips provided in this article can be used without modification when direct URL deployment is used. If you have embedded your DataPage on your website, you have to make sure of two things:

  1. Your own website is responsive. Adding the code below to the HEAD section of your web pages will provide basic responsiveness to your site:
    <meta name="viewport" content="width=device-width, initial-scale=1">
  2. You have the <!DOCTYPE html> declaration at the very beginning of your HTML document. Add the code below to the beginning of your HTML document before the <html> tag.
    <!DOCTYPE html>

If you use iFrame deployment, be aware that iFrame width will drive media query, not the browser width. You may need to make adjustments to your iFrame or media query width in order to get the desired results from the CSS.

Note Please note: These articles provide advanced HTML and CSS to add functionality outside of Caspio Bridge standard feature set. These solutions are provided “as is” without warranty, support or guarantee. The code within this article is provided as a sample to assist you with responsive design customizations. You may need good understanding of responsive design technics, HTML, and CSS to customize them to your needs.