Jump to content

Sections, columns, collapsible methods - not Responsive freindly?

Recommended Posts

Used to always use Sections and Columns with HTML blocks to build visually well-formatted forms where fields are evenly spaced and aligned over each row.  I noticed enabling responsiveness renders that approach less than ideal.  It basically ignores column settings and wraps each field to its own row - EVEN THOUGH it has plenty of real estate to not do so.  With responsive enabled, it there a better way to build well-aligned forms over columns?

Basic aligned form using sections, columns, and html blocks:



Responsive disabled: alignment, sections and columns maintained, with extra space on wide screen PC device.



Responsive enabled: ignored sections, columns, and wraps, and reduces the overall width of form - even though it has plenty of space.  Almost like it thinks its a phone:



I am also using the Collapsible sections code but removing that it still behaves that way.

Thanks for any input!


Link to comment
Share on other sites

Hello @roattw,

Upon checking, I was not able to replicate this on my side. The columns are displayed as expected in the Responsive mode as well.
Is there any custom CSS or JS in the Header&Footer on the DataPage? If yes, please try to remove it to see if it affects the appearance.

You may find more information in the article: https://howto.caspio.com/datapages/datapage-components/multi-column-and-sections/

Feel free to update this thread with more information.

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.

Reply to this topic...

×   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.

  • Create New...