I am new to Material UI. So I tried to change an existing code and encountered this issue. I want to change a view to .
This is the existing code
<TableCell>
<Button >
<InfoRounded style={{ color: "teal" }} onMouseOver={handleClickOpen}/>
</Button>
<SimpleDialog open={open} onClose={handleClose} />
</TableCell>
This coding is similar to the example in Material UI.
Material UI coding sample link
This is what I have tried until now
<TableCell>
<Tooltip title ="I need to get the Dialog view here" InfoRounded>
<Button sx={{m:1}}>
<InfoRounded style={{color:"teal"}}/>
</Button>
</Tooltip>
</TableCell>
I need to get the dialog kind of view in this tool tip. Can anyone help me with this? I tried more than a day and still couldn't figure it out.
While I hover the button the dialog card need to show and when I mover the mouse point it need to close the dialog box automatically. (Currently with the first code the dialog box will open when I hover the button, but to close it I need to click the screen)
Related
I am not able to add transition duration on hover of a button.
<Button
bgGradient='linear(to-r, #003e9b, #5949b4, #ad53cc 80%)' color='white'
_hover={{bg:'linear-gradient(to left,#003e9b ,#5949b4 ,#ad53cc 80%)',
transitionDuration:'1s',}}
>
CONNECT WALLET TO BUY
</Button>
I did not find any answer on internet.
I'm using Dialog screen for insert data. so I wrote codes to show dialog screen. but when the dialog show, I can't click previous screen. I want to copy from prev screen and paste to dialog screen. please let me know the way. here is my code.
<Button variant="contained" color="primary" onClick={this.handleClickOpen}>
add customer
</Button>
<Dialog open={this.state.open} onClose={this.handleClickClose}>
<DialogTitle>add customer</DialogTitle>
</Dialog>
i have this code, what i want to do on the tab prop is add Tooltip on the icon:
<Tabs.TabPane tab={<Tooltip placement="left" title="adasd"><Icon size="1.2" name="cog" /></Tooltip>} key="map">
<MapProperties onChange={onChange} canvasRef={canvasRef} />
</Tabs.TabPane>
i was expecting for the hover to show but it's not working. is it possible to add ant design tooltip on tabs pane?
Anuj's answer isn't correct since TabPane should be direct children of Tabs component. I also had such problem and I find out that i can solve it like this:
<TabPane
key="3"
tab={(
<Tooltip title="Your hint that appears after user's mouse will be over the tab title">
<span>tab title</span>
</Tooltip>
)}
disabled={mode === PageMode.NEW}
>
tab attribute accepts any ReactNode so we can just wrap our tab name with any component. And tooltip isn't exception.
Proof that this works
It should be like
<Tooltip title="foo">
<Tabs.TabPane>....</Tabs.TabPane>
</Tooltip>
https://ant.design/components/tooltip/#header
I am using Material ui Button. this button should hold an image & button-name as its child. i don't want to use as one of the children of my Button, but i want to do it by passing startIcon prop to Button. button should look like:-
i have tried this:-
<Button className={classes.navButtons} startIcon={ZapierIcon}>
Zapier
</Button>
but it is showing path of my image in button instead of actual image....can anyone give some suggestion what i am doing wrong.
Just pass the Avatar in place of icon.
<Button
variant="contained"
color="secondary"
startIcon={<Avatar src={'http://www.wpsimplesponsorships.com/wp-content/uploads/2019/05/cropped-icon-256x256.png'} />}
>
Delete
</Button>
https://codesandbox.io/s/bold-dew-3rl6z
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")