telly Posted June 21, 2019 Report Share Posted June 21, 2019 Hi- I just want to know if it is possible to center the DetailsPage Thanks in advance. Quote Link to comment Share on other sites More sharing options...
1 Kronos Posted December 28, 2022 Report Share Posted December 28, 2022 Hi @KHanley, Maybe you can try this code to your header? <style> form#caspioform { text-align: -webkit-center; } </style> Quote Link to comment Share on other sites More sharing options...
0 Barbie Posted June 21, 2019 Report Share Posted June 21, 2019 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 Quote Link to comment Share on other sites More sharing options...
0 telly Posted June 22, 2019 Author Report Share Posted June 22, 2019 Hi - tried this on my details configuration of the Tabular report and it didn't center, can you help me with that? Quote Link to comment Share on other sites More sharing options...
0 SunakoChan Posted June 22, 2019 Report Share Posted June 22, 2019 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. Quote Link to comment Share on other sites More sharing options...
0 cheonsa Posted July 4, 2019 Report Share Posted July 4, 2019 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 Quote Link to comment Share on other sites More sharing options...
0 Glitch Posted August 20, 2019 Report Share Posted August 20, 2019 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. =) Quote Link to comment Share on other sites More sharing options...
0 Harbinger Posted August 24, 2019 Report Share Posted August 24, 2019 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? Quote Link to comment Share on other sites More sharing options...
0 SunakoChan Posted August 24, 2019 Report Share Posted August 24, 2019 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. Quote Link to comment Share on other sites More sharing options...
0 SunakoChan Posted August 24, 2019 Report Share Posted August 24, 2019 Just to add you can you can check this helpful link: https://stackoverflow.com/questions/35127981/text-align-webkit-center-vs-text-align-center Quote Link to comment Share on other sites More sharing options...
0 princezuko Posted October 9, 2019 Report Share Posted October 9, 2019 I've tried this and it worked for me. I'm glad there's an existing forum answer regarding this question. Quote Link to comment Share on other sites More sharing options...
0 DefinitelyNot31337 Posted October 10, 2019 Report Share Posted October 10, 2019 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! Quote Link to comment Share on other sites More sharing options...
0 Alison Posted April 4, 2022 Report Share Posted April 4, 2022 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: Quote Link to comment Share on other sites More sharing options...
0 KHanley Posted December 22, 2022 Report Share Posted December 22, 2022 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. Quote Link to comment Share on other sites More sharing options...
0 telly Posted December 31, 2022 Author Report Share Posted December 31, 2022 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 Quote Link to comment Share on other sites More sharing options...
0 autonumber Posted January 2, 2023 Report Share Posted January 2, 2023 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? Quote Link to comment Share on other sites More sharing options...
0 IamNatoyThatLovesYou Posted June 29, 2023 Report Share Posted June 29, 2023 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> Quote Link to comment Share on other sites More sharing options...
Question
telly
Hi- I just want to know if it is possible to center the DetailsPage
Thanks in advance.
Link to comment
Share on other sites
16 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.