Uibuilder, uib-brand.css and plotly.js

General
1

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 in a simple webpage

<!doctype html>

<html lang="en">
    <head>
         <!-- Bootstrap required meta tags -->
        <meta charset="utf-8">  
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Node-RED uibuilder - test page">

        <title>Automation</title>

        <link rel="icon" href="./images/node-blue.ico">
        <link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap/dist/css/bootstrap.min.css" />
        <link type="text/css" rel="stylesheet" href="./index.css" media="all">
        <script>/*to prevent Firefox FOUC, this must be here*/
            let FF_FOUC_FIX;
          </script>
        <script src="../uibuilder/vendor/plotly.js/dist/plotly.min.js" ></script>
    </head>

    <body>
        <!-- Navigation -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light static-top mb-5 shadow" width="100vh">
            <div class="container">
                <a class="navbar-brand" href="#">Automation</a>
                    <button
                        class="navbar-toggler"
                        type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#navbarResponsive"
                        aria-controls="navbarResponsive"
                        aria-expanded="false"
                        aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="./index.html">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./cctv.html">CCTV</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./automation.html">Automation</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./dome.html">Dome</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./events.html">Events</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./log.html">Log</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <div id="tester" style="width:600px;height:250px;"></div>

        <!-- Scripts-->
        <script src="../uibuilder/uibuilder.iife.min.js">/* REQUIRED. NB: socket.io not needed */</script>
        <script src="./index.js">/* OPTIONAL: Put your custom code here */</script>
        <script src="../uibuilder/vendor/bootstrap/dist/js/bootstrap.min.js"></script>

    </body>

    <script>
        TESTER = document.getElementById('tester');

        Plotly.newPlot( TESTER, [{
            x: [1, 2, 3, 4, 5],
            y: [1, 2, 4, 8, 16] }], {
                margin: { t: 0 } } );
    </script>

</html>

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).

/* Load the defaults from `<userDir>/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

2

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.

3

Thanks Julian
Sound advice as usual

Ian

4

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