How do I retain the look and feel of the mobile responsive Configurable List replaced wtih separate fields on my form?

Hello,

How can I make a short text entry field so that the label is on the far left, then there is a gap and then the box goes to the full width of the rest of the page. Please note that I do not want this for all Short Text Entry boxes on the form.

Previously, I used a mobile responsive Configurable List and that worked well, but unfortunately with the change to the new PDF designer (which is good), there are just now far too many fields to show in the autoresponse PDF. Therefore, I need to break these down into separate fields, but I want to retain the look and feel of the mobile responsive Configurable List. Again, I do not want this for all fields, so if you could let me know the CSS code that I can enter for each of the fields I want to change, I can then add this.

Thanks. 

Hello,

As far as I understand, you want these fields

to display like these ones

I will work to get the codes for you, but if I am wrong with my assumption, please update me via this thread.

Thank you.

Hi. You have understood perfectly!! Important though, is that I have some flexibility to play around with the layout.

I liked the look of the original, but the new PDF version, although very good, does not display the Widget data nearly as well as the old one!

Thanks so much for your help.

First, you would need to unshrink the fields. You can select multiple fields and do this via right click menu:

Since you have section collapse elements on the form, this would help to style only the fields under them. You can get the IDs via Inspect Element tool of the browser:

Here is example code for the first section:

#section_176 > li > label {

  float: left !important;

  width: 30%;

}

#section_176 > li > div {

  width: 100% !important;

}

#section_176 > li > div > input, #section_176 > li > div > select, #section_176 > li > div > span {

  width: 50% !important;

}

Please try this and let us know if we can assist further.

We will wait for your reply. 

Unfortunately, that is not a complete solution, but to avoid any confusion/mistakes, it would be better if you start with this and we will provide further adjustments.

Thank you!

Hi. I can't find the Section ID. I am using Chrome and go to More Tools - Developer Tools, but I do not see any Section ID. Sorry.

So that I do not mess things up, I have cloned the form and put in some new fields to test this on (they are under one of the sections)

https://eu.jotform.com/build/82884478749379

Nope. i simply cannot figure it out. I right click on the section divider and I cannot see the section ID

You need to check on form's direct URL or in preview mode, but not in builder. 

When you right click on the collapse, the div element will be highlighted, you need an id of ul element under it:

I think you can add the fields into sections how they should be and we will get the IDs for you. 

Please let us know when this will be added.

OK. I have figured out how to identify the Section IDs. I have also done one test to see how this works. It is for Occupant Passport Details Room Single Room # 1 (Section ID 183). This works well. However, 3, hopefully, small things and then I can do the rest myself. 

1. I would much prefer the calendar to appear as it does in the Configurable List widget (see your screen shot above of Double Room 1 at 09:00am).

2. I would like the drop down menu to appear as the screen shot above (i.e., same length and format as the short text fields and

3.  Also, I would like the special requirements box to appear in the same way.

Thank you for your help.

Hello,

While I have fixed issue 3 above with the Long Text Entry, I am still waiting for suggestions on the drop-down menu and the calendar. 

Thanks.

Hello,

Just wanted to let you know that I am now working on it. Thank you for providing form URL.

Thank you. I think the date is now ok as the newly inserted widget looks much better. It is now only the drop down menu.

Hello again,

I have added the code to clear max-width value and the fields seem to be shown fine now:

#section_197 > li > label, 

#section_183 > li > label {

    float : left !important;

    width : 32%;

    font-family : oswald;

    font-size : 15px;

    font-weight : normal;

}

#section_197 > li > div,

#section_183 > li > div {

    width : 100% !important;

    max-width: none;

}

#section_197 > li > div > input, #section_197 > li > div > select, #section_197 > li > div > span,

#section_183 > li > div > input, #section_183 > li > div > select, #section_183 > li > div > span {

    width : 60% !important;

    max-width: none;

    font-size : 13px;

    font-weight : normal;

}

If you want to make date fields same width, you can use this code, it will resize all datepickers:

iframe[src*="datepicker"] {

  width: 60% !important;

}

Let us know if you need further help.

Thank you so much for your help. I will try it soon (as soon as the Spreadsheet to Form Widget starts working again and I can test the form :)).

Hi,

But the drop-down Gender box is still not quite right. The input box appears under the label as opposed to being the same as the other boxes. This is what I would like to fix. Thanks.

after inserting the code for the date fields, they are not exactly the same length as the other fields. I have tried to adjust their length (and their height and font) to make them the same as the others, but I have trouble selecting them in the CSS editor.

Please allow me sometime to check on this and get back to you with relevant information. 

Thank you for your patience. 

Hello. No need to do this anymore. I have found a work around. Thanks.

Thank you for updating us! 

We will gladly assist if you need any further help, just let us know.