How to move debug menu circle from the right bottom corner?

Dash Python
1

Hello, everyone! The debug menu circle obscures some of the UI elements and I need to move it. I have seen a similar topic “How to move circle menu containing ‘<>’ from lower right corner of dashboard?”, but the solution there just recommends to turn the debug mode off. However, I need to have this debug mode for a while. How can I reposition this button?

2

Hi, this can be easily resolved by using css: Add the following to your css script. It is a little buggy afterwards but for my use cases it worked always fine.

.dash-debug-menu__outer, .dash-debug-menu {
    top: 10px;
    left: 10px;
}

Further options would be to use bottom instead of top and right instead of left. Hope this helps?
Best
xderes

3

Thank you very much! I’ve managed to get the desired output with this:

.dash-debug-menu__outer--open {
    bottom: 10px;
    left: 10px;
    right: initial;
    padding: 5px 5px 5px 78px;
}

.dash-debug-menu__outer--closed {
    bottom: 18px;
    left: 21px;
    right: initial;
}

.dash-debug-menu {
    bottom: 18px;
    left: 21px;
}
4

Hi @sepremento
Feel free to try this solution that my colleague wrote up as well:

.dash-debug-menu__outer--closed {
    display: none;
}

.dash-debug-menu__outer--open {
    left: 27px; /*  originally this was right */
    right: auto;
    padding: 5px 5px 5px 78px; /* originally this was 5px 78px 5px 5px */
}

.dash-debug-menu {
    left: 35px; /*  originally this was right */
    right: auto;
}

.dash-debug-alert-label {
    left: 35px; /*  originally this was right */
    right: auto;
}