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?
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
2 Likes
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;
}
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;
}
1 Like