How to Increase the Usability of My Form on Mobile?

  • Profile Image
    stageit
    Asked on December 08, 2015 at 09:09 AM

    Hello,

     

    How can I make everything in the form bigger in length? Because when I view it on my tablet it is hard to press it with one finger but I want it bigger so I can click on it with ease. Maybe someone can help me with CSS, or maybe there is an button that does this.

     

    Thanks in advance,

     

    Owen

  • Profile Image
    mert
    Answered on December 08, 2015 at 09:28 AM

    Hi Owen,

    You can increase the font size, weight or etc. by injecting some custom CSS to your form. Below, you will see the CSS that makes the font of your form bigger and bold.

     

    .form-all{

    font-weight:bolder;

    font-size:24px !important;

    }

     

    If the changes are not meet your needs, we can do something more to increase your form's usability.

    Thanks.

  • Profile Image
    stageit
    Answered on December 09, 2015 at 02:26 AM

    Hi Mert,

     

    This was exactly what I was looking for! Except there is one problem. Everything becomes bigger except for the configurable list widget. Is there a way to make that bigger vertically too?

     

    Thanks in advance,

     

    Owen

  • Profile Image
    beril
    Answered on December 09, 2015 at 03:57 AM

    On behalf of my colleague @Mert, you are kindly welcome. We are very glad to hear that the issue has been resolved for you.

    Can you add the CSS code to your configurable list widget?

    I hope it helps.

    If this does not resolve the issue, please let us know and we will be glad to take another look.

  • Profile Image
    stageit
    Answered on December 09, 2015 at 04:11 AM

    Hello,

     

    Well I tried it and it did not do anything.

    Can you please try again?

     

    Thanks in advance,

     

    Owen

     

     

  • Profile Image
    mert
    Answered on December 09, 2015 at 05:14 AM

    Hi again,

    Owen, I have been working on this issue to find a solution. When I find the correct solution, I will post the answer.

     

    Thank you for your patience.

  • Profile Image
    stageit
    Answered on December 10, 2015 at 02:44 AM

    Hello Mert,

     

    Thank you for taking your time and looking it up.

     

    -Owen

  • Profile Image
    jonathan
    Answered on December 10, 2015 at 03:52 AM

    Please use this CSS code on the Configurable List widget

    th{

    font-weight:bolder;

    font-size:24px !important;

    }

     

    so it should make the font size bigger

     

     

    Here is my test form https://form.jotform.com/53431613019952?

    Let us know how it goes.

    Thanks.

     

  • Profile Image
    mert
    Answered on December 10, 2015 at 03:57 AM

    Hi again,

    Unfortunately, there is an issue about custom CSS part on "Configurable List" widget, so the changes don't applied to the widget on preview. Now, I'm going to open a bug report about this one. With that, our widget team will be found a fix for that problem as soon as possible.

     

    Thank you for your understanding.

  • Profile Image
    stageit
    Answered on December 10, 2015 at 04:06 AM

    Hi Mert,

     

    No problem, thank you for looking it up. I hope you guys have a great day!

     

    Owen

  • Profile Image
    mert
    Answered on December 10, 2015 at 04:15 AM

    You are most welcome. Please, accept my apologies about this one; but you can be sure that it will be fixed soon. When the fix is released, you will be informed on this thread.

     

    Have a great day.

  • Profile Image
    TitusN
    Answered on December 17, 2015 at 11:51 PM

    Hello Owen, 

    The Custom CSS tab has been fixed - Your Custom CSS will apply the desired changes to your Configurable list widget.

    Kindly add the suggested CSS and see if that fixes your layout requirements. 

    If you need further assistance - please let us know. 

  • Profile Image
    stageit
    Answered on December 18, 2015 at 02:33 AM

    Hi Titus, 

    I tried the CSS Beril gave me, but it still did not work. I think it's not working because the CSS was for the wrong configurable list widget. Can someone help me with a new CSS code to make this configurable list widget larger vertically?

    Thanks!

     

    Owen

     

     

  • Profile Image
    mert
    Answered on December 18, 2015 at 03:43 AM

    Hi again,

    Owen, if you apply the following CSS code it makes the "Configurable List" larger vertically.

     

    td{

    padding-bottom: 250px; /* This one makes it larger vertically*/

    padding-right:25px; /* This one gives space between dropdowns (you can erase this one, if you dont want this feature)*/

    }

     

    Please, try this one and let us know the results. Also, I suggest you to clear your browser caches before doing this steps.

     

    Thanks.

  • Profile Image
    stageit
    Answered on December 18, 2015 at 03:56 AM

    Hi Mert,

    The CSS code that you gave me made it larger horizontally but not vertically.

    Maybe it is only on my end, can you confirm?

     

    Thanks,

     

    Owen

     

  • Profile Image
    TitusN
    Answered on December 18, 2015 at 04:03 AM

    Hello Owen,

    It appears smaller on my end too, 

    Please add the following CSS to all your Configurable List Widgets  using the Custom CSS tab: 

     

    /*The CSS below increases the Vertical Heights of the Input , Select and Button Elements*/

    select {

        height: 31px;

    }

    input[type="text"] {

        height: 25px;

    }

    button {

        height: 31px;

    }

    .stepper-wrap {

        height: 31px;

    }

    /*Height CSS End*/

     

    Don't delete the CSS you have in there, add the code above right below it. 

    Looks better? You can sample the changes here: https://form.jotform.com/53511865015956?

     

  • Profile Image
    mert
    Answered on December 18, 2015 at 04:45 AM

    Owen, I monitored the customized form on Chrome and it looks like larger vertically and horizantally (Now, I added the Titus's CSS, the input boxes and the selectors are larger currently). Please, see it what I see on my side:

     

  • Profile Image
    stageit
    Answered on December 18, 2015 at 05:40 AM

    Thanks guys! 

    It looks exactly how I pictured it.

     

    Owen

  • Profile Image
    mert
    Answered on December 18, 2015 at 07:03 AM

    On behalf of my colleagues, you are kindly welcome. It took a long time to come this point, sorry for this; but finally, I'm glad to see that it works for you. For your other questions, please don't hesitate to contact us.

     

    Have a great day.