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.
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.
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.
- Web Form Demo
- Tabular Report Demo
- Gallery Report Demo
- Calendar to List Demo
- Calendar to Mini Calendar Demo
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:
- 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">
- 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.
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.
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.