Styling

RoundtableJS provides a flexible styling system that allows you to customize the appearance of your survey elements. This overview covers the basics of styling, including how to apply styles at both the survey and element levels.

RoundtableJS offers two levels of styling: survey-level and element-level. Understanding the difference between these two is crucial for effective customization of your surveys.

​

Survey-Level Styling

Survey-level styles are applied globally to all elements within a survey. These styles serve as default styles for all elements and can be overridden by element-level styles.

​

Element-Level Styling

Element-level styles are applied to individual elements and take precedence over survey-level styles. This allows for fine-grained control over the appearance of specific elements.

​

Basic Usage

​

Survey-Level Styling

Apply styles to all elements in a survey by passing a styles object during survey initialization:

const survey = new Survey({
    styles: {
        Element: {
            root: {
                background: 'gray',
            }
        },
        body: {
            fontFamily: 'Arial, sans-serif',
        },
        container: {
            maxWidth: '800px',
        }
    }
});

In this example, all elements will have a gray background by default, and the survey body will use Arial font. The survey container will have a maximum width of 800px.

​

Element-Level Styling

For individual elements, pass a styles object in the element’s constructor:

const openEnd = new OpenEnd({
    id: 'feedback',
    text: 'Please provide any additional feedback you may have',
    styles: {
        root: {
            background: 'white', // Overrides the gray background set in the survey styles
        },
        textarea: {
            borderRadius: '0px', // Removes the default border radius only on this textarea
        }
    }
});

This example overrides the survey-level gray background for this specific element and customizes the textarea’s border radius.

​

Style Keys

Each element type has its own set of style keys that can be customized. Here are the common style keys:

{
    root: {},            // Styles for the main container
    innerContainer: {},  // Styles for the inner container (if applicable)
    textContainer: {},   // Styles for the container holding text elements
    text: {},            // Styles for the main text (usually the question text)
    subText: {},         // Styles for additional instructional text
    errorMessage: {}     // Styles for validation error messages
}

Specific element types may have additional keys. For example:

• SingleSelect and MultiSelect: optionsContainer, option, radio/checkbox
• NumberEntry: input, unit
• OpenEnd: textarea
• Grid: table, headerRow, headerCell, row, rowLabel, cell

​

Applying Styles

Styles are applied as CSS-in-JS objects. You can use any valid CSS property, using camelCase for property names:

styles: {
    root: {
        backgroundColor: '#f0f8ff',
        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
        transition: 'all 0.3s ease'
    },
    text: {
        color: '#2c3e50',
        fontSize: '1.2em',
        fontWeight: 'bold'
    }
}

​

Inheritance and Overriding

1. Default Styles: Each element type has built-in default styles.
2. Survey-Level Styles: These override the default styles for all elements in the survey.
3. Element-Level Styles: These have the highest priority and override both default and survey-level styles for the specific element.

This hierarchy allows for flexible and efficient styling across your survey.

​

Custom Elements and Styling

When creating custom elements by extending the Element class, you can define your own style keys and implement custom styling. Here’s an example:

class CustomQuestion extends Element {
    static styleKeys = ['root', 'label', 'input', 'errorMessage'];

    constructor({ id, text, options, styles, ...otherProps }) {
        super({ id, type: 'custom-question', styles, ...otherProps });
        this.text = text;
        this.options = options;
    }

    // Implement other methods as needed
}

By defining styleKeys, you specify which style properties can be customized for your custom element.