# Change position of notification pop up

**URL:** <https://discourse.nodered.org/t/change-position-of-notification-pop-up/65279>\
**Category:** Dashboard\
**Created:** [18 July 2022 16:35 UTC](https://discourse.nodered.org/t/change-position-of-notification-pop-up/65279 "2022-07-18T16:35:37Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![tcr000](https://avatars.discourse-cdn.com/v4/letter/t/65b543/32.png) [@tcr000](https://discourse.nodered.org/u/tcr000)\
**Post date:** [18 July 2022 16:35 UTC](https://discourse.nodered.org/t/change-position-of-notification-pop-up/65279/1 "2022-07-18T16:35:37Z")

</div>

Is it possible to change the position of the dashboard notification pop up? The OK Cancel Dialog and the OK Cancel Dialog with input appear in the middle of the screen. I need to move them up because I have a virtual keyboard located in the bottom portion. I suspect I can add something to my template node.

Thanks,  
Tom

---

<div class="post-metadata">

**Author:** ![HaroldPetersInskipp](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/haroldpetersinskipp/32/42319_2.png) [@HaroldPetersInskipp](https://discourse.nodered.org/u/HaroldPetersInskipp)\
**Post date:** [18 July 2022 17:02 UTC](https://discourse.nodered.org/t/change-position-of-notification-pop-up/65279/2 "2022-07-18T17:02:04Z")

</div>

Assign a class in the `notification` node like `exampleclass`

You can then use a `ui-template` node like this:

```auto
[{
        "id": "2e86cd7bdb8144f2",
        "type": "ui_template",
        "z": "33acb8202a4b294d",
        "group": "cf1f037f2369dee3",
        "name": "CSS",
        "order": 1,
        "width": 1,
        "height": 1,
        "format": "<style>\n .exampleclass {\n position: absolute;\n top: 0px;\n left: 0px;\n };\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 770,
        "y": 400,
        "wires": [[]]
}]

```

Depending on your needs, you will need to look up the relevant css to modify the example.

---

<div class="post-metadata">

**Author:** ![tcr000](https://avatars.discourse-cdn.com/v4/letter/t/65b543/32.png) [@tcr000](https://discourse.nodered.org/u/tcr000)\
**Post date:** [18 July 2022 17:56 UTC](https://discourse.nodered.org/t/change-position-of-notification-pop-up/65279/3 "2022-07-18T17:56:07Z")

</div>

Thanks for your help. Here is what I added to move the dialog box up a little from the screen center:

```auto
#nr-dashboard > div.md-dialog-container > md-dialog
{
    position: relative;
    top: -200px;
    left: 0px;
}

```

---

<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:** [17 August 2022 17:56 UTC](https://discourse.nodered.org/t/change-position-of-notification-pop-up/65279/4 "2022-08-17T17:56:22Z")

</div>

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