Dynamic Dropdowns: How to let my two dropdown fields display on one row?

  • Profile Image
    esupport.tw
    Asked on April 12, 2018 at 11:22 PM
    - How to let my two dropdown fields display on one row?
  • Profile Image
    Mike
    Answered on April 12, 2018 at 11:28 PM

    It is possible to decrease the width of the dropdowns by adding a CSS to the widget. This way they will be placed on the same line.

    Example:

    .select2 {
    width: 30% !important;
    }

    Thank you.

  • Profile Image
    esupport.tw
    Answered on April 13, 2018 at 03:12 AM

    Hi Mike


    Thanks for your reply.

    The two fields sticky together.

    Hope there is space in the middle and the field wider ( All field text can be display).

     

    Thank you!

  • Profile Image
    alinaci
    Answered on April 13, 2018 at 04:46 AM

    You can also add margin to the items and make them bigger with CSS;

    .select2 {

    width: 30% !important;

    margin-right: 5% !important;

    }

  • Profile Image
    esupport.tw
    Answered on April 13, 2018 at 05:04 AM

    Hi,


    This is our form here :

    https://www.jotform.com/build/81018645983464



    Thanks!

    It's looks ok.


    How to move our submit button to the right side of the dropdown menu?

    Let it be a row.



    Thank you again!


  • Profile Image
    Kevin_G
    Answered on April 13, 2018 at 09:34 AM

    You may try doing the following:

    1. Turning on the shrink option for both elements under the properties: https://www.jotform.com/help/90-Form-Field-Positioning 

    2. Increasing the form's width since it would require a bit more to display both fields inline: https://www.jotform.com/help/35-The-Importance-of-Form-Widths 

    Please let us know how it goes. 

  • Profile Image
    esupport.tw
    Answered on April 13, 2018 at 11:30 AM

    Hi,

    Our form:

    https://www.jotform.com/build/81018645983464 


    It now look better.


    Because of the height size.  The two elements alignment seems can not in same line. 

    1) Where I can adjust the fileds size?  and align the two elements?

    and 

    2) There is a big blank between our fields and button.

    Can it getting closer?


    Thanks!

  • Profile Image
    Mike_G
    Answered on April 13, 2018 at 01:40 PM


    To align the widget and the submit button in your form height-wise and make the two closer, please inject the CSS codes below to the CSS tab on Form Designer — How-to-Inject-Custom-CSS-Codes

    li#id_4 {

        padding-right: 0px !important;

    }

    button#input_5 {

        height: 50px !important;

        margin: 2px 0px !important;

        font-size: 16px; /*optional*/


    }

    After that, adjust the form width — The-Importance-of-Form-Widths


    1523640133t13_21_44.png

    You can also resize the drop-down menu of the widget by injecting the CSS codes below to the CSS tab of the Dynamic Dropdowns widget — How-to-Inject-CSS-Codes-to-Widgets

    .select2-dropdown {

        width: 230px !important;

    }

    I hope this helps. If you have other questions, please do not hesitate to let us know.


  • Profile Image
    esupport.tw
    Answered on April 13, 2018 at 02:08 PM

    Hi,

    It's great.

    Thank you!