How can I change the spacing for the dropdown field?

  • Profile Image
    fundcapital
    Asked on July 21, 2016 at 06:59 PM

    Hi Support,

     

    I am trying to align all the boxes as possible so it will not look clutter on the form however if the block has a dropdown I can't change the distance form that block to another block I have attached a screenshot for example,

     

    if you can see all those inside the red box is well aligned compare to the box below it, please advise the best way to do this thank you

     

  • Profile Image
    Chriistian
    Answered on July 21, 2016 at 10:12 PM

    We can extend the width of the dropdown field so it is aligned with the top fields, and the spacing will be equal to the other fields. To do this, simply inject the custom css below: 

    #input_126 {

        width: 230px!important;

    }

    If you need further assistance, please let us know.
    Regards.

  • Profile Image
    fundcapital
    Answered on July 22, 2016 at 12:21 PM

    I followed your instructions but I see that there is a part of the form that is not aligned, what do you suggest to do

  • Profile Image
    Irshad
    Answered on July 22, 2016 at 01:20 PM

    You would require to inject the custom css below: 

    #id_150{

    margin-left: -21px!important;

     }

    If you face any issue or need further assistance, feel free to revert back.

    Thanks.

  • Profile Image
    fundcapital
    Answered on July 22, 2016 at 01:36 PM

    I followed it but nothing is happening do I need to insert this before the existing #input_126?

    Or I just need to insert it?

    #input_126 is existing in the CSS

    #input_126 {

     

        width: 230px!important;

     

    }

    #id_150{

     

    margin-left: -21px!important;

     

     

     

    }

  • Profile Image
    Irshad
    Answered on July 22, 2016 at 02:02 PM

    I just checked your Form https://www.jotform.com/43446244508960 And not found the custom css code which I provided.  You can insert that before or after #input_126.

    After inserting the custom css code, make sure to save the form.

    If you need further assistance, feel free to revert back.

    Thanks.

  • Profile Image
    fundcapital
    Answered on July 22, 2016 at 02:20 PM

    Just did that and it works thanks for your help! However I also have the same problem on this form but when I inject the custom css code you gave me it doesn't work can you please guide me also on his

    http://application.fundcapitalamerica.com/form/31965579239167

     

  • Profile Image
    Irshad
    Answered on July 22, 2016 at 02:33 PM

    Actually the CSS code is written according to the "ID". So for your another Form, we would require to use other css code. 

    So please remove the css class "#id_150" from your new Form. And instead of that put the below css code:

    #id_152{

    margin-left: -21px!important;

     

    }

    That is instead of #id_150, you need to write the "#id_152"

    If you need further assistance, feel free to revert back.

    Thanks.