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) {

div[class*='cbFormBlock28']{
 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

  • 1 year later...

I am trying to achieve a very similar thing. In my submission form that I want to use predominantly on mobile I have 2 input fields, first for hours and second for minutes. I need them to be displayed side by side in mobile view.

I tried the proposed solution, but it doesn't work for me. I found my cbNestedTableContainers has another cbFormBlock class with a number (attach 1) and I have pasted the code in the header of my submission form, but all I get is displayed code (attach 2). If someone can guide me to the solution I would be very grateful.

I must add that I am far (far) less savvy than kpcollier so my mistake could be something very obvious.

Screenshot 2023-04-25 at 07.52.45.png

Screenshot 2023-04-25 at 07.53.52.png

Link to comment
Share on other sites

Hello @BenjaminS,

It looks like the code is displayed as text because the 'style' tag is missing.
CSS styles must be added between the tags <style> </style>

In the DataPage Header disable the HTML editor on the Advanced tab:
 

CQvN0Mn.png

And paste this code:
 

7rlNNgb.png

<style>
@media only screen and (max-width: 1024px) {

div[class*='cbFormBlock7']
 {
 display: grid !important;
 grid-auto-columns: max-content;
}

}
</style>

As far as I can see, according to your screenshot, the code should be added for cbFormBlock7.

Hope this helps.

Link to comment
Share on other sites

@kpcollier

thanks for taking the interest. I've made some progress, this is where I am at.

This code will make the fields in question to shrink to "auto" size (I would prefer to set the size to 100px, but is OK):

<style>
@media only screen and (max-width: 1024px) {
div[class*='cbFormBlock9'],
div[class*='cbFormBlock10'],
div[class*='cbFormBlock11'],
div[class*='cbFormBlock12'],
div[class*='cbFormBlock14'],
div[class*='cbFormBlock15'] {
    display: grid !important;
    grid-auto-columns: max-content;
}
}
</style>

However, they still appear on top of each other. Since the fields are  time input, I need the hours (h) and minutes (min) pairs to appear side by side:

line 1: Block9 and Block10;

line 2: Block11 and Block12;

line 3: Block14 and Block15.

Any help is much appreciated, thanks in advance!

 

 

Link to comment
Share on other sites

Hello @BenjaminS,

If I understood the expected result correctly, this is the one you are trying to achieve: 

1jfM2lJ.png

Do you use the 'Continue next element on the same line' option for all three 'hour'  fields?
In your screenshot, I can only see a comma after one of the fields (a comma is added if the 'Continue next element on the same line' option is enabled for the field)

YdkttJS.png

I mention this since with this option the fields are wrapped with a div that has the following CSS class: cbFormNestedTableContainer.

You can see this class (highlighted) on the screenshot. So, we are interested in div elements with this class. In my example, they are cbFormBlock11, cbFormBlock16, and cbFormBlock21.
I added the following code and the result is on the screenshot. 

<style>
@media only screen and (max-width: 1024px) {

div[class*='cbFormBlock11'],
div[class*='cbFormBlock16'],
div[class*='cbFormBlock21']
 {
 display: grid !important;
 grid-auto-columns: max-content;
}

}
</style>

My suggestion is to double-check if you use the  'Continue next element on the same line' option and to select 3 corresponding div elements.

Link to comment
Share on other sites

Hello @CoopperBackpack,

thank you for your answer.

Yes, you understand my intention correctly.

You are right, only the first line had the 'Continue next element in same line' option enabled. For consistency, I enabled this option for the other two hour fields as well, but none of them appear in the same line. It seems that the responsive mode instructions override this for phones = width < 576.

This is another screenshot of the current state, if it is of any help.

Do you have any other suggestions?

Link to comment
Share on other sites

Hello @BenjaminS,

Thank you for the provided screenshot. 

I can only see 2 divs with the cbFormNestedTableContainer class. And I can see that 'grid' is added to many div elements. 

This should be the reason for the unaligned fields. The idea is to position multiple elements inside the grid parent elements. This is why those elements with the cbFormNestedTableContainer class are helpful. They are parent containers and inside them, we have hours and minutes fields.

Could you test this code to see if this helps to align the Start and End time fields?

<style>
@media only screen and (max-width: 1024px) {

div[class*='cbFormBlock8'],
div[class*='cbFormBlock11']
 {
 display: grid !important;
 grid-auto-columns: max-content;
}

}
</style>
Link to comment
Share on other sites

Hello CoopperBackpack,

thanks for your input. Unfortunately, this didn’t change anything. I also tried it with responsive mode turned off, but no changes. I am thinking it might be something else in this DataPage. I quickly tried it on a dummy and it works there. I will rebuild the form later today and report back.

Thanks again for the help!

Benjamin

Link to comment
Share on other sites

On 4/27/2023 at 11:49 AM, CoopperBackpack said:
<style>
@media only screen and (max-width: 1024px) {

div[class*='cbFormBlock8'],
div[class*='cbFormBlock11']
 {
 display: grid !important;
 grid-auto-columns: max-content;
}

}
</style>

@CoopperBackpack

Something was broken in that DataPage. After I rebuilt it from scratch, everything works as it was supposed to. 

To sum up for the posteriority: CoopperBackpack's code as quoted above works!

Cheers

Benjamin

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

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