Cannot Add a className to Layout

[jacky.wu]

Hi,

I encountered an issue when using Layouts in Dashboards. I was able to successfully add a className to rows and cells, but I couldn't add a className to the layout itself.

Here’s an example screenshot of my issue:
https://imgur.com/a/OAB8buU

I understand that setting rowClassName also affects the layout, but I want to specifically add a layoutClassName for additional customization.

Here’s my code:

Code: Select all

layout: {
    layoutClassName: "Test-layoutClassName",
    rowClassName: "Test-rowClassName",
    cellClassName: "Test-cellClassName",
    rows: [
        { cells: [{ id: "data-card" }] },
        { cells: [{ id: "data-card3" }] }
    ]
}

Did I configure something incorrectly?

[andrzej.b]

Hi Jacky,

Currently, there is no API option to add the custom class name on the layout level.
The row and cell class names are correctly used, but for the layout itself, you'll need to apply styles using the existing highcharts-dashboards-wrapper class or by wrapping your dashboard in a custom container.
Example: https://jsfiddle.net/BlackLabel/9rw0gaf2/

Feel free to reach out if you have any further questions.

Kind regards,

[dawid.d]

Hi Jacky,

Remember that you can also customize your Dashboard and its elements, using the board object. Use it to retrieve the layout and assign a custom class name. Check out the demo.

Demo: https://jsfiddle.net/BlackLabel/os91vkjw/

I hope it helps!

Best regards,

[jacky.wu]

Hi Andrzej and Dawid,

Thank you both for your replies. I ended up using another design approach to adjust my CSS.
Nevertheless, I truly appreciate your prompt responses.