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.
Related
My site has a sidebar (FiltersSideBar in my code) that contains filters. When the browser is expanded to full screen, the sidebar is in open mode on the left. If the screen width becomes less than 600, the sidebar is hidden and a button (ArrowBackIosNewIcon in my code) appears that can open the sidebar (as if overlaying the home page).
The problem with my code is that when the sidebar changes position (opens/closes), its state is not saved - all sidebar elements return to their original state. Although the applied filters continue to work.
That is, if the user selected any filters in the full-screen mode (for example, checked some categories), they were applied. But after that the browser window shrinks, the filters themselves remain applied, but the sidebar is displayed in the default mode (i.e. the checkboxes are empty again).
I would like to make it so that regardless of the size of the page the sidebar retains its appearance.
FiltersSideBar.jsx
export default function FiltersSideBar(props) {
return (
<CardContent className={props.className}>
<Table>
<TableBody>
<TableRow>
<TableCell>
<Filter1 />
</TableCell>
</TableRow>
<TableRow>
<TableCell>
<Filter2 />
</TableCell>
</TableRow>
</TableBody>
</Table>
</CardContent>
);
}
I don't see how you pass the filters to the sidebar.
But this issue happens because you completely destroy the sidebar to hide which resets its state to default, it would be better to just manipulate the style with display and transition without destroying the sidebar.
like here.
https://codesandbox.io/s/zealous-hodgkin-lf7qwt
Another solution is to make the filters state in the parent component of the sidebar and pass props to it.
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>
I try to hide my bottom menu on another screen but it's not working code of tab screen
and here I want to hide the menu tab where want to hide bottom menu
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.
I am using sap.tnt.SideNavigation in order to create side panel.For that i am creating a page and the page has sap.tnt.SideNavigation which consist of navigation items to display in side navigation.So the xml view is like this,
<Page>
<content>
<m:ToggleButton icon="sap-icon://menu2" press="onCollapseExapandPress"/>
<SideNavigation id="sideNavigation" visible="false">
<item>
<NavigationList itemSelect="onItemSelect" items="{path:'/widgetsToLoad/widgets'}">
<NavigationListItem icon="{icon}" visible="{inPanel}"
tooltip="{name}"></NavigationListItem>
</NavigationList>
</item>
</SideNavigation>
</content>
</Page>
After doing this eventhough the content height is nore than screen height it will not show scroll icons instead scroll bar will come.How to fix this?
According to the documentation sap.tnt.SideNavigation should be used only with sap.tnt.ToolPage as parent layout control. Thus it might not work perfectly within a Page control.
In general the scroll items are shown if the SideNavigation is not expanded, otherwise the scroll bar is shown. You can check this by playing around with the ToolPage example.