Configurable List widget: How to make text box wider

  • Profile Image
    mbuchholz
    Asked on May 25, 2016 at 04:24 PM

    I am looking to figure out how to make a text box on my configurable list widget wider.   Is it possible with CSS or without?  If so what's the best method?

     

  • Profile Image
    Boris
    Answered on May 25, 2016 at 05:53 PM

    Yes, it should be possible with custom CSS. If you need to widen all Text Box fields inside Configurable List, you may want to use the following CSS:

    input[type="text"] {
        width: 135px;
    }

    Where you can adjust 135px into any value you may prefer.

    You can add custom CSS to the widget by clicking its wand-shaped icon, and then switching to its Custom CSS tab:

    If you need specific assistance with widening the form fields, please let us know which of the fields should be widen and how wide they should be, and we will be happy to provide you with the proper CSS code to suit your needs.

    Thank you.

  • Profile Image
    mbuchholz
    Answered on May 30, 2016 at 10:44 AM

    I would like to specify all my drop downs to be a minimum width so the form looks cleaner. I attempted to change your code above by changing text to dropdown but that didn't work.   Or even better what is the best way to specify min-width for each type of input.

     

    Thanks

    Mike

  • Profile Image
    Charlie
    Answered on May 30, 2016 at 12:03 PM

    Try this custom CSS code:

    #list > tbody > tr> td > select {

    min-width: 135px !important;

    }

    You need to paste it directly in your Configurable list widget settings.

     

    If you need to change the specific type, then you'll need to get the type of the input itself.

    Let's say, for drop down fields, I used "select" in the custom CSS code. For text boxes then you can use "input", for textarea fields, then you can use "textarea".

    Let us know if that works.

  • Profile Image
    mbuchholz
    Answered on May 30, 2016 at 12:46 PM

    Perfect..  One more.. how about the field using the *Qty:number entry.  

     

    Thanks

    Mike

  • Profile Image
    BJoanna
    Answered on May 30, 2016 at 01:22 PM

    For number fields add this CSS code inside of Configurable list widget Custom CSS field:

    input[type=number], input[type=text] {

        width: 135px;

    }

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