How to make the Textbox in Configurable List narrower

  • Profile Image
    rsvpfree
    Asked 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.

  • Profile Image
    Charlie
    Answered 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
    rsvpfree
    Answered 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
    Shadae
    Answered 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
    Shadae
    Answered 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.