I'm creating a ScrollToTop component by using MUI useScrollTrigger hook https://mui.com/material-ui/react-app-bar/#usescrolltrigger-options-trigger
Here is the sample code: https://codesandbox.io/s/stackoverlow-mui-usescrolltrigger-er9z4y
Problems
The ScrollTop component doesn't appear after scrolling some pixels even after scrolling to the bottom of the page.
Here is the screenshot.
The ScrollToTop component should appear around the area I marked.
As we could see that the trigger value from the useScrollTrigger hook returns a false value. It should return a true value if we scrolled the page.
If we uncomment the ScrollToTop component, the ScrollToTop component would appear. Then if we click the ScrollToTop component, the screen would not go to the top of the page.
Here is the screenshot.
Step To Reproduce
For problem 1:
Open the demo (codesandbox link) above.
Scroll to the bottom of the page.
For problem 2:
Open the demo (codesandbox link) above.
Comment only the ScrollToTop component.
Scroll to the bottom of the page.
Click the ScrollToTop component.
Expected conditions
For problem 1: the ScrollTop component appears after scrolling some pixels.
For problem 2: the ScrollTop component should bring the screen to the top of the page after being clicked.
Problem here is useScrollTrigger use the by default window as target. But in your example your main content box is having the scroll. So you need to pass the reference of this main content box as target to the useScrollTrigger.
Refer - https://stackoverflow.com/a/56743659/1133582
Something as below -
const [scrollTarget, setScrollTarget] = React.useState<Node | undefined>(undefined);
<Box ref={(node: Node) => {
if (node) {
setScrollTarget(node);
}
}} className={classes.pageOverflow}>
<Toolbar id="back-to-top-anchor" className={classes.toolbar} />
<Box className={classes.longBox}>Top Of the page</Box>
<ScrollToTop scrollTarget={scrollTarget}>
<Fab size="small" color="secondary" className={classes.scrollToTop}>
<IconKeyboardDoubleArrowUpRounded />
</Fab>
</ScrollToTop>
</Box>
Related
I'm using Ant Design (version 4.22.8) and Next.js (version 12.3.4) and I have a Modal component that's shown when a button is clicked. However, the modal is currently scrolling to the top of the page rather than overlaying the content that's currently on the screen.
Here's an example of the code I'm using:
<Modal visible={isModalVisible} title={title} onOk={handleOk} onCancel={handleCancel}>
<div>Content</div>
</Modal>
What are some ways to prevent an Antd Modal from scrolling to the top of the page when it's made visible?
To prevent Antd Modal from scrolling to the top of the page, it's necessary to specify a container where the Modal will be rendered, instead of using the default behavior which uses the body element.
In the case of Next.js, the container for the Modal should be #__next. You can specify this using the getContainer prop, like this:
<Modal getContainer='#__next' visible={isModalVisible} title={title} onOk={handleOk} onCancel={handleCancel}>
<div>Content</div>
</Modal>
By doing this, the Modal should be shown on top of the current content without scrolling to the top of the page.
I am trying to integrate react-window's FixedSizeList and FixedSizeGrid components to increase the initial rendering speed of my page. Is there some way for me to let the user scroll down the react-window component using the viewport's scrolling area? I was also
wondering if there is some way to remove the scrollbar from the react-window component and only use the viewport's scrolling as I described above.
I tried integrating the documentation version of FixedSizeList into my page and as you can see, since the total height of all my rows is greater than the height I specified in the component so the vertical scrollbar beside the component appears, which I want to remove. I also cannot figure out how to let scrolling downwards on the viewport make the react-window component scroll down the rest of its rows.
From looking online, I think I might need to modify the CSS style of the FixedSizeList to have overflow:hidden to remove the scrollbar but how can I ensure that I keep the scrolling functionality and that the user can scroll down the component from anywhere in the viewport?
Current version with no react-window
FixedSizeList version
const Row = ({ index, style }) => (
<div style={style}>Row {index}</div>
);
<FixedSizeList
height={500}
itemCount={38}
itemSize={35}
width={"100%"}
>
{Row}
</FixedSizeList>
One solution is to use a package linked from the react-window github page called react-virtualized-auto-sizer. It is also made by bvaughn and is a good solution to the problem.
This solves the issue by allowing you to set the height of your FixedSizedList to the height of its content, so it does not get a scrollbar. Here's how that would look:
<AutoSizer>
{({ height, width }) => (
<FixedSizeList
className="List"
height={height}
itemCount={1000}
itemSize={35}
width={width}
>
{Row}
</FixedSizeList>
)}
</AutoSizer>
Here's a full example on codesandbox:
I am displaying some material-ui Cards horizontally in a div from data loaded from the backend and rendered server side using NextJS, however when the action property is present in the CardHeader, the view is distorted.
The distortion is a little bit hard to explain so I have reproduced it minimally in CodeSandbox. After removing the action property, the items are rendered correctly, however you will need to reload the mini-browser to see the effect.
<CardActionArea>
<Card>
<CardHeader
avatar={<Avatar alt={value}>{value}</Avatar>}
/** If action is removed, the issue goes away */
action={
<IconButton>
<ThumbUpOutlinedIcon />
</IconButton>
}
title={value}
subheader={value}
/>
<CardContent>
<Typography variant="h6">{value}</Typography>
</CardContent>
</Card>
</CardActionArea>
As you can see above the main div containing the items is at the top with the items horizontally arranged, however there are additional items which are arranged vertically below the div.
My guess is that the top items correctly rendered were rendered in the client side and the bottom items vertically rendered (which also shouldn't be there) were obtained from the server because on inspection of the source, the bottom incorrectly rendered items were not within the __next element.
Why is the presence of the action property in the CardHeader causing this? Or is it possible that my setup with Next and material-ui is incorrect? Thanks.
I'm trying to implement an application using highcharts/highstock and I'm facing a problem trying to use the full screen function.
I need to set a fixed hight to my charts and be able to view each chart from my page as a full screen one, but since the height is fixed it stays the same when full screen loads, I've tried the approach from this post but it's not working, if I set height to 100% the chart overflows the page and gets crooped depending on the aspect ratio of the screen.
I´ve also found this working demo, I can't replicate this one. I'm not sure how he's calling the component, also I don't know how the export module (hamburguer menu) is showing up if it's never called.
render() {
return <div className="chart" ref={ref => this.container = ref} />
}
on my application I'm calling the component this way
render() {
return (
<HighchartsReact
highcharts={Highcharts}
constructorType="stockChart"
options={options}
allowChartUpdate
callback={this.afterChartCreated}
/>
)
}
I tried passing an ID to this element to try to set height via CSS but it doesn't work.
I was trying to replicate my application with a working example, I could only do it on a codesandbox because of import structure, but for some reason full screen is not working there, it prompts this message
Full screen is not supported inside a frame.
This demo creates the chart without using Highcharts React wrapper - it's a combination of pure Highcharts JS and React - that's why export menu shows without called it. The Highcharts React wrappers work similarly, but more in 'React way' and gives other opportunities to manage the component.
Back to your issue - I think that a better approach will be defining the height of the Highcharts component as inline React styling. You can achieve by setting it in containerProps object.
<CardContent style={{ padding: 0 }}>
<HighchartsReact
highcharts={Highcharts}
containerProps={{ style: { height: "400px" } }}
options={options}
allowChartUpdate
/>
</CardContent>
Demo: https://codesandbox.io/s/fix-full-screen-253sq?file=/src/CustomGUIChart.js
To test it use the open in new window codesandbox option (button just above the exporting menu hamburger).
I am attempting to implement a responsive app with antd.
One of the things I have is a Sider menu as my main navigation. One of the things I would like to do is that on small screens this sider be collapsed (as the hamburguer icon preferrably). I have no idea how to even start this. My component with the sidebar looks something like this:
class App extends React.Component {
render() {
return (
<Layout>
<Sider width={200} collapsedWidth={500}>
<Menu
mode="inline"
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
style={{ height: '100%' }}
>
<Menu.Item key="1">option1</Menu.Item>
<Menu.Item key="2">option2</Menu.Item>
<Menu.Item key="3">option3</Menu.Item>
<Menu.Item key="4">option4</Menu.Item>
</Menu>
</Sider>
</Layout>
);
}
}
I should probably also point out that from the Layout docs, the following is said:
Note: You can get a responsive layout by setting breakpoint, the Sider will collapse to the width of collapsedWidth when window width is below the breakpoint. And a special trigger will appear if the collapsedWidth is set to 0.
However I could not get this to work. Perhaps I misunderstand it.
Unfortunately I am not able to embed my sample app in the editor here, so I here is my working sample app. All I would like to do is collapse my Sider navbar into a hamburguer icon or even an arrow like icon on small screens. Where do I go from here?
You have a collapsible sider official example.
From here you can choose whatever width \ icons you need based on state.
Also, you have a good example of antd components, especially a sidebar with the hamburger icon.