Widget needs to be bigger

  • Profile Image
    menstrom
    Asked on October 01, 2017 at 10:45 PM

    I have inserted some configurable list widgets in my form, but they need to be bigger than it is allowing me to make them.  I need the font of the labels and the font within the boxes themselves to be quite a bit bigger than they are now, but I can't get them any larger, no matter what I try.  They need to be bigger because, when the form is printed, they need to be easily readable and right now they are much too small.  How do I make the widget font and boxes bigger?

    Also, with the first configurable list widget, I need the first line to have some things pre-entered, so I had the bright idea to create two widgets.  The top one has "Self" and "Wheaton College" pre-entered, and one below it does not, and does not have labels at the top.  So after I made the second one, I tried to put them close together so that they would look like one chart, but the top blank area of the second one lays over the top of the first one and so the first line can't be entered.  Is there a way to put these two widgets next to each other without making it impossible to enter data into the first one?

    Thanks,

    Marilyn

  • Profile Image
    BJoanna
    Answered on October 02, 2017 at 03:27 AM

    To increase the font size of the labels add this CSS code to the configurable list CSS field:

    table th {

        font-size: 18px;


    }

    And to increase the font size of the input text add this CSS code to the Configurable list CSS field: 

    .col1 [type="text"], .col2 [type="text"],.col3 [type="text"], .col4 [type="text"], .col5 [type="text"]   {

        font-size: 20px;

    }

    It seems that you were able to resolve your other issue with the positioning of the widgets. Because of the CSS code I provided you for the font size, you will have to modify the CSS code you added to position the configurable list widgets. Thane the height of the first widget from 90px to 126px.

    #id_494 {

        margin-top : -30px !important;

        height : 126px !important;

        margin-left : 20px !important;

    }

    Here is my demo form: https://form.jotformpro.com/72741908279972 

    Feel free to test it and clone it

    Hope this will help.