The width of the dropdown is too small on mobile devices

  • Profile Image
    evank001
    Asked on October 31, 2017 at 05:31 AM

    Dear Jotform guys,

    I struggle with the width of one my field ("que cherchez vous field") on a mobile browser. 

    Here is the url of the form : https://form.jotform.com/42083997895980

    Have a look : while on jotform interface it is perfect :  

    1509442133Shot sur jotform2.png

    On mobile, the field que cherchez vous is too small to make the text appear perfectly : 

    1509442160On mobile.png

    Do you have a clue ? 

    Thanks !

    Adrien

  • Profile Image
    Welvin
    Answered on October 31, 2017 at 06:31 AM

    You may want to make it 100% on mobile devices. If yes, inject the following custom CSS codes:

    @media only screen and (max-device-width: 767px) {

    [data-type="control_dropdown"] .form-input, [data-type="control_dropdown"] .form-input-wide {

        width: 100% !important;

    }

    }

     

    Please follow the steps on this guide to inject the codes: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

  • Profile Image
    evank001
    Answered on October 31, 2017 at 08:32 AM

    It worked thanks so much Welvin, you rock !

  • Profile Image
    evank001
    Answered on December 26, 2017 at 04:31 AM

    Hello there, 

    merry Christmas to all of jotforms support rockers.

    As I said in this topic, it worked for regulars fields but when it comes to particular fields as payment fieds within the a payment widget, it does not work unfortunately1514280590field payment.png

    Any help ? 

    Cheers Guys !



  • Profile Image
    Nik_C
    Answered on December 26, 2017 at 05:23 AM

    I assume it's this form you're working on http://www.jotformeu.com/form/72962389752370

    I added the below block of code to the existing code (in your form) provided by my colleague:

    input#input_65_cc_firstName {

        width: 115px!important;

    }

    label#sublabel_cc_lastName {

        width: 130px!important;

        margin-left: -250px!important;

    }

    input#input_65_cc_lastName {

        margin-left: -250px!important;

        width: 115px!important;

    }

    input#input_65_cc_ccv {

        margin-left: -210px!important;

    }

    label#sublabel_cc_ccv {

        margin-left: -210px!important;

    }

    select#input_65_cc_exp_year {

        margin-left: -210px;

    }

    label#sublabel_cc_exp_year {

        margin-left: -210px!important;

    }

    input#input_65_cc_number {

        width: 45%!important;

    }

    select#input_65_cc_exp_month {

        width: 45%!important;

    }

    select#input_65_cc_exp_year {

        width: 115px!important;

    }

    input#input_65_cc_ccv {

        width: 115px!important;

    }

    And it looks like this on mobile:

    1514283774Screen Shot 2017-12-26 at 11.2

    Please check and let us know how it worked.

    Thank you!