-
Notifications
You must be signed in to change notification settings - Fork 36
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Modals don't work without overriding styles #57
Comments
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:
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 ;; 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 ;) |
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
Should this be mentioned in the documentation? It might be worth providing a css file with om bootstrap that provides the correct behaviour?
Thanks
The text was updated successfully, but these errors were encountered: