How to center the details DataPage

[telly]

Hi- I just want to know if it is possible to center the DetailsPage

Thanks in advance.

[Kronos]

Hi @KHanley,

Maybe you can try this code to your header?

<style>
form#caspioform { text-align: -webkit-center; }
</style>
 

[Barbie]

Hi @telly,

Yes, it is possible. You need to add a Header and Footer in your DataPage and paste this code in the Header.
 

form[id^="caspioform"] {
    display: inline-block !important;
}

div[id^="cbOuterAjaxCtnr"] {
    display: block !important;
    text-align: center !important;
}

I hope this works.

-Barbie

[telly]

Hi -  tried this on my details configuration of the Tabular report and it didn't center, can you help me with that?

 

[SunakoChan]

Hi @telly, you can center it using a center tag, just add a  header and footer then paste the <center> tag on the header and the ending tag </center> on your footer.

I hope this helps.

[cheonsa]

Hi @telly,

 

You can use this script in the Header of your Details page:

<div id="caspioform" style="text-align: -webkit-center;>

and the closing div tag in the Footer.

</div>

I tried it on my end and it works. Hope this helps.

 

Thanks,

kristina

[Glitch]

On 6/21/2019 at 4:15 PM, Barbie said:

Hi @telly,

Yes, it is possible. You need to add a Header and Footer in your DataPage and paste this code in the Header.
 

form[id^="caspioform"] {
    display: inline-block !important;
}

div[id^="cbOuterAjaxCtnr"] {
    display: block !important;
    text-align: center !important;
}

I hope this works.

-Barbie

You just need to add this piece of code inside the block:

form[id^="caspioform"] {
margin: 0px auto;
}

 

That's it. 

 

=) 

[Harbinger]

On 7/3/2019 at 9:27 PM, kristina said:

Hi @telly,

 

You can use this script in the Header of your Details page:

<div id="caspioform" style="text-align: -webkit-center;>

and the closing div tag in the Footer.

</div>

I tried it on my end and it works. Hope this helps.

 

Thanks,

kristina

This is simpler. But I've been wondering if  this type of styling has any disadvantages to the other suggestions. Any thoughts?

[SunakoChan]

Hi - The text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements, only their inline content.
 

[SunakoChan]

Just to add you can you can check this helpful link: https://stackoverflow.com/questions/35127981/text-align-webkit-center-vs-text-align-center

[princezuko]

I've tried this and it worked for me. I'm glad there's an existing forum answer regarding this question.

[DefinitelyNot31337]

In addition to this, we may also specify this behavior to be default (on Styles level) so you don't have to specify the customization every time. 

 

To do so, locate your Styles first, but before modifying it I would suggest to duplicate the current style as backup.

Once you are in the Styles configuration:

1.) Click on Source Tab

2.) Select All from DataPage Elements

3.) Look for cbTableDefaultCellspacing

4.) Add the rule:

margin: auto;

 

Below is how it should look like:

Once this is saved, your DataPages with this localization will be centered with respect to its container

I hope this helps.

 

-DN31337!

[Alison]

Hi all,

I was testing and this code works for me:

<style>
#caspioform > div {
  margin: 0 auto;
}
</style>

You may follow this Caspio Labs video for reference:

 

[KHanley]

Hey. Despite reading various pages like this one, I can't figure out how to middle-center align everything on a search data page. I created a library database and would like the search box and everything around it (which is very little ) to be middle-centered, like a google search box. Can you help me? Much thanks. 

[telly]

Hi @KHanley,

Have you tried to get the class or id of the properties and add this attribute:

ID OR CLASS {
margin: 0px auto;
}

You can also try to use
<style>
CLASS OR ID
{margin-left{ margin: 50%; 
Margin-right: { margin: 50%; }
</style>

You can use CSS attribute, for reference you may check this link: https://www.w3schools.com/css/css_attribute_selectors.asp 

[autonumber]

Hi @KHanley - can you try this code below?

<style>
form#caspioform { text-align: -webkit-center; }
</style>

If still doesn't work, do you have a test DataPage URL that we can check?

[IamNatoyThatLovesYou]

Hi Everyone, just wanted to add this code as well when using Firefox to center the DataPage.

<style> form[id^="caspioform"] { display: inline-block !important; } div[id^="cbOuterAjaxCtnr"] { display: block !important; text-align: center !important; } </style>