How can I preview CSS changes in Configurable List widget?

  • Profile Image
    Robert Martin 
    Asked on August 13, 2018 at 01:17 PM

    I am playing around with the configurable list and am trying to affect the look and feel of it by modifying the CSS.  I know how CSS works yet independently of the change I make, nothing happens.

    How can I preview CSS changes?

    Robert

  • Profile Image
    Jan
    Answered on August 13, 2018 at 02:26 PM

    I checked your form and I can see that you injected the CSS code inside the widget. This is the correct way of customizing the Configurable List using CSS.

    It is possible that the CSS selector you are targeting is incorrect. We can help you in customizing the widget. Please let us know the changes you would like to do and we will provide the CSS code.

    You should be able to see the changes in the Preview Mode or Live Mode.

    We will wait for your response. Thank you.

  • Profile Image
    Robert Martin 
    Answered on August 13, 2018 at 03:43 PM
    What do you mean by "targeting the incorrect CSS selector"?
    Robert
    ...
  • Profile Image
    Robert Martin 
    Answered on August 13, 2018 at 03:43 PM
    I would like to control the with of the controls (or cells) and display
    borders so that the controls would show in a grid.
    Robert
    ...
  • Profile Image
    Mike_G
    Answered on August 13, 2018 at 04:59 PM

    If you are targetting an entire column, you will use .col1, .col2, .col3, and so on.

    If you are targetting the drop-down field in each column, then you use .col1 select, .col2 select, .col3 select, and so on.

    The codes will be injected in the Custom CSS tab of the widget — How-to-Inject-CSS-Codes-to-Widgets

    Also, you need to consider adjusting the width of the widget on the form. You can inject the custom CSS codes below to the Custom CSS tab of the form — How-to-Inject-Custom-CSS-Codes


    iframe[src*="configurableList/"] {

      width: 100% !important;

    }

    Here's an example:

    1534193867t16_57_12.png

    If you have any further questions, please do not hesitate to let us know.