Jump to content

Separate Input Fields For Time Parts - Mobile View

Recommended Posts

I'm trying to set up this workflow from the HowTo site. However, it seems you have to either choose between using this workflow or have your datapage be responsive for mobile devices. Of course I need both :D

Has anyone figured out how to get multiple fields on one line in a submission/details form? I've got the article workflow working, however, in mobile view, it shows each virtual field on their own line and looks hideous. 

It seems each field is surrounded by divs with a different 'cbFormBlock' number. Some of them are grouped into NestedBlocks, which seems to help me because my time virtual fields are all in cbFormBlock28 Nested Block. However, I am struggling getting them on the same line still, and I am thinking it is my lack of coding knowledge that is keeping me from the solution.

@media only screen and (max-width: 1025px) {

 display: inline-block !important;


This makes all of the virtual fields centered in the form for some reason. But, they are all on different lines, still. 

Link to comment
Share on other sites

Here is the solution. You need to drill down to which cbFormBlock you want to edit. Each of my cbNestedTableContainers has another cbFormBlock class with a number. cbFormBlock28 is the one I needed that included all of the fields I was trying to edit.

Then you need to make it display as a grid. This will get the fields all on the same line. 

You will need to use 'grid-auto-columns' or 'grid-template-columns' to change the width of the fields once they are on the grid. 

div[class*='cbFormBlock28'] {
  display: grid !important;
  grid-auto-columns: max-content;
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...