Separate Input Fields For Time Parts - Mobile View

[kpcollier]

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 

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. 

[kpcollier]

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;
}

[BenjaminS]

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.

[CoopperBackpack]

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:
 

And paste this code:
 

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

[BenjaminS]

Dear CoopperBackpack,

thanks for the reply! The <style> was missing so now the code is recognised as such, but unfortunately it doesn't work. Cheers, Benjamin

 

[kpcollier]

@BenjaminS Could you send another screenshot of the DevTools, just like the one you originally shared, but with the new code in the header? With cbFormBlock7 selected, if possible.

[BenjaminS]

@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!

 

 

[BenjaminS]

Apparently I can no longer add attachments, so here is a link: https://www.icloud.com/iclouddrive/0a0mG_tP3DfvguQuB2sfyAWZw#Screenshot

 

[CoopperBackpack]

Hello @BenjaminS,

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



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)



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.

[BenjaminS]

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?

[CoopperBackpack]

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>

[BenjaminS]

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

[BenjaminS]

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