Modals don't work without overriding styles
Opened this issue · 10 comments
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
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?
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.
@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.
No, in this case I have only used strings for display: "none" and position: "relative"
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.
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
@sritchie I can open a pull request so you can see what I mean if you are interested.
That'd be great if you've got the time. I'll take a look and see what I can do.
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)))
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 ;)