I've created a Modal in Onsen which works great, but sometimes my content spans beyond the page boundaries. The Modal does not naturally support scrolling and the <Scrollable /> element is not supported by the React support in Onsen so I've attempted to make a <section/> scrollable like so:
<Modal isOpen={this.state.selected.title !== undefined} onDeviceBackButton={()=> this.setState({selected: {}})}>
<section style={{margin: '16px', overflow: 'auto', height: '100%'}}>
<h2>{this.state.selected.title}</h2>
{myReallyLongContent}
</section>
</Modal>;
This appears to work when testing on my desktop browser (in "Chrome Mobile testing"); however, when testing on my actual mobile device, the scrolling does not work (via touch swiping). Is there a workaround?
Related
I normal flat list in react native and I have react native web that renders the mobile component in web
I am hiding the scrollbar with the prop showsHorizontalScrollIndicator={false},
The scrolling works fine and as expected in mobile, but in the web the scrolling is completely halted as it does not allow dragging to scroll like mobile.
<FlatList
horizontal={true}
showsHorizontalScrollIndicator={false}
renderItem={({ item }) => (
<Button
.... />
)}
keyExtractor={(....}
data={data} />
Is there any way to enable scroll behavior on the web like on mobile?
If not just have a scrollbar that only pops up when the section
Instead of showsHorizontalScrollIndicator={false}
Use overflow: hidden to the root view.
In react-native-webview library there is a prop named as scrollEnabled set it to true.
I want to show another Box component above Modal component. Both are material ui component.
There is Parent Box component and there is another Box component inside Parent Box component.
Thing I want to do is show the second/child Box component on the top.
Right now it seems like the second/child Box component is under the image.
You can click a open modal button and inspect modal.
You will see there will be <img />, <div></div> and <svg />
<div></div> should be Box component but I can't see it over the top.
return (
<div>
<Button onClick={handleOpen}>Open modal</Button>
<Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box // parent Box component
sx={{
...style,
width: width,
height: height
}}
className={classes.imageExpand}
>
<img
src="https://cdn.pixabay.com/photo/2022/06/13/15/36/grain-7260250__340.jpg"
alt="sample"
className={classes.imageExpand}
/>
<Box className={classes.conainer} /> // child Box component
<CloseIcon className={classes.closeIcon} />
</Box>
</Modal>
</div>
);
Attempts
1, set z-index:1000 and position:'relative'
2, set lower z-index to the parent component
3, z-index:'1000 !important'
4, set transform and opacity
None of them worked. Is there any other way to show <Box /> top?
I even tried to switch Box component to regular div tag and this also doesn't work.
Several MUI components utilize z-index, employing a default z-index scale in MUI that has been designed to properly layer drawers, modals, snackbars, tooltips, and more.
The z-index values start at an arbitrary number, high and specific enough to ideally avoid conflicts:
mobile stepper: 1000
fab: 1050
speed dial: 1050
app bar: 1100
drawer: 1200
modal: 1300
snackbar: 1400
tooltip: 1500
so you should use a z-index greater than 1300.
you can get more info at https://mui.com/material-ui/customization/z-index/
I created a responsive navigation bar using the React material UI Appbar component.
If the screen size is large, it shows tabs in the navigation bar. If the screen size is medium or smaller, it uses material UI responsive drawer to show the navigation bar (home, about, etc) on the left side right below the navigation bar. How can I move the responsive material UI drawer to the right?
https://material-ui.com/components/drawers/#responsive-drawer
You can use the available anchor prop (read more here).
anchor='right'
<Drawer
container={container}
variant="temporary"
anchor='right'
open={mobileOpen}
onClose={handleDrawerToggle}
classes={{
paper: classes.drawerPaper,
}}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
>
{drawer}
</Drawer>
You can view the codesandbox here
I am developing a web application using React and Semantic UI React as a front-end framework. The application is tested and works in Chrome, Microsoft Edge, Safari and Mozilla Firefox. However in this last browser I noticed a problem with iframes. The image below shows a modal window with iframe with a pdf. The window opens correctly but as soon as I try to click inside it or scroll the pdf downwards, the modal window is displayed incorrectly.
I tried to identify any problems in the rendered HTML code using the Firefox developer tools (F12) but I didn't notice anything.
I am using Firefox v77.0.1 64bit (latest version) and the modal window is implemented as follows:
<Modal closeIcon open={this.state.open} onClose={this.onClose}>
<Modal.Content>
<Steps ... />
<div style={{ width: "100%", height: "500px" }}>
<Iframe url={...} width={"100%"} height={"460px"} />
<Checkbox ... />
</div>
</Modal.Content>
<Modal.Actions>
<Button color='red' onClick={this.props.onRefuse}>
<Icon name='remove' />
Refuse
</Button>
<Button color='green' onClick={this.props.onAccept}>
<Icon name='check' />
Accept
</Button>
</Modal.Actions>
</Modal>
I have to fix buttons on the bottom of my Material-UI dialog. I mean buttons should be in the bottom of dialog all the time regardless dialog size, list size, etc.
so far I have tried position: "fixed", bottom: 0, they are not helpful.
Any suggestions?
I am using MaterialUI Grid (its not a table in the screen).
Mixing Material UI Dialog Components with HTML elements can short circuit proper flow of Material UI component.
What I had... footer buttons failed to fix to the bottom... notice the body message is in a HTML div and the footer is in a material UI DialogActions
<Dialog>
<div>body message</div>
<DialogActions>
<Button>Cancel</Button> <Button>Save</Button>
</DialogActions>
</Dialog>
I fixed it by inserting the body-message div into the Material UI DialogContent component... this made the DialogActions do what it was supposed to do (stay fixed at the bottom).
<Dialog>
<DialogContent>
<div>body message</div>
</DialogContent>
<DialogActions>
<Button>Cancel</Button> <Button>Save</Button>
</DialogActions>
</Dialog>
From the screenshot, it looks like you're displaying a Table in a Dialog.
From this conclusion it is suggested -
To embed your 'Table' component inside 'DialogContent'
The button should be right aligned on the Dialog, meaning your buttons
should be placed inside 'DialogActions'
I created a sandbox with some mock data (due to insufficient details in the question) - Have a look - https://codesandbox.io/embed/material-dialog-actions-qcrnx
OK, It was fixed by using MaterialGrid and adding some styles (display: "flex", height: "80px", justifyContent: "space-between")