I am using #tippyjs/react": "^4.2.6 & the problem is that react-tippy not being positioned properly on sidebar of our dashboard, whenever there is content more than screen height and is scrollable the tippy button is placed more above than it is supposed to.
For example, when there is very little content on the right and there is no scroll bar tippy tool is positioned properly as shown in the image below:
But whenever there is more content than the screen height on the right and scroll bar appears tippy tool seems to be positioned wrong (A bit above than the button) as shown in image:
I checked multiple ways to figure / fix this but wasn't able to
The code I'm using is this for the button tippy tool is this:
import React from "react";
import Tippy from "#tippyjs/react";
const TippyReload = props => {
return (
<Tippy
animation="fade"
theme="custom"
content="Refresh Count"
placement="top"
arrow={true}
className={`custom-tippy`}>
{/* Wrap this component over the refresh icon, so this will be the refresh icon */}
{props.children}
</Tippy>
);
};
export default TippyReload ;
Related
I have a list of React Components that are inside a horizontal scroll menu. The components are draggable, and I want them to be able to be dragged and dropped outside the scroll menu and into other another component. IS that possible with a scroll menu. Are there other options I have to display draggable components horizontally that can be dragged and dropped anywhere on the screen?
<ScrollMenu>
{items.map((x) => (
<div>
{x}
</div>
))}
</ScrollMenu>
This is the only solution I've tried so far. Currently, the draggable component disappears when dragged outside of the view
I'm writing documentation for a React 18 component with storybook, a simple progress bar.
It's awesome, but i'm stumbling upon a annoying problem.
My component works very well in my application, and in the storybook canvas tab too.
But, inside the storybook Doc tab, it seems that it gets rerendered every time i change a prop in the defined below it.
Here's my documentation (mdx) file:
import { ArgsTable, Canvas, Meta, Story } from "#storybook/addon-docs/blocks";
import { ProgressBar } from "./ProgressBar";
<Meta
title="Layout/Header/ProgressBar"
component={ProgressBar}
/>
# ProgressBar
A progress bar for the Header component.
## Props
export const Template = (args) => <ProgressBar {...args} />;
<Canvas>
<Story
name="ProgressBar"
args={{
step: 2,
totalSteps: 12,
}}
>
{Template.bind({})}
</Story>
</Canvas>
<ArgsTable story="ProgressBar" />
The component is displayed properly but, incrementing the step prop in the argsTable, the progress bar is not animating because it gets rerendered completely (tested adding the useEffect hook with [] as dependency).
I think is related to how storybook handle the documentation, because i don't have this problem in the canvas tab or in an app where i use the same ProgressBar component
Im trying to change the background image of my application depending on API response, but the first thing i need to figure out is how can i have an image background covering the whole application when i have 3 components rendering header, main and footer?
Any help is appreciated.
const Main = () => {
return(
<div className='background'> //set background image
//import components here
</div>
)
}
I am sure you are importing them to a Main/Prent component. Add background image to the div in Parent and import components inside that div.
I am trying to add labels to nested <SpeedDialAction /> components, and have button text displayed next to icons like so:
but it seems like children do not get rendered:
...
<SpeedDialAction
key={action.name}
icon={action.icon}
tooltipTitle={action.name}
onClick={this.handleClick}
>
Foo
</SpeedDialAction>
...
I also tried using the ButtonProps prop as listed in the docs but that did not do the trick either.
I take a look at the SpeedDialAction source code https://github.com/mui-org/material-ui/blob/6f9eecf48baca339a6b15c5fcfb683cba11e4871/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js
The title of Tooltip only shows on hover, but it can be easily done by changing default state to true, eg: state={ tooltipOpen: true } in SpeedDialAction.js file.
However, Tooltip component in SpeedDialAction has no reference, so there is no easy way to setState from outside.
The easiest solution is to create a custom SpeedDialAction component.
SpeedDialAction component contents only Tooltip and Button, which it's hard to modify.
There is the codesandbox https://codesandbox.io/s/9zpyj4o0zo
You can simply add SpeedDialAction.js file to your project.
Update:
Removed onClose event in Tooltip in codesandobox. Fixed the problem where title disappear after click.
Is there a way I can adjust a <Popover> element when fullscreen (Element.requestFullscreen())?
By default its DOM is placed on the body root, and for so, it doesn't show when the element that triggered it to appear is fullscreen.
Because of this, all menus I have on my fullscreen element are never shown until it leaves fullscreen.
You have to customize container prop of the Popover
component. container is the node of DOM which is Popover mounted to. By default it is document.body. That is why Popover is mounted behind the element that is in full-screen mode.
You have to set container node to the element which is going to be in full-screen mode.
props container of the Popover component:
const containerRef = useRef(null);
<div ref={containerRef}>
<button onClick={handleOpen}>open</button>
<Popover container={containerRef.current}>
...
</Popover>
</div>