Modals don't work without overriding styles

[lbradstreet]

Modals are display: none, thanks to the bootstrap css, and I couldn't manage to make them display by copying the documentation example. The om-bootstrap documentation uses a special asset that overrides this in http://om-bootstrap.herokuapp.com/static/assets/style.css

.bs-example .modal {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  bottom: auto;
  z-index: 1;
  display: block;
}

Should this be mentioned in the documentation? It might be worth providing a css file with om bootstrap that provides the correct behaviour?

Thanks

[sritchie]

Yeah, if we're doing custom CSS it probably should. @dignati, what do you think? Is there some vanilla Bootstrap way we could accomplish the same thing?

[lenaschoenburg]

That's unfortunate. I tried to add the css style directly to the code but again, this seems to break animation. Any idea why? This seems to be a deal breaker in #51 too.

[sritchie]

@dignati styles are a little weird in react. You have to use numbers instead of pixel values:

{:style {:margin-top 40}}

You may have done that, I just haven't checked for the commit.

[lenaschoenburg]

No, in this case I have only used strings for display: "none" and position: "relative"

[lbradstreet]

I'm off to sleep, so I can't have a look at this further, but maybe looking at https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Modal.jsx will provide a solution.

[lenaschoenburg]

They seem to do what I suggested, putting the css styles in the code: https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Modal.jsx#L39

[lenaschoenburg]

@sritchie I can open a pull request so you can see what I mean if you are interested.

[sritchie]

That'd be great if you've got the time. I'll take a look and see what I can do.

[rymndhng]

The problem I noticed is that you need to have show for the modal to show with some timing... in my own implementation, I needed to set up some go-routines to do this for me like this. You can't leave "show" on the modal though b/c it will invisibly block you from interacting with the rest of the viewport. I had to do something like this inside om/IWillMount

          ;; Trigger open animation
          (go (loop []
                (<! show-ch)
                (om/set-state! owner :animation "show")
                (<! (timeout 100))
                (om/set-state! owner :animation "show in")
                (recur)))

          ;; Trigger close animation
          (go (loop []
                (<! hide-ch)
                (om/set-state! owner :animation "show out")
                (<! (timeout 100))
                (om/set-state! owner :animation "")
                (recur)))

[marad]

As I see there is no progress with this issue for quite some time. The quick workaround for people struggling with this is adding this simple three lines in their css file:

.modal.in {
  display: block
}

This breaks the animation, but it's better than no window at all ;)