I use react-modal to create a open modal form (similar create post modal form facebook).
My expect:
When modal is open: scrollbar of window still show but thumb disabled (user can't scroll)
When modal is close: scrollbar of window show and thumb show.
My problem:
When modal is open, scrollbar always on top (top = 0). I know because my css body { position: fixed } but I want modal look like my expect
Here is my codesandbox for my problem: https://codesandbox.io/s/scroll-modal-form-rw2sf
Sorry about my bad english and thanks for your help.
I set the style of class ReactModalPortal and adjust the z-index. In addition remove the style of body. There is a sandbox
/* index.css */
.ReactModalPortal {
height: 100%;
width: 100%;
position: absolute;
top: 0;
z-index: -1;
}
// App.js
...
const portal = document.querySelector(".ReactModalPortal");
portal.style.zIndex = 0;
...
const portal = document.querySelector(".ReactModalPortal");
portal.style.zIndex = -1;
Maybe it is not as your expectation, but you could modify it.
Related
I have an overlayed view in my React Native app which I need to animate on and off screen when the user pushes a button. I know how to position the view and animate it but I can't work out how to trigger the animation.
My redux store has a very simple state with an isOpen flag saying whether the panel is open or closed. I map the state to the panel component's props and when the isOpen prop changes I want to trigger the open or close animation. Obviously if the user presses the toggle button mid animation the currently running animation needs to be cancelled.
This should be simple but I can't find any examples. Any help would be much appreciated.
React Native
To begin an animation on a change of props you can simply start your animation in componentDidUpdate. Here's an example:
componentDidUpdate(prevProps) {
if (this.props.isOpen !== prevProps.isOpen) {
this.state.animation.start();
}
}
Assuming your animation is defined in the component's state.
React (Browser):
[Not relevant to this question but potentially useful.]
A simple way to do this is using CSS transitions. What you can do is give the panel component a CSS class for closed (or open but I find using the closed/collapsed as a style easier because then the default is open).
Then in your panel's render:
render() {
const { isOpen } = this.props;
return <div className={ 'panel' + (isOpen ? '' : ' closed') }></div>
}
And in your CSS:
.panel {
/* some other styles */
transition: .5s ease-in;
}
.closed {
height: 0;
}
This way CSS can handle the animation logic and your concern of clicking the open/close button before the current animation has finished is addressed.
Here are the CSS transition docs: https://developer.mozilla.org/en-US/docs/Web/CSS/transition
Edit: A disadvantage of this method is that height must be explicitly set when the panel is open.
Here's a little example snippet:
function togglePanel() {
const panel = document.querySelector('div.panel');
if (panel.classList.contains('closed')) {
panel.classList.remove('closed');
} else {
panel.classList.add('closed');
}
}
.panel {
background-color: #00c0de;
height: 4rem;
overflow: hidden;
transition: .5s ease-in;
}
.closed {
height: 0;
}
<button onclick='togglePanel()'>Toggle Panel</button>
<div class='panel closed'>
<span>Hello, I'm the panel</span>
</div>
Following the installation guide in projectstorm/react-diagrams docs, I have trouble with the diagram not rendering properly. Inspecting the page reveals the positions of the nodes - but they are invisible. Using sass, I have imported into app.scss
#import "~storm-react-diagrams/src/sass/main";
I have also tried using the raw minified css with no improvement.
I still assume this is an error on my end, possibly I create the engine in the wrong place? I have a engineReducer to provide the default engine.
import * as SRD from "storm-react-diagrams";
//1) setup the diagram engine
var engine = new SRD.DiagramEngine();
engine.installDefaultFactories();
//2) setup the diagram model
var model = new SRD.DiagramModel();
//3-A) create a default node
var node1 = new SRD.DefaultNodeModel("Node 1", "rgb(0,192,255)");
let port1 = node1.addOutPort("Out");
node1.setPosition(100, 100);
//3-B) create another default node
var node2 = new SRD.DefaultNodeModel("Node 2", "rgb(192,255,0)");
let port2 = node2.addInPort("In");
node2.setPosition(400, 100);
// link the ports
let link1 = port1.link(port2);
link1.addLabel("Hello World!");
//4) add the models to the root graph
model.addAll(node1, node2, link1);
//5) load model into engine
engine.setDiagramModel(model);
const initialEngine = engine;
export default function (state = engine, action) {
return state;
}
Then, my main component looks like this:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import * as SRD from "storm-react-diagrams"
import {connect} from 'react-redux';
class Main extends Component {
render() {
console.log(this.props.engine); // Looks good!
return (
<div className="app">
<SRD.DiagramWidget className="srd-demo-canvas" diagramEngine={this.props.engine} />
</div>
);
}
}
function mapStateToProps(state) {
return { engine: state.engine };
}
export default connect(mapStateToProps)(Main)
Quite honestly I dont understand the docs reference to
In your library code
that is, where should I initialize the engine? What else am I missing?
You need to set a explicit height for the widget. Something like:
.srd-demo-canvas {
height: 100vh;
}
.srd-demo-canvas {
height: 100vh;
background-color: rgb(60,60,60)
}
Setting the background-color in addition to the height helped me see the links against the white background that Chrome gave me by default.
If you want the grid that the demos show, then install sass and:
.srd-demo-canvas{
height: 100%;
min-height: 300px;
background-color: rgb(60,60,60) !important;
$color: rgba(white, .05);
background-image:
linear-gradient(0deg,
transparent 24%,
$color 25%,
$color 26%,
transparent 27%,
transparent 74%,
$color 75%,
$color 76%,
transparent 77%,
transparent),
linear-gradient(90deg,
transparent 24%,
$color 25%,
$color 26%,
transparent 27%,
transparent 74%,
$color 75%,
$color 76%,
transparent 77%,
transparent);
background-size:50px 50px;
.pointui{
fill: rgba(white,0.5);
}
}
I tried following the suggested fixes but nothing worked for me.
Here's what really fixed the issue for both the nodes and the elements not showing properly.
I removed the importing of the storm-react-diagrams/dist/style.min.css
and instead, I created a custom CSS file which is the above file with the following modifications (You can find it under "node_modules/storm-react-diagrams/dist/" style.min.css):
.srd-diagram{position:unset;flex-grow:1;display:flex;cursor:move;overflow:visible}
(position to unset and overflow to visible)
.srd-link-layer{position:unset; ...}
(position to unset)
In general , the wrapper element (div for example) should have those css properties.
display:grid;
height: 100vh;
min-height: 100%;
width: 100vw;
Hello guys I have decided to start my own flowchart open project with ReactJs, but if you need, you can adapt it to pure javascript, please feel free to contribute.
https://github.com/lmoraobando/lmDiagram
I have to create some complex animations. It was cool to develop them with jQuery or VanillaJS, but I guess that I should choose another way with React. Google gave me ReactCSSTransitionGroup but it seems to be broken and unmaintained (according to this message: github.com). E.g. I can't make a delay before starting the animation.
I also found a library called React-motion but I'm not sure if it's actually a tool that I need. So I want to ask whether you can recommend me something about it. Probably I should use VanillaJS (using refs and other ReactDOM functions)? Or there is another approach to it? Thanks in advance.
The easiest way to do animations in React, or, in fact, anywhere on the web, is to use CSS Transitions.
CSS Transitions actually has nothing to do with React. Quoting MDN,
CSS Transitions is a module of CSS that lets you create
gradual transitions between the values of specific CSS properties. The
behavior of these transitions can be controlled by specifying their
timing function, duration, and other attributes.
Because CSS transitions is a pure CSS, they can be used in React applications, Angular, plain Javascript or even old-school server-rendered pages with no Javascript at all.
It is not the most versatile or powerful technique. But since in most cases the animations we want are pretty simple, why looking for something more complicated when a simple will do the job?
CSS Transitions are also well-supported by all major browsers with a notable exception of Opera Mini and IE below version 10.
CSS Transitions give us an ability to animate between the two CSS states. Let's say you want to animate opening and closing of a drawer (triggered by a click on a button). Let's assume we have a flex container around the drawer. When the drawer is opened, we want it to occupy 100% of the container width, therefore its max-width should be 100%. When it is closed, its width should be 0. We can create two CSS styles:
/* This CSS style is applied when the drawer is opened */
const openedStyle = {
maxWidth: '100%' /* max-with is 100% when the drawer is opened */,
};
/* This CSS style is applied when the drawer is closed */
const closedStyle = {
maxWidth: 0 /* max-width is 0 in the closed drawer */,
};
Then we handle opening / closing event apply one of those classes to the drawer object on opening / closing:
class Drawer extends React.Component {
state = {
opened: false // Initially search form is Closed
};
toggleOpened = () =>
// Toggle opened / closed state.
// Because we rely on the previous state, we need to use
// a functional setState form
// https://ozmoroz.com/2018/11/why-my-setstate-doesnt-work/
this.setState(state => ({ ...state, opened: !state.opened }));
render() {
const { opened } = this.state;
return (
<div className="drawer-container col-12 col-md-4">
<input
type="text"
className="drawer"
// Apply 'openedStyle' CSS class if the drawer is opened,
// and 'closedStyle' if the drawer is closed.
style={opened ? openedStyle : closedStyle}
/>
<button
type="button"
className="open-close-button btn btn-primary"
onClick={this.toggleOpened}
>
{opened ? 'Close' : 'Open'}
</button>
</div>
);
}
}
export default Drawer;
When we press the "Open / Close" button, the drawer will flip between 0 and 100% width, effectively opening and closing.
All we need now is to animate it.
For that we need a secret ingredient - a CSS transition property. All we need to do is to add the following style to the drawer:
/* This CSS style is applied when the drawer is opened */
const openedStyle = {
maxWidth: '100%' /* max-with is 100% when the drawer is opened */,
/* Upon transitioning to Open,
animate `max-width' for 0.5s*/
transition: 'max-width 0.5s'
};
/* This CSS style is applied when the drawer is closed */
const closedStyle = {
maxWidth: 0 /* max-width is 0 in the closed drawer */,
/* Upon transitioning to Closed,
animate `max-width' for 0.5s */
transition: 'max-width 0.5s'
};
Voilà! We've got our animation - upon clicking the button our drawer is now expanded and collapsed within half a second!
This is it in the nutshell, but there is more to it:
You can animate more than one CSS attribute with a CSS transition.
You can apply delay to transitionable properties, i.e. animate opacity first, and then animate width of the same element after 0.5 second delay.
You can apply various timing functions to transitions.
I wrote an expanded blog post explaining all the above: Painless React Animations via CSS Transitions.
Check out this easy to use and popular package:
https://www.npmjs.com/package/react-transition-group
Install:
npm install react-transition-group
Usage:
import { CSSTransition } from 'react-transition-group';
<CSSTransition
in={toShow} // boolean value passed via state/props to either mount or unmount this component
timeout={300}
classNames='my-element' // IMP!
unmountOnExit
>
<ComponentToBeAnimated />
</CSSTransition>
NOTE: Make sure to apply below styles using the class property in CSS:
.my-element-enter {
opacity: 0;
transform: scale(0.9);
}
.my-element-enter-active {
opacity: 1;
transform: translateX(0);
transition: opacity 300ms, transform 300ms;
}
.my-element-exit {
opacity: 1;
}
.my-element-exit-active {
opacity: 0;
transform: scale(0.9);
transition: opacity 300ms, transform 300ms;
}
Maybe react-magic can help you.
I am using the ngToast to display the success messages in angularJs, but success message is displaying behind the modal popup.
How can I display the ngToast message on top of the Modal Popup?
Add the following to your CSS:
toast {
z-index: 7000;
}
Bootstrap modal has a z-index of 1040, so anything above that should make the toast message appear over the modal.
Try This
#toast-container {
z-index: 9999999;
}
Check the z-index of your modal by inspecting modal element( eg: if it is 1050). add any value above this index to your toast will work
toast {
z-index: 1051
}
EDITED:
I've found the solution.
In my case I had to use a huge number for z-index, but also I had to use in other css class, as follows:
.ng-toast {
z-index: 100000; // I don't have any ideia why, but worked!
}
Check your modal z-index. And check your toastr z-index. Anything appearing on modal should have a higher z-index than modal z-index.
if your modal z-index is 999
.modal {
z-index: 999
}
toastr z-index should be anything above 999
Using Bootstrap and Angularjs I'd like to create a button that doesn't ever appear to be "active". I'd like the button to darken slightly when the mouse is over it, and I'd like it to darken further when it's clicked. When the mouse leaves the button, however, I'd like it to return to its original appearance.
Semantically, I'm using the button to "reset" part of my app. I want to execute some code when it's clicked. After it's been pressed, though, it doesn't make sense for the button to remain in a "depressed" state.
Here's a live example.
Any ideas?
Alternatively you could use the ng-mouseenter and ng-mosueleave directives.
For example:
<div ng-app="ButtonApp">
<div ng-controller="MainCtrl">
<button ng-class="buttonClass"
ng-mouseenter="onMouseEnter()"
ng-mouseleave="onMouseLeave()"> Click Me!
</div>
</div>
And in your controller:
var app = angular.module('ButtonApp',[]);
app.controller('MainCtrl', ['$scope',function($scope){
var defaultButtonClass = ['btn','btn-foxtrot'];
$scope.buttonClass = defaultButtonClass;
$scope.onMouseEnter = function(){
$scope.buttonClass = ['btn','btn-bravo'];
};
$scope.onMouseLeave = function() {
$scope.buttonClass = defaultButtonClass;
}
}]);
You can see my JSFiddle.
To generate the button colors you could use something like Beautiful Buttons for
Twitter Bootstrappers.
I'd give it another class, say btn-reset and add the following CSS.
// the order of these two is also important
.btn-reset:hover{
background-color: Dark !important;
}
.btn-reset:active{
background-color: Darkest !important;
}
// you need this to reset it after it's been clicked and released
.btn-reset:focus{
background-color: Normal !important;
}
It's working here http://plnkr.co/edit/QVChtJ8w70HXmyAaVY4A?p=preview
The issue is that the :focus pseudo class has a darker colour than the standard button so after it's been clicked it still has focus so still has the darker colour, if you want to stick with the standard colours you can just add a new selector for the :focus pseudo class.