UI seems broken: sidebar doesn't retract and overlays page and makes force dialog unusable

[bdbaddog]

I'm attaching a screenshot. If you go to waterfall, click on a builder, then click on a force build button, the sidebar is on top of the left part of the modal dialog and so the modal is unusable.

[bdbaddog]

screenshot

[dustin]

I'm seeing the same regarding the sidebar not retracting. I'm on Firefox - maybe it works in Chrome?

[bdbaddog]

Tried both Chrome and Firefox on mac. Same issue on both. Is the sidebar supposed to retract? You can see it's sliding the main page around when you click the pin..

[thedylman]

Saw this problem in 0.9.0b2, more screen shots in #3343

[ddelemeny]

Hi, I'm pretty new to buildbot, and I just installed 0.9.0b6 from pypi to test it out. While trying out the features, I quickly ran into the bug described here. As an angular/ui.bootstrap user, it looked familiar.

I discussed it a bit on IRC with djmitche, but as I tried to define what would be a patch, I figured out that an elegant fix does not come out so clearly.

Here's what I found :

---

The bug can be understood in multiple ways :

(Modal CSS POV) Modal doesn't have high enough z-index

The semantics of a modal are usually "this dialog is on top of everything else", which is not the case here because the sidebar has a higher z-index (3000) than ui.bootstrap modals (1040/1050).

Unfortunately, ui.bootstrap has this value hardcoded in the default templates.

​https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html#L4

A way to fix would be to either use a patched version of the templates, or just override them in the template cache.

A way to bodge this would be to force the z-index on modals, with a risk on breaking stacks of modals:

css:

.override-modal-backdrop-z { z-index:3040 !important; }
.override-modal-z { z-index:3050 !important; }

coffee:

app.config ($modalProvider) ->
    $modalProvider.options.backdropClass = ["override-modal-backdrop-z"]
    $modalProvider.options.windowClass = ["override-modal-z"]

(Sidebar CSS POV) Sidebar has its z-index too high

The semantics of a sidebar are a bit less well-defined than a modal but in guanlecoja, it seems to be "The sidebar should be on top of the content". However the value conflicts with ui.bootsrap's modal. An option would be to lower the z-index to a compatible value, at least under 1040.

​https://github.com/buildbot/guanlecoja-ui/blob/master/src/module/page_with_sidebar/page_with_sidebar.less#L79

(Element reparenting POV) Modal should be contained in .content's available real-estate

The semantics of the sidebar could also include "the sidebar's real-estate is not part of the content and should not be available for content rendering". This would mean that the modal's DOM elements should be rooted under the .content element (which serves as a frame), and have position:absolute instead of position:fixed, to have a position relative to that frame.

ui.bootstrap provides the appendTo option to reparent modals to any element, which can be set globally, but this feature has been introduced in the 1.0.X branch. guanlecoja uses ui.bootstrap 0.11.X

​http://angular-ui.github.io/bootstrap/#/modal

---

I hope this will be useful to the next person coming on this ticket.

-- Damien

[dustin]

Thanks Damien!

[tardyp]

fixed by ​https://github.com/buildbot/buildbot/pull/1980

[bdbaddog]

​https://github.com/buildbot/buildbot/pull/1980 fixes part of this bug. The modal is now visible. but the sidebar still doesn't retract.

[tardyp]

just verified this works for me.

The side bar doesn't retract until you hit the "pin" button.

This was request asked by some users who found auto retract feature to annoying and not useful when working with big screen

[tardyp]

please reopen if this is not working for you as expected in beta8