Automation

# Uibuilder, uib-brand.css and plotly.js **URL:** \ **Category:** General\ **Tags:** uibuilder\ **Created:** [5 March 2023 13:06 UTC](https://discourse.nodered.org/t/uibuilder-uib-brand-css-and-plotly-js/76132 "2023-03-05T13:06:17Z")\ **Posts on this page:** 5\ **Page:** 1

**Author:** ![ianh33](https://avatars.discourse-cdn.com/v4/letter/i/ea5d25/32.png) [@ianh33](https://discourse.nodered.org/u/ianh33)\ **Post date:** [5 March 2023 13:06 UTC](https://discourse.nodered.org/t/uibuilder-uib-brand-css-and-plotly-js/76132/1 "2023-03-05T13:06:17Z")

I am having trouble displaying a plotly.js graph on a uibuilder page. I don't think this is a uibuilder issue. I think it is css related but given the size of 'uib-brand.css' I am hoping I can get a 'signpost' to help me troubleshoot. I am using the simple example in [Getting started in JavaScript](https://plotly.com/javascript/getting-started/) in a simple webpage ```auto Automation

``` This produces a greyed out square in place of the graph. If I comment out @import url("../uibuilder/uib-brand.css"); in index.css (see below) the graph displays correctly (i.e. not greyed out). ```auto /* Load the defaults from `/node_modules/node-red-contrib-uibuilder/front-end/src/uib-brand.css` @import url("../uibuilder/uib-brand.css");*/ body { min-height: 100vh; min-width: 100vh; background: url("../uibuilder/common/images/greyscale.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover; } ``` Should I edit 'uib-brand.css' (if so how?) or just leave it commented out (if so what are the implications?). Thank you Ian ---

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\ **Post date:** [5 March 2023 15:08 UTC](https://discourse.nodered.org/t/uibuilder-uib-brand-css-and-plotly-js/76132/2 "2023-03-05T15:08:44Z")

Hi Ian, thanks for sharing the code up-front, it makes it much easier to spot issues straight away. As you are using Bootstrap, you won't want to use uib-brand.css. Of course, there are some places where I assume it is present so you might occasionally find some uibuilder built-in ui might then not look quite right. In those cases, just have a look at the HTML and find the CSS classes you need to copy over from uib-brand. Alternatively, if you get stuck with a clash of styles, please let me know so I can try and resolve it. Anyway, you can simply remove the `index.css` link from your HTML. One other small thing. It is usually best to load vendor scripts before the uibuilder client. ---

**Author:** ![ianh33](https://avatars.discourse-cdn.com/v4/letter/i/ea5d25/32.png) [@ianh33](https://discourse.nodered.org/u/ianh33)\ **Post date:** [5 March 2023 15:52 UTC](https://discourse.nodered.org/t/uibuilder-uib-brand-css-and-plotly-js/76132/3 "2023-03-05T15:52:49Z")

Thanks Julian Sound advice as usual Ian ---

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\ **Post date:** [19 March 2023 15:53 UTC](https://discourse.nodered.org/t/uibuilder-uib-brand-css-and-plotly-js/76132/4 "2023-03-19T15:53:27Z")

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed. ---

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\ **Post date:** [7 June 2025 12:21 UTC](https://discourse.nodered.org/t/uibuilder-uib-brand-css-and-plotly-js/76132/5 "2025-06-07T12:21:09Z")

In case anyone comes across this in the future, please see the post: > [@Using UIBUILDER with Plotly](https://discourse.nodered.org/t/using-uibuilder-with-plotly/97462): > > Many thanks to @Paul-Reed for prompting me on this. When using Plotly charts with UIBUILDER, you should note that their code is rather dated in places. In particular, their CSS styling is not really up to current standards. It is neither properly responsive nor does it correctly isolate itself. Because of this, there are some clashes between their styling and the default UIBUILDER styles. This post fixes that. To use Plotly correctly, use this as your index.css content: /\* Load defaults from… Which gives some CSS corrections for Plotly to work correctly with UIBUILDER's default CSS.