What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to make the Textbox in Configurable List narrower

    Asked by rsvpfree on March 09, 2015 at 07:13 PM

    However, I would appreciate your further help if you could make the following changes to its appearance for me, as follows:

    (1) the text box to contain the time should not be as wide as at present (see above for how I would like it: big enough to take 12:59).

    (2) the vertical space below "Start Date of Event" and "Start Time" to be reduced, as shown above.

    configurable list textbox width
  • Profile Image
    JotForm Support

    Answered by Charlie on March 09, 2015 at 09:46 PM

    Hi,

    May I know why would you like to use the Configurable List widget for the "Start Date of Event Start Time"? Or am I looking at an older version of your form? It seems that this is not the best form field for this. This is the form I'm looking at: http://form.jotformpro.com/form/50673843680966.

    This is what I see:

    I would advise using the DateTime field instead, or you could only use a separate "Time" field.

     

    This would let us style the form field easier instead of using a Configurable List widget. Please do share us the final form you have regarding this so that we can assist you better.

    Thank you.

  • Profile Image

    Answered by rsvpfree on March 10, 2015 at 03:05 AM

    Charlie. My current form is at http://form.jotformeu.com/form/50677143349359

    You ask why I don't use your DateTime field. I investigated this tool earlier, and decided NOT to use it for the following reasons:

    (1) it only seemed to allow the month to be entered as a number, and I preferred words as being clearer to my users

    (2) I wanted to add options "Noon" and "Midday" to the times, to enable my users to avoid doubt over times such as "12:00" (following the mantra of "Don't Make Me Think")

    (3) it added an unavoidable clickable calendar icon, which looked attractive on a desktop browser, but performed badly on smaller screens such as iPhone 4, so I preferred to avoid it.

    The Configurable List widget seemed to allow me to put a complete date/time entry of my own choice on one line, even with narrow viewports. The result was acceptable.

    However, I wanted to make the Date "required" but not the Time, and the way my field was set up didn't seem to allow that, so I was trying to split the two functions (Date and Time) into separate fields to allow that.

    I also investigated the DateTimeSingle widget, but found that it didn't work as advertized, as documented in the following thread:

    http://www.jotform.com/answers/516381-Widget-DateTimeSingle-ignores-my-Manual-Date-Format#2

    So, to summarize, I have good reasons NOT to use your DateTime tool/field.

  • Profile Image

    Answered by Shadae on March 10, 2015 at 10:57 AM

    Hi rsvpfree,

    Thank you for providing us with the exact form and the reason that you would like to use this widget to enter your date.

    I would be happy to provide you with the CSS code that would be need to make the fields narrower. Please allow me some time to provide you with this.

    Thank you.

  • Profile Image

    Answered by Shadae on March 10, 2015 at 01:42 PM

    Hi rsvpfree,

    Please add the code below to the Custom CSS field within the configurable list widget:

    .col1 > select, .col2 > select, .col3 > select, .col8 > select

    {

    max-height : 18px;

    font-size : small;

    }

    .col7 input[type="text"]

    {

    max-height : 18px;

    font-size : small;

    }

    I hope this helps, please inform us if you need further assistance.

    Thank you.