How to minimize the space between 2 widgets?

  • Profile Image
    Techloq
    Asked on September 12, 2019 at 12:34 PM

    How can i minimize the space between the 2 dropdowns? so i can fit 3 of these on 1 row?

    1568306070jf44.JPG

  • Profile Image
    IvayloK
    Answered on September 12, 2019 at 01:49 PM

    You should shrink the fields. In order to do this, you should click on the Properties button of the dropdowns and then go to advanced. Then you should click on Shrink button. This will allow you to have 3 dropdowns in one row.

    Let us know if you need any further assistance.

    1568310578chrome_0ERaFnIuIx.png

  • Profile Image
    Techloq
    Answered on September 12, 2019 at 01:51 PM

    Thank you so much for your reply.

    As im not using the regular dropdown element but the configurable list widget because i like the style of it, the widget has too much spacing so it dosn't allow me to have 3 on a row even when shrinked.

    Please advise

  • Profile Image
    IvayloK
    Answered on September 12, 2019 at 03:28 PM

    If you need only the dropdown field from the Configurable list widget, you can have 3 widgets in one row. You should just delete the other fields (Check Boxes, Radio Buttons, Text Area and the Calendar) in the settings of the widget. Then you will need to shrink the widgets. Below is an example:

    1568316224chrome_MkPnv4FUVR.png

    Let us know, if it works for you. Looking forward to your response.

  • Profile Image
    Techloq
    Answered on September 17, 2019 at 12:22 PM

    Thanks for your responsee.

    Unfortunatley it dosen't work on my form as each dropdown has too many empty space/margin on their side so i cant shrink 3 on a row


    Please advise

  • Profile Image
    IvayloK
    Answered on September 17, 2019 at 01:47 PM

    Which form are you referring to? We can go and adjust the Configurable List widgets on your form.

    Please provide the link or the name of the form and we will setup the widgets for you.

    We will wait for your response.

  • Profile Image
    Techloq
    Answered on September 17, 2019 at 01:50 PM

    https://eu.jotform.com/build/92464105686361

    On page 5

    i would like to have #input_384, #input_386, and #input_391 all on one row.

    or i can have instead of #input_391 also another configurable list widget

  • Profile Image
    IvayloK
    Answered on September 17, 2019 at 03:58 PM

    It is not possible to add three widgets in a row on your form, because of the other fields and the CSS code, which you use. However, I would suggest you to use one Configurable List widget and display three dropdowns in it. Please refer to the attachment.

    1568750241chrome_HYEhoEZMqt.png

    Please give it a try and let us know, if it works for you.

    Looking forward to your response.

  • Profile Image
    Techloq
    Answered on September 18, 2019 at 09:27 AM

    Thanks for your reply.

    Three dropdowns within one cinfugurable list wont work for me as im using conditions on each dropdown seperatley which as far as im aware dosen't work with Configurable list.


    Why isn't it possible to minimize the extra space/margin from each widget so it can fit 3 widgets on one row?


  • Profile Image
    IvayloK
    Answered on September 18, 2019 at 10:31 AM

    You should increase the Input Width and the Form Width fields in the Advanced Designer.

    In order to do this, you should click on Form Designer button, which is located at the top right corner in the Form Builder. Then you should scroll down and click on Advanced Designer. While you are in the Advanced Designer, you should click on the Form Layout tab and adjust the Input Width and the Form Width fields.

    Let us know if you need any further assistance.

    1568816985chrome_j6DyTvbsPA.png

  • Profile Image
    Techloq
    Answered on September 18, 2019 at 10:39 AM

    Thanks.

    I know that,

    but i would prefer keeping this width, why can't i just add a CSS code to minimize the margin if this widgets?

  • Profile Image
    roneet
    Answered on September 18, 2019 at 11:46 AM

    Please allow me some time to check if it is feasible with the custom CSS. I'll get back to you in some time

    Thanks.

  • Profile Image
    Techloq
    Answered on September 18, 2019 at 11:47 AM

    Thank you very much Roneet

  • Profile Image
    roneet
    Answered on September 18, 2019 at 12:57 PM

    Have you hidden the Configurable list? The Configurable list could not be seen on the Form in the 5th page.

    To align the 3 dropdowns in a line you need to do the following:

    1. First, move the dropdown to the next line. Next, reduce the width of the dropdown.

    1568825290form.gif

    2. You have to inject the custom CSS for the second dropdown to reduce the width of the widget. I have taken the Id of the iframe container to reduce the height:


    #customFieldFrame_396 {
    width: 151px!important;
    }
    #customFieldFrame_388 {
    width: 141px!important;
    }

    You can use the above code but for each field, you need to replace it with the specific ID.

    15688256491.PNG

    I have fixed the above two rows.

    Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Please get back to us if you have further questions.

    Thanks.


  • Profile Image
    Techloq
    Answered on September 19, 2019 at 09:19 AM

    Yupp! That worked amazing!


    Thank you Sir!