Deployment Direct From Caspio

[Freddy]

When deploying a datapage direct from Caspio how do I center the entire deployment so it will show up as a centered webpage?

[robelliott]

You could iframe the link and put it inside a div with width and margin attributes that will center it on the page, for example:

<div style="width:400px; margin:0 auto">
<iframe src="http://b4.caspio.com/dp.asp?AppKey=[i]yourkey[/i]" align="" frameborder="0" height="800px" scrolling="auto" width="400px"></iframe>
</div>

[kRv]

It is possible center form without iframe deployment. Please open linked style, enable advanced options, and go to Forms/Details -> Layouts.

Go to Source tab and add 'width: 400px; margin: 0 auto;' to definition of class cbFormOuterTable.

[MayMusic]

delegate, I added the styles you are recommending and when I open my page using direct from Caspio link it is not centered?!!! What am I missing here?

[kRv]

MayMusic, I'm sorry for late answer. I think Caspio branding enabled for your account. In this case proposed solution won't work, because Caspio form placed into additional outer table. I think, some script which will found branding table and set proper style settings for it can help you. Please look at script below. Add HTML block to DataPage, move block to the bottom, and put following code:

<input id="myAnhor" type="hidden" value=""  />

<script type="text/javascript">
	try {
		var v_parent = document.getElementById('myAnhor');

		while (v_parent.tagName.toUpperCase() != 'FORM') {
			v_parent = v_parent.parentNode;
		}

		if (v_parent) {
			var brandingTbl = v_parent.getElementsByTagName('table')[0];
			if (brandingTbl) { brandingTbl.style.cssText = 'width: 400px; margin: 0 auto;'; }
		}
	}
	catch (v_e) { }
</script>

[telly]

Hi @Freddy,

There are multiple possible solution to center a DataPage, you may directly change it to the style or add CSS on the DataPage: