How to apply responsiveness to the node-red dashboard?

Dashboard
,
1

I'm working on a Node-RED dashboard and struggling to make the layout responsive across different screen sizes and devices. I want the dashboard to adapt seamlessly whether it's viewed on a smartphone, tablet, or desktop.

I've tried adjusting the grid settings and group widths, but the layout still doesn’t scale as I’d like. Does anyone have suggestions or best practices for ensuring that a Node-RED dashboard is fully responsive?

Thanks in advance for any help!

see the image. It is not showing any responsiveness at all.

Screenshot 2024-09-04 121430
Screenshot 2024-09-04 1214301037×893 23.9 KB

tried this also:

<style>
  #Home_soil_sensor {
    position: relative;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }

  @media (min-width: 768px) {
    #Home_soil_sensor {
      width: 75%;
      margin: 0 auto;
    }
  }

  @media (min-width: 992px) {
    #Home_soil_sensor {
      width: 50%;
      margin: 0 auto;
    }
  }

  @media (min-width: 1200px) {
    #Home_soil_sensor {
      width: 40%;
      margin: 0 auto;
    }
  }
</style>

<div id="Home_soil_sensor" class="visible">
  <!-- Your content here -->
</div>
2

Hi @shamim237 - welcome to the Node-RED Forums and thanks for your question.

I'm going to assume you're using the latest Dashboard, rather than the deprecated Dashboard, although the colour of the navigation header suggests you may be using the latter,.

Dashboard 2.0 Solution:

Dashboard 2.0 has multiple options for Layouts, including "Grid", which is responsive by default, so the ui-template you're building in will automatically scale to the width of the screen.

3

Quick hint on @media breakpoints. It is much better to use em measures rather than px in breakpoints since it means that users who zoom in or out will still get sensible switchovers.

Here is my note-to-self for remembering reasonably standard breaks:

 * Recommended @media breakpoints:
 * Tablet:        48em @ 16pt   = 768px
 * Tablet Wide:   62em @ 16pt   = 992px
 *
 * Mobile Small:  30em @ 16pt   = 480px
 * Mobile Medium: 37.5em @ 16pt = 600px
 * Mobile Large:  48em @ 16pt   = 768px

16pt is the default font point size for most browsers.

4

thanks, I just realized we were using older version of the dashboard. :expressionless: