Jump to content
  • 0

Screen Layout


RonAnderson

Question

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?

 

Zoom_@_100%.png

Zoom_@_90%.png

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

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

 

Link to comment
Share on other sites

  • 0

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. 

Screenshot_145.png

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!

Link to comment
Share on other sites

  • 0

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.

Link to comment
Share on other sites

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.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...