Comments (16)
v1.0.0 was just published and classnames can override defaults now.
from react-modal.
@dzmitry-kremez-itechart I'm working on finalizing a few details with the new release. It will happen soon, hopefully this week.
from react-modal.
@ericsoco It would be useful to have that in the docs, but it is quite annoying to have to override every single property for the content and the background if I want to use classes.
from react-modal.
+1 this would be very useful. I would like to just position the elements using flexbox properties.
from react-modal.
I was about to create an issue for the same thing. Only, I was going to create the issue as a suggestion to add this to docs:
To disable the default styles, specify
null
for each value to disable. This is useful for styling via a stylesheet instead of using inline styles. For example:modalStyles = { content: { background: null { };
This works -- any style set to null
will not be written to the DOM element, and so can easily be specified with a stylesheet instead.
from react-modal.
I'd love to see this, at the moment as a temp fix I have all the relevant styles set to null individually
On 12 Nov 2015, at 19:11, Eric Socolofsky [email protected] wrote:
I was about to create an issue for the same thing. Only, I was going to create the issue as a suggestion to add this to docs:
To disable the default styles, specify null for each value to disable. This is useful for styling via a stylesheet instead of using inline styles. For example:
modalStyles = {
content: {
background: null
{
};
—
Reply to this email directly or view it on GitHub.
from react-modal.
Yep, @ericsoco's workaround worked for me.
If anyone's interested, these are the styles I'm using to have flexbox position the modal::
https://gist.github.com/mjyoung/c10ed08eefcf2e1d5afc
from react-modal.
@idmontie agreed. I have this in my code now:
modalStyle = {
overlay : {
backgroundColor: null
},
content : {
top: null,
left: null,
right: null,
bottom: null,
border: null,
background: null,
borderRadius: null,
padding: null,
position: null
}
};
And that's a little ridiculous.
from react-modal.
I just ran into this while updating a project from 0.2 to 0.6.1. @ericsoco's workaround works, but is pretty gross.
#100 looks like it'll fix it.
from react-modal.
We should write:
content: {
top: 'initial',
left: 'initial,
....
}
from react-modal.
And that's a little ridiculous.
agreed
from react-modal.
@ericsoco 👍 I can't understand why defaults are enforced like this
from react-modal.
+1
from react-modal.
Just opened another issue but then saw this one that is basically asking the same question. Having to turn off every style seems a little ridiculous and can be breaking if new "default" styles are added. Would prefer to just turn them off and work within CSS.
from react-modal.
+1 Also as I see here https://github.com/reactjs/react-modal/blob/master/lib/components/ModalPortal.js#L183 you disable default styles if there are class names. But it doesn't work in latest(0.6.1) npm and bower lib version. Could you please publish latest master code to npm and bower?
from react-modal.
@claydiffrient cool, thx
from react-modal.
Related Issues (20)
- Focus on the input element is lost when trying to scroll modal content by dragging scrollbar
- Focus trap incorrectly finds tabbable elements HOT 11
- Modal doesn't close on the first click on the overlay after click on elements containing event.stopPropagation() inside modal HOT 11
- Add support for React & Node 18 (as easy as adding startTransition() on each setState) HOT 18
- When I try to apply css variables from css modules in React, nothing is passed HOT 9
- Npm start related issue
- Why convert position property to inset? HOT 2
- Analysis: 90% of dependency updates in this repository can be merged.
- Should use event.key not event.code
- How can i make the modal overlay non blocking? HOT 2
- Resize error when moving tab around HOT 2
- Display blurry when elements with position attributes and have scrollbars. HOT 3
- Close the modal window on the first click when using stopPropagation() HOT 3
- Moving to a "modern" build system (hardcore level) HOT 6
- Refactor react-modal to use TypeScript HOT 1
- Replace Karma (now deprecated) with a new test runner HOT 6
- Runtime error when tabbing elements where shadowDom is a document fragment rather than an element
- Consider dropping support for React versions <= v16 HOT 3
- Avoid Scroll position being kept HOT 7
- react-modal issue
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-modal.