CSS ID and Class tags

[Connonymous]

I often find myself wanting to make small CSS updates to my datapages, but am not sure what class or ID houses the information I am looking for. Sometimes using the inspector helps, but other times I cannot find the element I am looking for. For example, I was previously trying to set a max-width value for my app and was told to use #caspioform. I don't see #caspioform pop up anywhere in the inspector though... is there a way to view what all these ID's and Classes are?

More specifically to this case, I now want to set a max-width on my details page, but it looks like #caspioform does not apply to the details page. What ID is used for the details page, and how would I better find this for myself in the future?

[PotatoMato]

Hi, @Connonymous. You can check this article on setting the width to datapages: https://howto.caspio.com/styles/fix-the-width-of-the-datapage/#:~:text=Set the width of a,source of your DataPage formatting.

 

-Potato

[autonumber]

Hi @Connonymous - you can use the class cbFormSection for the Details page.

<style>
section[class*="cbFormSection"]{
max-width: 200px;
}
</style>

[Connonymous]

@PotatoMato Thank you! I was trying to add this in the header of that particular datapage and it doesn't seem to be working, however if I edit the CSS in the Style, then it works as expected. Not sure why that would be, since I made sure to reference the class the same way in the datapage as it was written in the class, and even tried it with the !important tag, but either way, it works by inputting into the Style, so that is good enough for me, thank you!

[Connonymous]

@autonumber Adding this or anything similar to my datapage doesn't seem to work as expected, however adding it to the style page as Potato mentioned seems to have resolved the issue. Thank you!