What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Is there a way to customize the width of the "add" button?

    Asked by mattcaptain on April 04, 2016 at 11:27 PM

    Hello,

    Is there a way to customize the width of the "add" button? I have customized the text (instead of just a + sign) and the button cuts off the text on the right. I would like to make wider so it includes all of the text. Thanks!



    This is a re-post of a comment on How to Set Up the Configurable List Widget

    customized thanks wider hello
  • Profile Image
    JotForm Support

    Answered by Chriistian on April 05, 2016 at 03:00 AM

    The width of the "add" button should adjust based on the text that you input in the "Label for add". However, if you want to make the add button wider, you can inject the css below:

    .add {

        width: 200px;

    }

    You can change the value of the highlighted text based on your preference.
    To inject the css, click the wand icon on the upper right of the widget.

    Then select the Custom CSS tab and paste the custom css in the text area.

    The button should now have a customized width.

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

  • Profile Image

    Answered by mattcaptain on April 05, 2016 at 12:05 PM

    Thank you for the reply. It solves half the problem. Hopefully these screenshots will help demonstrate what exactly is happening.

     

    It have the form set to 0 entries as a minimum:

     

    The button to the left of Food should say "Add Visit," but the text is cut off. This is with the CSS code you gave me in your response

     

    When I click the button to add an entry, the whole text shows up:

     

    It's as if the initial button is blocked by something. This also happened with another entry as well, but with a different width:

     

    The CSS code you provided elongates the width of the button, but the text is still cut off when there is no entry.

     

    Hope that makes sense, thanks for any additional help.

  • Profile Image
    JotForm Support

    Answered by BJoanna on April 05, 2016 at 01:39 PM

    It seems that when minimal number of rows is set to zero, width of the Configurable list widget is changed to 81px and because of that add button is cut off. 

    I was able to resolve this issue by Injecting Custom CSS. I have added this CSS code inside of Form Designer:

    iframe#customFieldFrame_16

    {

    width:130%!important;

    }

    Also inside of this guide you can find how to Inject Custom CSS codes: 

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

    After you add this code your form will look like this. 

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

    Feel free to clone it.

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image

    Answered by mattcaptain on April 05, 2016 at 02:16 PM

    Thank you, it's getting better. Your answer solved the button question and now I'm happy with the way it looks:

     

    But when you add a row, sometimes the right hand side gets cut off and the remove button becomes inaccessible (can be seen on the Units of Service, STEHP, and Family Assistance areas):

     

    Thoughts about that issue? Thanks again.

  • Profile Image
    JotForm Support

    Answered by BJoanna on April 05, 2016 at 02:44 PM

    I saw that you added Custom CSS codes for other widgets as well. Increasing the width of those widgets should resolve your issue. Please add this code you your form inside of the code you added. 

    iframe#customFieldFrame_16 {

    width : 130%!important;

    }iframe#customFieldFrame_25 {

    width : 150%!important;

    }iframe#customFieldFrame_26 {

    width : 160%!important;

    }iframe#customFieldFrame_27 {

    width : 160%!important;

    }

    Here is my new demo form: https://form.jotform.com/60955574494974 

    Hope this will help. Let us know if you need further assistance.

  • Profile Image

    Answered by mattcaptain on April 05, 2016 at 02:48 PM

    Perfect! Thanks for all your quick responses.

  • Profile Image
    JotForm Support

    Answered by BJoanna on April 05, 2016 at 03:07 PM

    You're welcome.

    Feel free to contact us if you have any other questions.