Set the Width of a DataPage

You can set your Caspio DataPages to a default width by editing the DataPage Style.  The DataPage will add line breaks to DataPage content such as data and labels to attempt to fit into that width.  If the content cannot be confined to the width specified, the DataPage will overflow.  This article also explains how you can use a div tag, or the iframe deployment model to create scroll bars if a DataPage overflows its fixed area.

Set the width of a DataPage using a Style:

In the Caspio Bridge Explorer window go to the Styles view.  Select the Style that is applied to your DataPage and click Edit.  On the first screen of the Style wizard, click the check box labeled “Show Advanced Options (CSS Source).

Click Next twice to go to the Settings screen.  Now that the advanced options have been enabled you will notice an extra tab at the top labeled Source.  Click on that tab to view the CSS source of your DataPage formatting.

In the DataPage Elements panel we are going to select the section of CSS that applies to your DataPage type:

• Forms and Details Pages – From the Forms/Details section choose the layout option.  In the Source panel locate the .cbFormTable section.
• Results and Calendar Pages – From the Results Page section select Table, List/Grid, or Calendar Layout according to your DataPage type.  In the Source panel find the section .cbResultSet + the DataPage type.  The standard Caspio Bridge styles for these DataPage types already include a width attribute, so you will only need to adjust the current value.
• Charts – To set the size a Chart it is best to modify the appropriate values directly in the Chart DataPage wizard.

In the CSS section above we need to add a width attribute.  Here are some sample attributes:

Remember that for gallery style DataPages, this width is for the entire DataPage and not for each column.

Creating scroll bars if a DataPage overflows the fixed width:

Iframe Deployment

If you are not using parameters to transfer data, you can deploy your DataPage using the frame method.

Inside the deploy code you can set the values for the iframe’s width and height.  If the DataPage exceeds these values, scroll bars will be automatically generated.  You can add the width and height attribute anywhere in the first iframe tag.  Here is an example width and height attribute:

Overflow scroll bars in div tags.

If you are using parameters in your DataPages you can embed your DataPage into a div with a specific height and width.  Write the div tags directly in your web page before and after the deploy code.  The div section will create scroll bars if the DataPage content exceeds its bounds.  Here is an example of a div section: