Date Field Formatting

  • Profile Image
    WSIguy
    Asked on August 30, 2018 at 03:34 AM

    Hi,

    I cloned this form...

    https://form.jotform.me/71091518727459 

    to modify and create this form...

    https://form.jotform.me/82351614884461 

    Please note the date fields have enlarged themselves on the 2nd form. This only happened suddenly after working with the form. I noticed it after adjusting the style of radio/check boxes in the advanced css menu.

    How can I get my date boxes back to the nice, compact way that they were?

    **On the first form, you may need to select from "What would you like to do?" in order to see the date fields.

    Best regards,

    Bruce

  • Profile Image
    Richie_P
    Answered on August 30, 2018 at 11:05 AM

    Kindly go to your date picker properties > Advanced> then enable Shrink to "ON"

    Then add this custom CSS to adjust the width of the Date Picker.

    #cid_25{
    width:100px;
    }

    Guide:https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Thank you.

  • Profile Image
    WSIguy
    Answered on August 30, 2018 at 11:17 PM

    Thank you,

    Please see this screencast for a couple of issues:
    https://www.youtube.com/watch?v=7s-SK90IRb4

    1) Drop-down selection rendering within the date field, instead of next to it.

    2) Having one field render with the label to the left (not on top).

    3) Curious as to why this form required your code to reduce the date field size, when its parent form had smaller dates without your code.

    Thanks, as always, for your assistance.

    Regards,
    Bruce

  • Profile Image
    jonathan
    Answered on August 31, 2018 at 04:26 AM

    Hi Bruce,

    I fixed the style issue on your form https://form.jotform.me/82351614884461

    Can you please check again.

    1535704004zzz 2018-08-31 16.25.03.png

    Let us know if issue persist.

  • Profile Image
    WSIguy
    Answered on August 31, 2018 at 08:02 AM

    1) Please have a look on mobile view and see if you think that is an acceptable rendering :-)

    2) There was the issue of the postal code field where we wanted the textbox to render to the right of the symbol (〒), not below it.

    Also, I have moved this form forward by cloning and rearranging here:
    https://form.jotform.me/82418858784474 

    I would prefer to fix up this one.
    I applied your padding code (in your last reply) to this form and it works (well for desktop display).

  • Profile Image
    Richie_P
    Answered on August 31, 2018 at 10:02 AM

    You can add these custom CSS to fix the rendering.

    @media (max-width: 480px){
    #id_33 {
        margin-left:0px;
    }
    #cid_32 {
        width:auto;
    }
    #cid_25 {
        width: auto;
    }
    }

    To have the postal to the right, you can add this CSS code.

    #id_27{
        display: inline-flex;
    }

    Please give it a try and let us know how it goes.

    Thank you.

  • Profile Image
    WSIguy
    Answered on August 31, 2018 at 10:45 AM

    Thanks Richie P,

    Getting there.

    Now, the postal code renders on the one line, but the input box is now a sliver about 1 character long.
    It seems to be okay on mobile view, but not the main, desktop view.

    I hope we can fix that.

    Regards,

  • Profile Image
    Richie_P
    Answered on August 31, 2018 at 11:57 AM

    You can add this CSS code to increase the width of the postal field.

    #input_27{
    width: 200px;
        margin-left: 10px;
    }

    Here is also the code to adjust the width of the postal field when in mobile view.

    @media (max-width: 480px){

    #input_27 {
        width: 150px!important;
        margin-left: 10px;
    }

    }

    Thank you.

  • Profile Image
    WSIguy
    Answered on August 31, 2018 at 12:05 PM

    Thanks for the ongoing assistance.

    This code:

    #input_27{
    width: 200px;
        margin-left: 10px;
    }

    Leaves the symbol on the left, and then the input box waaaay over on the right, with a huge gap in between.

    https://form.jotform.me/82418858784474

    Regards,

  • Profile Image
    EltonCris
    Answered on August 31, 2018 at 01:37 PM

    Do you want it to look like this on desktop? 

    If yes, inject this CSS codes to your form.

    label#label_27 {

        width: 20px;

    }

  • Profile Image
    WSIguy
    Answered on August 31, 2018 at 01:40 PM

    Yes!
    Thank you!