# Title bar (set dimension)

**URL:** <https://discourse.nodered.org/t/title-bar-set-dimension/86420>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [14 March 2024 06:30 UTC](https://discourse.nodered.org/t/title-bar-set-dimension/86420 "2024-03-14T06:30:31Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [14 March 2024 06:30 UTC](https://discourse.nodered.org/t/title-bar-set-dimension/86420/1 "2024-03-14T06:30:31Z")

</div>

Hi,  
I would like to set the height or hide the title bar, is it possible?

---

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [14 March 2024 07:28 UTC](https://discourse.nodered.org/t/title-bar-set-dimension/86420/2 "2024-03-14T07:28:53Z")

</div>

Yep, no problem

```auto
[{"id":"4dc5011bc5629643","type":"ui_template","z":"3214abbc22cff266","group":"56ee1a813c413d19","name":"ToolbarSmall","order":4,"width":0,"height":0,"format":"<style>\n \n .md-toolbar-tools{\n max-height: 32px;\n font-size: 12px;\n }\n \n md-toolbar{\n min-height: 20px;\n }\n \n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":690,"y":120,"wires":[[]]},{"id":"56ee1a813c413d19","type":"ui_group","name":"Map","tab":"bde08c098ede4880","order":1,"disp":false,"width":"35","collapse":false,"className":""},{"id":"bde08c098ede4880","type":"ui_tab","name":"Sylvius","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [14 March 2024 07:41 UTC](https://discourse.nodered.org/t/title-bar-set-dimension/86420/3 "2024-03-14T07:41:23Z")

</div>

Pretty sure that is for node-red-dashboard (legacy) not the new node-red-dashboard 2.

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [14 March 2024 07:46 UTC](https://discourse.nodered.org/t/title-bar-set-dimension/86420/4 "2024-03-14T07:46:59Z")

</div>

Thank you but I was asking for dashboard 2.0 ...

---

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [14 March 2024 07:50 UTC](https://discourse.nodered.org/t/title-bar-set-dimension/86420/5 "2024-03-14T07:50:03Z")

</div>

Sorry, my mistake. It's indeed for dashboard1.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [14 March 2024 09:05 UTC](https://discourse.nodered.org/t/title-bar-set-dimension/86420/6 "2024-03-14T09:05:02Z")

</div>

We have a feature request to hide the title bar [here](https://github.com/FlowFuse/node-red-dashboard/issues/645) which is definitely on our todo list.

For the height, it's a bit of pain because of how Vuetify enforces it, but there are two places you need to write CSS for:

```css
.v-main {
    --v-layout-top: <height>
}

.v-toolbar__content {
    height: <height>
}

```

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [14 March 2024 09:20 UTC](https://discourse.nodered.org/t/title-bar-set-dimension/86420/7 "2024-03-14T09:20:08Z")

</div>

Ok, thank you ....

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [24 March 2024 19:09 UTC](https://discourse.nodered.org/t/title-bar-set-dimension/86420/8 "2024-03-24T19:09:41Z")

</div>

Hi,  
sorry but I added your code in my css node but nothing changes (px value is ok?)  
Can you give me more information?

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [24 March 2024 19:18 UTC](https://discourse.nodered.org/t/title-bar-set-dimension/86420/9 "2024-03-24T19:18:26Z")

</div>

Yeah, px value is fine. Can you screenshot the config of your node?

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [24 March 2024 19:24 UTC](https://discourse.nodered.org/t/title-bar-set-dimension/86420/10 "2024-03-24T19:24:08Z")

</div>

it's enough? ....

 ![css](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/e/7ec594e1dbfbc24d40747140f50bc4810279e5c5.png)

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [24 March 2024 20:37 UTC](https://discourse.nodered.org/t/title-bar-set-dimension/86420/11 "2024-03-24T20:37:58Z")

</div>

They would need to be the same value, although should still change something if they aren’t.

The only thing I can think of is maybe you're doing a partial deploy? Maybe try and do a Full Deploy?

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [25 March 2024 05:26 UTC](https://discourse.nodered.org/t/title-bar-set-dimension/86420/12 "2024-03-25T05:26:35Z")

</div>

I checked, it's Full Deploy ....  
The height does not change even if I change the values ....

---

<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:** [25 March 2024 06:20 UTC](https://discourse.nodered.org/t/title-bar-set-dimension/86420/13 "2024-03-25T06:20:39Z")

</div>

You must use the `!important` flag for both rules.

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [25 March 2024 06:34 UTC](https://discourse.nodered.org/t/title-bar-set-dimension/86420/14 "2024-03-25T06:34:12Z")

</div>

Evidently I have some wrong settings because even use the `!important` flag, the height does not change...

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [25 March 2024 08:34 UTC](https://discourse.nodered.org/t/title-bar-set-dimension/86420/15 "2024-03-25T08:34:43Z")

</div>

My mistake in css node, with `!important` flag now work fine, sorry .... thank you ....

---

<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:** [8 April 2024 08:34 UTC](https://discourse.nodered.org/t/title-bar-set-dimension/86420/16 "2024-04-08T08:34:55Z")

</div>

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