I want to embed a custom react component inside an SVG but it's not working. Is it even allowed in an SVG? if not, are there workarounds?
Below is my code, trying to insert the Modal component:
<polygon
id="Paris"
<Modal show={show} handleClose={hideModal}>
<p>Modal</p>
<p>Data</p>
</Modal>
<button type="button" onClick={showModal}>
open
</button>
stroke="#010101"
fill="rgb(251, 106, 106)"
stroke-width="2"
stroke-miterlimit="10"
points="1596.182,374.685 .../>
What I am trying to accomplish is to display a popup when we click on a province inside an svg map.
For what your are trying to achieve, I will wrap svg's inside the modal. Something like this:
<Modal>
<svg></svg>
</Modal>
In your modal component, make sure to display svg as children:
return (
<Fragment>
{props.children}
</Fragment>
);
Take a look in the doc for more info: https://reactjs.org/docs/composition-vs-inheritance.html
Following #Robert Longson's comment, I inserted the Modal component inside a foreignObject and it works. Still the Modal window needs to be adjusted manually as far as the x, y coordinates are concerned so that it pops up exactly over the clicked svg element:
<foreignObject x="58%" y="6%" width="200px" height="250px">
<Modal show={show} handleClose={hideModal}>
<p style={{ padding: "10px" }}>Modal</p>
<p>Data</p>
</Modal>
</foreignObject>
Please note that you must set the x,y, height, width attributes for this to work, as documented in this answer React - html tags inside svg
Related
Does anybody know how to add onhover effect to react grid gallery?
I have figured out that onhover event needs to be added to the parent element of Gallery.
However, dont know where to go from there.
I need image to increase in size a bit when u hover over it.
<Box sx={maingrid}>
<Box onMouseOver={handleHover}>
<Gallery
images={images}
margin={1}
maxRows ={{xs:4,lg:2, xl:2}}
rowHeight={300}
onClick={handleClick}
enableImageSelection={false}
/>
{!!currentImage && (
<Lightbox
mainSrc={currentImage.original}
imageTitle={currentImage.caption}
mainSrcoriginal={currentImage.src}
nextSrc={nextImage.original}
nextSrcoriginal={nextImage.src}
prevSrc={prevImage.original}
prevSrcoriginal={prevImage.src}
onCloseRequest={handleClose}
onMovePrevRequest={handleMovePrev}
onMoveNextRequest={handleMoveNext}
/>
)}
so what do i need pass in handleHover finc? thanks!
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'm using the Modal built into React Native (and specifically I'm using the React Native Paper variant). By default this seems to open in the middle of the screen. However if you're doing some text input in the Modal then it would be more useful if it opened either at the top of the screen, or was aware of the keyboard. However I can't find a way to get this to work.
My (simplified) modal code is:
<Portal>
<Modal visible={visibleModalNew} onDismiss={closeModalNew} contentContainerStyle={styles.modalContainer} >
<View>
<Title>New</Title>
<View>
<TextInput
mode="outlined"
label="Data"
style={{alignSelf:'center', width:'95%'}}
defaultValue={newData}
onChangeText={newData=> setNewData(newData)}
onSubmitEditing={() => handleDone()}
/>
<Button onPress={() => doSomething()}>Do something</Button>
</View>
</View>
</Modal>
</Portal>
Ah, figured out a way round. I wrapped the modal in a KeyboardAwareView, removed the visible prop from the modal, and then wrapped it all in a conditional render and put the visible prop there instead. Seems to work as hoped.
Material-UI input elements like TextField are not working / can not get the focus if they are inside a Popper inside a Dialog.
<Dialog open={true}>
...
<Popper open={true} style={{zIndex: 1500}}>
...
<TextField />
...
</Popper>
...
</Dialog>
The zIndex value for the Popper element is necessary to display Popper in front of the Dialog element.
Simple codesandbox example: https://codesandbox.io/s/input-inside-popper-inside-dialog-not-working-9y7rg
You can use the disableEnforceFocus property on Dialog (inherited from Modal) to fix this.
<Dialog open={true} disableEnforceFocus>
<SimplePopper />
</Dialog>
Related answer: CKEditor 4 having problem when used in Material UI dialog
I'm using react-bootstrap's modal to render a modal for my CRUD app when the user clicks on read for an item a modal will pop up with all the info requested. The problem is rendered on first launch of the app and it stays forever. The modal stays on the bottom of the page and my Boolean to show/hide the modal, here's how I call it:
<Modal.Dialog open={this.state.showServiceModal}>
doesn't do anything to help, when I remove the open prop, same result happens: the modal is always visible, and should't models appear on the center of the screen? What gives? The modal appears on the bottom and I want it to appear in the middle and my close modal button doesn't work either, bootstrap's modal is giving me a tough time, how can I fix all of these problems?
Here's my render:
render() {
return (
<div>
<div className="container content">
<div className="row">
<div className="col-6" />
</div>
</div>
<Modal.Dialog open={this.state.showServiceModal}>
<Modal.Header>
<Modal.Title>Service</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>
<span>id:</span> {this.state.currentService.id}
</p>
<p>
<span>description:</span> {this.state.currentService.description}
</p>
</Modal.Body>
<Modal.Footer>
<Button
variant="secondary"
onClick={() => this.setState({ showServiceModal: false })}
>
Close
</Button>
</Modal.Footer>
</Modal.Dialog>
</div>
)
}
You are using open prop on Modal.Dialog to open and close modals. But react-bootstrap's documentation has no such API for Modal.Dialog as it used to display static modal.
Use Modal component as parent and make use of the show prop instead. Also use the centered prop to make it vertically centered.
Here is an example:
<Modal
show={this.state.showServiceModal}
onHide={this.handleClose}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
{...}
</Modal>
Here is a demo in sandbox: