css help with date time width

  • beatsahead
    Asked on October 25, 2015 at 5:00 AM

    Would appreciate help with the form at 

    http://dev.beatsahead.com/portfolio/corporate-djs/

     

    I am pleased with the overall look but would like to see the minutes and hours inside the time fields, and reduce the padding between fields.

     

  • Kevin Support Team Lead
    Replied on October 25, 2015 at 2:57 PM

    I've cloned your form and made some test,here is how it looks with the changes :

    css help with date time width Image 1 Screenshot 20

    You can take a look to my form and if this is what you want , go to Designer tool and paste this CSS code : 

     

    .form-section.page-section {

        padding : 20px 1px 1px 6px;

    }

     

    .allowTime-container {

        width : 90px !important;

        position : absolute;

        margin-left : 70px;

    }

    Let us know if you need more help.

     

  • beatsahead
    Replied on October 25, 2015 at 4:19 PM

    Thanks, but its the width of the hours/minutes I want to increase not the space between them

  • Kevin Support Team Lead
    Replied on October 25, 2015 at 5:00 PM

    Take a look to the changes now, here is my form : 

    https://form.jotform.com/52975934188977?

    And if this is what you are trying to achieve, this is the CSS code that I'm using :

    .form-section.page-section {

        padding : 20px 1px 1px 5px;

    }

     

    .allowTime-container {

        width : 100px !important;

        position : absolute;

        margin-left : 52px;

    }

     

    .form-sub-label-container {

        width : 43px !important;

    }

     

    .form-sub-label-container div {

        display : none;

    }

     

    [data-type="control_datetime"].allowTime .allowTime-container .form-sub-label-container:last-child{

        margin-left:-5px;

    }

     

    If you need more help, feel free to contact us.