Screen Layout

[RonAnderson]

Hi, I have a submission datapage which has 1 column. Several elements are displayed in two's using the "Continue next element on the same line" function. When using a Android tablet I open the application from my web site. This defaults with a zoom of 100% and the application elements are distortoned. If I change the zoom to 90% the elements are correctly displayed. My browser is Google Chrome.

I've tried with a 2 column display and it makes no difference. I can't see anything in "Styles" which would fix this. Anyone advise a fix please?

 

[RonAnderson]

Hi @cheonsa and @Tubby,

I'm genuinely grateful for your responses. I eventually turned to Caspio for help and they very kindly came up with a solution very close to your response Tubby. Here's the code:-

@media (max-width: 1048px) {
div[class*="cbFormNestedTableContainer"]{
display:block !important;
}
}

The code need to be placed in the HEADER.

Kind regards

Ron

 

[cheonsa]

Hello @RonAnderson,

Just to verify, is the responsive option enabled on your DataPage? Responsive DataPages dynamically adapt to various screen sizes for better user experience on mobile and tablet displays. 

For more details, you can check these links: 

https://howto.caspio.com/datapages/responsive-datapages/responsive-datapages/

https://howto.caspio.com/datapages/responsive-datapages/responsive-behavior-on-tablet-and-mobile/

https://howto.caspio.com/datapages/responsive-datapages/modifying-styles-for-tablet-and-mobile/

 

Hope this helps!

[Tubby]

Hi @RonAnderson

It looks like it is a mobile responsive issue where the container of your custom dropdown has min-width set. Try applying some CSS codes using @media (min-width: 150px) {} and see what works or makes the form look more natural.

I unfortunately can't provide any specific code because I will probably need to inspect your web page to check but I hope this helps.