Configurable list widget - main label text is encroaching on first field label

  • Profile Image
    lritter
    Asked on February 07, 2020 at 09:39 AM

    I need to expand the size of the Configurable List Widget's main label. So, I used the following code and it works and looks great on the desktop and mobile in landscape orientation. However, on mobile in portrait orientation, it looks like the screen shots below. Thank you!

    /*Adjust Height of Labels 

    in Configurable List Widget*/

    #label_362,#label_368,#label_332,

    #label_371,#label_372,#label_373 {

      height: 70px!important;

    }

    1581086313Jotform4.jpg

    1581086328Jotform5.jpg

    1581086340Jotform6.jpg

  • Profile Image
    Jimmy_D
    Answered on February 07, 2020 at 11:04 AM

    Hi, Thanks for reaching out to us. I am working on a solution. I will update you shortly on this thread. 

  • Profile Image
    BDAVID
    Answered on February 07, 2020 at 01:09 PM

    After troubleshooting with my colleague the style issue in mobile devices, we have created this code to fix the issue, please inject it as shown on this guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    @media only screen and (max-width: 480px) {

    #label_362,#label_368,#label_332,

    #label_371,#label_372,#label_373 {

      height: auto !important;

    }

    }

    @media only screen and (max-width: 480px) {

    #label_326{

        height: auto !important;

        width: 102% !important;

    }

    }

    Example:

    15810988041.png

    15810988432.png

    15810988583.png

    Note: although there is a mobile preview option, it may sometimes not be 100% accurate, we recommend you to check in you real mobile device too. 

    Please check my clone version: https://form.jotform.com/200374436998971

    Let us know if you need more help.

  • Profile Image
    lritter
    Answered on February 07, 2020 at 01:17 PM

    SWEET!!! It looks super good. Thank you so much for taking the time to assist me!