# Is there a way to set a minimum size for the sidebar?

**URL:** <https://discourse.nodered.org/t/is-there-a-way-to-set-a-minimum-size-for-the-sidebar/41320>\
**Category:** Dashboard\
**Created:** [19 February 2021 21:22 UTC](https://discourse.nodered.org/t/is-there-a-way-to-set-a-minimum-size-for-the-sidebar/41320 "2021-02-19T21:22:57Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![jha-sudo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jha-sudo/32/37581_2.png) [@jha-sudo](https://discourse.nodered.org/u/jha-sudo)\
**Post date:** [19 February 2021 21:22 UTC](https://discourse.nodered.org/t/is-there-a-way-to-set-a-minimum-size-for-the-sidebar/41320/1 "2021-02-19T21:22:57Z")

</div>

Whether it's a percentage or a fixed pixel minimum? I'd like the sidebar to be a bit wider on a small laptop screen on startup.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [20 February 2021 07:29 UTC](https://discourse.nodered.org/t/is-there-a-way-to-set-a-minimum-size-for-the-sidebar/41320/2 "2021-02-20T07:29:14Z")

</div>

In the editor (right or left?) or dashboard?

---

<div class="post-metadata">

**Author:** ![leftymuller](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/leftymuller/32/102326_2.png) [@leftymuller](https://discourse.nodered.org/u/leftymuller)\
**Post date:** [20 February 2021 07:40 UTC](https://discourse.nodered.org/t/is-there-a-way-to-set-a-minimum-size-for-the-sidebar/41320/3 "2021-02-20T07:40:02Z")

</div>

hey @zenofmud id like to know for the dashboard please?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [20 February 2021 08:28 UTC](https://discourse.nodered.org/t/is-there-a-way-to-set-a-minimum-size-for-the-sidebar/41320/4 "2021-02-20T08:28:58Z")

</div>

There is couple of CSS rules controlling the sidebar wideness. Due the fact that the layout should behave nicely on multiple screens, the rules are made with media query so it is not as simple as "set width for one element" . It is not possible to give an exact advise so I just point out the rules which you then can override and see what will happen.

```auto
@media(max-width: 660px) {
    md-sidenav,
    md-sidenav.md-locked-open,
    md-sidenav.md-closed.md-locked-open-add-active {
    	min-width: 64px !important;
        width: auto;
    	max-width: 200px !important;
    }
}
@media(min-width: 661px) {
    md-sidenav,
    md-sidenav.md-locked-open,
    md-sidenav.md-closed.md-locked-open-add-active {
    	min-width: 64px !important;
        width: auto;
    	max-width: 320px !important;
    }
}

```

---

<div class="post-metadata">

**Author:** ![jha-sudo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jha-sudo/32/37581_2.png) [@jha-sudo](https://discourse.nodered.org/u/jha-sudo)\
**Post date:** [20 February 2021 17:41 UTC](https://discourse.nodered.org/t/is-there-a-way-to-set-a-minimum-size-for-the-sidebar/41320/5 "2021-02-20T17:41:23Z")

</div>

in the editor.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [20 February 2021 19:16 UTC](https://discourse.nodered.org/t/is-there-a-way-to-set-a-minimum-size-for-the-sidebar/41320/6 "2021-02-20T19:16:00Z")

</div>

Which sidebar - right or left?

---

<div class="post-metadata">

**Author:** ![jha-sudo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jha-sudo/32/37581_2.png) [@jha-sudo](https://discourse.nodered.org/u/jha-sudo)\
**Post date:** [20 February 2021 19:20 UTC](https://discourse.nodered.org/t/is-there-a-way-to-set-a-minimum-size-for-the-sidebar/41320/7 "2021-02-20T19:20:01Z")

</div>

there's technically only one sidebar from a ui name perspective. The red-ui-sidebar is on the right. The palette bar is on the left. No need to adjust that one.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [20 February 2021 19:29 UTC](https://discourse.nodered.org/t/is-there-a-way-to-set-a-minimum-size-for-the-sidebar/41320/8 "2021-02-20T19:29:08Z")

</div>

What’s wrong with grabbing it and resizing it?

---

<div class="post-metadata">

**Author:** ![jha-sudo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jha-sudo/32/37581_2.png) [@jha-sudo](https://discourse.nodered.org/u/jha-sudo)\
**Post date:** [20 February 2021 19:37 UTC](https://discourse.nodered.org/t/is-there-a-way-to-set-a-minimum-size-for-the-sidebar/41320/9 "2021-02-20T19:37:00Z")

</div>

Because that's a major inconvenience to do that every time the editor is loaded. I'm building a node that adds a sidebar menu, and I'd like it to be wider by default without any manual intervention.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [20 February 2021 21:32 UTC](https://discourse.nodered.org/t/is-there-a-way-to-set-a-minimum-size-for-the-sidebar/41320/10 "2021-02-20T21:32:05Z")

</div>

You're building a node that is going to add another sidebar to the editor?

I'm not sure how you would do that. Maybe @dceejay would be able to offer some guidance.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [20 February 2021 22:43 UTC](https://discourse.nodered.org/t/is-there-a-way-to-set-a-minimum-size-for-the-sidebar/41320/11 "2021-02-20T22:43:30Z")

</div>

I think the open width of the sidebar is stored in the users browser local storage, so overriding something a user sets is generally a bad idea.

---

<div class="post-metadata">

**Author:** ![jha-sudo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jha-sudo/32/37581_2.png) [@jha-sudo](https://discourse.nodered.org/u/jha-sudo)\
**Post date:** [21 February 2021 00:46 UTC](https://discourse.nodered.org/t/is-there-a-way-to-set-a-minimum-size-for-the-sidebar/41320/12 "2021-02-21T00:46:43Z")

</div>

> [@dceejay](#):
>
> overriding something a user sets is generally a bad idea.

I definitely agree. What I'm inquiring about is establishing a minimum width for the sidebar. So that when a user attempts to size the sidebar it won't go any smaller than that established width.

No matter though, I checked the code, and it doesn't look like this is possible without changing some of the functionality of the drag event for the for the red-ui-sidebar-separator element.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [22 April 2021 00:47 UTC](https://discourse.nodered.org/t/is-there-a-way-to-set-a-minimum-size-for-the-sidebar/41320/13 "2021-04-22T00:47:29Z")

</div>

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