Change configurable list widget default fields width

  • Profile Image
    bkurniawan
    Asked on July 03, 2014 at 12:34 PM
    1) Is it possible to custom change the width of the fields? For example, textbox in the first column is 200px, the textbox in the second column is 100px, or the select field in the third column is 50px, etc.
  • Profile Image
    BDAVID
    Answered on July 03, 2014 at 01:19 PM

    So far, I have only managed  to change the width of all text boxes with this CSS code:

    input[type="text"] {

        width: 120px;

    }

    I will get back to you, if it is possible to change the width of an specific column.

  • Profile Image
    BDAVID
    Answered on July 03, 2014 at 01:44 PM

    You can add this CSS code in the Configurable List widget:

    .col1 input[type="text"] {

    width: 200px;

    }

    .col2 input[type="text"] {

    width: 100px;

    }

    .col3 select {

    width: 50px;

    }

    Click on the wizard icon:

    Then paste the code in the CSS area:

    This will be the result:

    Let us know if you have more questions, we will be glad to assist you.

  • Profile Image
    bkurniawan
    Answered on July 03, 2014 at 02:22 PM

    This is so cool! So by targeting the css fields you can customize the width, and I am pretty sure you can give it a border, and other styling too. 

    How can we find out about all these css fields' names? 

  • Profile Image
    Jeanette
    Answered on July 03, 2014 at 02:24 PM

    I have answered to you on this thread

    Cheers!

  • Profile Image
    bkurniawan
    Answered on July 03, 2014 at 02:26 PM

    Thank you Jeanette. I just saw it from the other thread too. I really appreciate for all your quick responses. Thanks again.