Is there a way to have the flags show side by side?

  • Profile Image
    Becki
    Asked on November 24, 2016 at 11:06 PM

    Is there a way to have the flags show side by side, instead of in a drop down menu? Thank you!



    This is a re-post of a comment on How to Make Your Forms Multilingual

  • Profile Image
    BJoanna
    Answered on November 24, 2016 at 11:41 PM

    Do you want to achieve something like this? 

    This is possible to achieve whit CSS. Inside of my demo form I have added this CSS code:

    ol.lang-list, ul.lang-list {

        visibility: visible!important;

        display: block!important;

    }

    li.es {

        position: relative!important;

        left: 120px;

        top: -32px;

    }

    li.zh {

        position: relative;

        left: 240px;

        top: -64px;

    }

    li.tr {

        position: relative;

        left: 360px;

        top: -96px;

    }

    ul#langList {

        box-shadow: none;

    }

    .lang-list {

        -webkit-box-shadow: none!important;

        box-shadow: none!important;

        -moz-box-shadow: none!important;

    }

    How to Inject Custom CSS Codes

     

    Here is my demo form: https://form.jotform.com/63288398441972 

    Feel free to clone it

    If you want to do the same on your form, please provide us ID of you form.

     

    Let us know if you need further assistance.

  • Profile Image
    paikofflaw
    Answered on November 27, 2016 at 05:53 PM

    Thank you very much!  That works, and is similar to what I want.  But I'd rather not have the original box with the arrow pointing down, but rather have just English and Russian boxes, and then the one that is selected is highlighted, like this:  

  • Profile Image
    Nik_C
    Answered on November 27, 2016 at 06:33 PM

    Please insert the below CSS in your Custom CSS field in order to remove the arrow:

    .language-dd:before {

    content: none!important;

    }

    Regarding the red border around it, I wasn't able to change the color of it on focus. If I find the way to do that I'll get back to you.

    Thank you!

  • Profile Image
    paikofflaw
    Answered on November 27, 2016 at 07:06 PM

    Thank you so much!  I greatly appreciate your help, and for getting back to me so quickly!  :-) 

  • Profile Image
    Nik_C
    Answered on November 29, 2016 at 03:31 PM

    I'm sorry it took this long, but I had a hard time to make language field be focused on click, the farthest I could get is to make that field change color on click:

    If that could work for you this is the CSS:

    .language-dd:active { 

        outline: none !important;

        background-color: red!important;   

    }

    If you have any additional questions please let us know.

    Thank you!