How can I center align the options in a drop down field?

  • Profile Image
    eastendyves
    Asked on November 06, 2016 at 03:44 PM

    Hi!

    Can you please provide me with css to center align the options in a drop down field? Thanks.

  • Profile Image
    BDAVID
    Answered on November 06, 2016 at 04:33 PM

    Try injecting the following code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    .form-dropdown {

    text-indent: 40%;

    }

    Let us know if you need more help.

  • Profile Image
    eastendyves
    Answered on November 06, 2016 at 05:12 PM

    That works for the placeholder, but I have some options that are rather long and they get cut off on the right when selected (see image)...  

    Thanks

  • Profile Image
    liyam
    Answered on November 06, 2016 at 07:03 PM

    Hello eastendyves,

    Unfortunately, this is a limit in CSS and there is no way to center align the text in a dropdown.

    There is a solution to center align only the last selected text but it's not working on Microsoft Edge browsers. Anyhow, you can try this CSS code for select menus:

    select {
       text-align-last: center;
       text-align: center;
       -ms-text-align-last: center;
       -moz-text-align-last: center;
    }

     

    Thanks.

     

  • Profile Image
    eastendyves
    Answered on November 15, 2016 at 10:36 AM

    Thank you very much, that solves the problem!