How can I adjust the widths of textbox fields in the Configurable List widget?

  • Profile Image
    guineapigme
    Asked on December 28, 2014 at 10:07 AM

    How can I make a textbox field wider ... I have very few columns in my list and would like to make them wider



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

  • Profile Image
    abajan
    Answered on December 28, 2014 at 11:20 AM

    Thanks for asking. Each field in the widget is contained within its own column and the columns are classed as col1, col2, col3 etc. and textboxes in the widget have a type attribute of text. So, as an example, if there are three (3) textboxes and you want to apply a different width to each of them, you could add the following rules to the Custom CSS section of the widget:

    .col1 [type="text"] {
     width: 200px;
    }

    .col2 [type="text"] {
     width: 150px;
    }

    .col3 [type="text"] {
     width: 70px;
    }

    The above CSS was applied to the Configurable List widget in this demo. It widens the textboxes in the first two columns while it contracts that in the third column. Feel free to clone the demo, change the values in the widget's CSS and observe the results of those changes.

    If you need further help with this, we'd be happy to provide it.

    Cheers

  • Profile Image
    abajan
    Answered on December 28, 2014 at 11:27 AM

    I should add that if you wish all textboxes in the widget to have the same width, the following rule would suffice:

    .col1 [type="text"],
    .col2 [type="text"],
    .col3 [type="text"] {
     width: 200px;
    }

    Thanks