I want to adjust the position of the floater for a particular step, I was trying to do:
floaterProps: {
styles: {
tooltip: {
top: -200
},
arrow: {
top:-200
}
}
But it is not working!
Is this the wrong way?
You need to use position: absolute in your tooltip and then adjust the position with top, bottom, left, right properties. more about positioning on MDN documentation.
tooltip: {
position: absolute,
top: 20px,
left: 10px,
}
If you are trying to use multi-tooltips in your application, you can also adjust their position in the Z axis by adding z-index property. more information on MDN documentation.
Related
I am trying to position this sidebar just the opposite of what it is currently doing. I want the sidebar to come in from the right and stay right all through. not left.
this the sandbox link for you to reproduce - https://codesandbox.io/s/react-spring-sidebar-transition-forked-igmgr.
Thank you.
Position the sidebar to the right first.
.sidebar {
position: absolute;
right:0;
}
Change the transform to positive x direction
from: {
transform: "translateX(100%)"
},
enter: {
transform: `translateX(0)`
},
leave: {
transform: "translateY(100%)"
},
I have a Switch and a Router, and whenever the route changes, it goes from left to right, I would like to know if there's a simple way that the animation can go from right to left based on the change of the route. Thanks in advance.
https://codesandbox.io/s/page-transition-with-react-router-and-react-spring-b07jp
I found this example online and I would like to know how can it go from right to left when you click profile.
The solution has two part, You want to determine when do you want to reverse the motion. In this case you want to reverse it when you are on the profile page. location.pathname === "/profile-page"
Then you have to switch the direction based on this information. This was described in the other answer. The whole example can be something like this:
const { location } = useContext(__RouterContext);
const reverse = location.pathname === "/profile-page";
const transitions = useTransition(location, (location) => location.pathname, {
from: {
position: "absolute",
width: "100%",
opacity: 0,
transform: reverse ? "translate(-100%,0)" : "translate(100%,0)"
},
enter: { opacity: 1, transform: "translate(0%,0)" },
leave: {
opacity: 0,
transform: reverse ? "translate(50%,0)" : "translate(-50%,0)"
}
});
The position is controlled by the transform: 'translate(__)' in lines 46-49 of that code. You can read more about CSS transforms and the translate function on MDN.
All that you need to do to reverse the direction is to reverse the signs of the two percentages.
Change translate(100%,0) to translate(-100%,0) in the from style.
Change translate(-50%,0) to translate(50%,0) in the leave style.
I'm trying to align the title to the left instead of the center (shown in the image).
I know this is possible on chartJS v3.0.0-alpha.2, but reactchartjs only goes up to 2.9.30 as far as I know.
Does anyone know how to achieve this in reactchartjs?
I thought it would be something like:
options={{
title: {
position: 'top',
align: 'left',
},
}}
Any help would be appreciated.
You should use the align parameter. This sets the alignment of the title. Your options are:
start
center
end
Your align: 'left' isn't one of the above and will not have any effect. Setting align: 'start' however will give you exactly what you want:
The full code looks like this:
<Chart
type='line'
data={dat}
options={{
plugins: {
title: {
display: true,
align: 'start',
text: 'Bitcoin Mining Difficulty'
}
}
}} />
Let me also mention that you should not confuse that with position: 'left'. position moves the whole title into one of top, left, bottom, right area of the chart. An example with a combination of position: 'left' and align: start:
The Chart.js Plugin Core API offers a range of hooks that may be used for performing custom code. You can use the afterDraw hook to draw the title yourself directly on the canvas using CanvasRenderingContext2D.fillText().
In React, you can register the plugin as follows:
componentWillMount() {
Chart.pluginService.register({
afterDraw: chart => {
let ctx = chart.chart.ctx;
ctx.save();
let xAxis = chart.scales['x-axis-0'];
ctx.textAlign = "left";
ctx.font = "14px Arial";
ctx.fillStyle = "black";
ctx.fillText("Title", xAxis.left, 10);
ctx.restore();
}
});
}
You'll also have to define some extra padding at the top of the chart to make sure, the title appears on the canvas.
options: {
layout: {
padding: {
top: 20
}
},
...
Please take a look at this StackBlitz and see how it works.
I have a custom panel and now I added animation for the panel to be show on button click. Problem now is the start & stop positions of the animation. I want to set the position from where to start the animation and where to end it.
Now am doing this way
showAnimation: {
type: 'slideIn',
direction: 'up',
duration: 400,
easing: 'ease',
listeners: {
animationend: function(evt, obj) {
// my code here
}
}
}
This shows the popup from the bottom of the screen but I don't want to come all the way from bottom of the screen. Is there a way to do it?
Instead of showAnimation, you can use Ext.Animator.run.
Here is the sample:
Ext.Animator.run({
element: this.getNavigation().element, // this.getYourViewObject().element
duration: 500,
easing: 'ease-in',
preserveEndState: true,
from: {
top: document.body.clientHeight // Max Height i.e Bottom
},
to: {
top: 0 // Height where you want to stop your Slide View
}
});
If you still don't get it, feel free to comment. I'll make you a Demo.
Using ExtJS 4, I have the following window:
var mainWin = Ext.create('Ext.Window',{
title: 'IE Screwup Illustration',
id: 'MAINWIN',
constrain: true,
constrainTo: 'appdiv',
x: 0,
y: 0,
width: '100%',
height: 518,
moveable: false,
closable: false,
layout: {
type: 'border',
padding: 3
},
renderTo: Ext.Element.get('appdiv'),
}).show();
Note the rendering to an element called "appdiv", which is a element whose style is shown below:
#appdiv {
position: absolute;
left: 10px;
width: 90%;
height: 520px;
border: 1px solid;
overflow: hidden;
border-color: #000000;
}
There is no problem rendering the window. It appears within the appdiv without problems with a nice border around it.
The problem begins when I resize the browser. It appears that the window attempts to center itself on the screen instead of within the appdiv DIV. This causes it to be displaced within the DIV so that it renders below and to the right of the left corner.
I have tried various tricks, including an attempt to reposition the window when it resizes. Nothing seems to work and I cannot think of anything else.
Could someone please give some idea how to keep this window within its DIV when a browser is resized? Thanks...
I have created a JS Fiddle to illustrate how I usually solved the problem in my projects.
The solution is to listen to the resize event of the Component over which you would like to center your window, and then calculate your window's new position. In my example this component was the viewport.
Here is the listener, that gets the job done:
viewPort.on('resize', function(vp, width, height) {
var me = this,
winWidth = me.getWidth(),
winHeight = me.getHeight(),
left = (width -winWidth) / 2,
top = (height -winHeight) / 2;
me.setPosition(left, top);
}, mainWin);
I found the answer to the problem. It turns out to be a question of timing.
It didn't make sense that the setPosition() method suggested by Matyas seemed to be ignored, so I checked the "move" event. Apparently, when an Ext window is rendered to a <div>, it receives move events after resize events. I do not know why (perhaps experts in ExtJS internals can help here?).
So instead of doing the calculations shown in Matyas' resize listener, I created a move listener in mainWin. Mine was somewhat simpler, since I wanted the window to stay put at the <div>'s upper left corner:
listeners: {
move: function(theWin,xP,yP,theOp) {
if((xP != 0) || (yP != 0)) {
theWin.setPosition(0,0);
}
}
This way, any time the browser moved the window to a position other than where I wanted it, I would set it back. This solved the problem.
Thanks for all who responded to this question (including the comments). Without those responses, I would not have had the clues I needed to solve this problem.
Try this:
Ext.EventManager.onWindowResize(function()
{
mainWin.doComponentLayout();
}, this, {buffer: 1});
Ext.EventManager.onWindowResize(function() {
if(mainWin.isVisible()) {
mainWin.center();
}
}, this, {buffer: 1});