help css in designer

  • Profile Image
    melodicsounds
    Asked on March 12, 2016 at 11:28 PM

    in my form: https://form.jotform.com/60328003160945 in my second question "Para cuando lo necesitas" which is a calendar + time, the time drop down menus are too small and the text doesn't look good. I tried making bigger width in designer but doesn't seem to change, can you give me a css code to insert it to that time drop down menu to make it look correctly?

  • Profile Image
    Charlie
    Answered on March 13, 2016 at 12:49 AM

    See if this CSS code helps:

    /* Width of the main element*/

    #cid_46 {

        max-width: 60% !important;

    }

     

    /* Span element holding the time part*/

    #cid_46 > span.allowTime-container {

        float: right !important;

        width: 50% !important;

    }

     

    /* Drop downs of the time part*/

    .time-dropdown.form-dropdown {

        width: 100% !important;

    }

     

    Paste it under your CSS tab in the Form Designer Tool.

    Here's my cloned form with that code applied: https://form.jotform.com/60720189447964 

    Let us know if you need more help on this.

  • Profile Image
    melodicsounds
    Answered on March 13, 2016 at 06:19 PM

    I added the code but didn't worked on my end, can you check please for me? 

  • Profile Image
    jonathan
    Answered on March 13, 2016 at 07:29 PM

    I have fixed this on your form http://www.jotformpro.com/form/60328003160945   by updating the CSS code to bit more higher value

     

    /* Width of the main element*/

    #cid_46 {

        max-width : 70% !important;

    }

     

    Let us know if there are still issue.

     

     

     

  • Profile Image
    melodicsounds
    Answered on March 15, 2016 at 05:29 PM

    Thanks for this... I have another form with the same problem.. I added the updated code you added but didn't worked on this form:

     

    https://form.jotform.com/60410209291950 see the calendar please.

  • Profile Image
    Kevin_G
    Answered on March 15, 2016 at 06:00 PM

    It is because it has a different ID, try with this code:

    #cid_13{

    max-width : 70% !important;

    }