I'm having problems creating a hoverable tooltip. The tooltip should have a button in it that can be used to open a popover. The problem I have is that once I open the popover it closes the tooltip. The popover is also displayed behind the tooltip.
<Tooltip
interactive
title={<Content />}
placement="right-start"
>
Content:
return (
<div>
<Button
aria-owns={open ? 'simple-popper' : undefined}
aria-haspopup="true"
variant="contained"
onClick={this.handleClick}
>
Open Popover
</Button>
<Popover
id="simple-popper"
open={open}
anchorEl={anchorEl}
onClose={this.handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
>
The content of the PopoverThe content of the the Popover.The content of the PopoverThe content of the the Popover.The content of the PopoverThe content of the the Popover.</Typography>
</Popover>
</div>
);
EDIT: created a code sandbox https://codesandbox.io/s/6w26o2ww0z
Related
During opening antd modal I can see for 10ms that my modal is increased and displays not the first page of the carousel inside.
Here I have attached a Json file, which you can play in your Chrome DevTools (F12 -> Performance -> Load profile). Described problem appears on 1150ms. Here is the link to the codesanbox where you can play with my code. I found that the modal increases because my form layout equal to "vertical", but I still didn't get why the last page of my carousel appears first. I am thinking of some hooks in React like useLayoutEffect to render it correctly, however it seems to my as a antd bug, or my mistake somewhere and I don't want to overload my code with useless hooks.
Here is the code for that who won't open codesanbox:
import "./styles.css";
import React, { useState, useRef } from "react";
import { Modal, Carousel, Form, Button, Input, Image } from "antd";
export default function App() {
const [modal, setModal] = useState<boolean>(false);
const [pageOneForm] = Form.useForm();
const [pageTwoForm] = Form.useForm();
return (
<>
<Button onClick={() => setModal(true)}> open </Button>
<Modal
width={500}
centered
closable={false}
title={"Title of my modal"}
open={modal}
onCancel={() => setModal(false)}
okButtonProps={{ style: { display: "none" } }}
>
<Carousel dotPosition="top" swipeToSlide draggable arrows>
<div>
<img alt="card1" src="card1.png" className="card" />
<Form
form={pageOneForm}
layout="vertical" //it makes my modal huge for few ms
>
<Form.Item
label="Some input for 1 page"
name="carteVitale"
rules={[{ required: true, message: "" }]}
>
<Input />
</Form.Item>
</Form>
</div>
<div>
<img alt="card2" src="card2.png" className="card" />
<Form form={pageTwoForm} layout="vertical">
<Form.Item
label="Some input for 2 page"
rules={[{ required: true, message: "" }]}
>
<Input />
</Form.Item>
</Form>
</div>
</Carousel>
</Modal>
</>
);
}
I expect to render this modal without unplanned modal shakes
UPDATE:
Size of modal can be fixed by adding two keys to Carousel component:
<Carousel
adaptiveHeight={false}
lazyLoad="progressive"
...
or by playing with css:
<Carousel
initialSlide={0}
lazyLoad="ondemand"
className="cards-container"
...
<Form.Item
className="no-wrap"
...
and css will looks like:
.cards-container {
animation: fadein 0.5s ease;
position: relative;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.no-wrap label {
white-space: nowrap;
overflow: hidden;
}
hey i wanted to know how can i delete the border of the text area of mui with tailwind if possible and how can i add dir auto to this also
i want is to display the direction According to the language
return (
<div className="flex items-center">
<Textarea
minRows={4}
maxRows={4}
componentsProps={{
textarea: {
maxLength: 300,
dir: "auto",
},
}}
name="body"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.body}
error={formik.touched.body && Boolean(formik.errors.body)}
placeholder="Text (optional)"
required
variant="soft"
disabled={!loggedIn}
className=" flex-1 m-2 p-2 bg-gray-50 !outline-none !border-none rounded-md resize-none "
endDecorator={
<Typography className="text-xs ml-auto text-gray-500">
{300 - formik.values.body.length} character(s)
</Typography>
}
/>
</div>
);
};```
I want a Material UI Popover to open/close on mouse press, with the opening transition starting from the location of the mouse when the mouse was pressed. How do I do this?
You need to set anchorReference to anchorPosition and then use the mouse coordinate for anchor position. So you will need to manage mouse position using state:
const [mouseX, setMouseX] = useState();
const [mouseY, setMouseY] = useState();
then in your click handler set the states:
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
setMouseX(event.clientX);
setMouseY(event.clientY);
}
and finally in your jsx use mouse position in anchorPosition:
return (
<div>
<Button aria-describedby={id} variant="contained" onClick={handleClick}>
Open Popover
</Button>
<Popover
id={id}
anchorReference="anchorPosition"
anchorPosition={{ top: mouseY, left: mouseX }}
open={open}
onClose={handleClose}
anchorOrigin={{
vertical: "top",
horizontal: "left",
}}
>
<Typography sx={{ p: 2 }}>The content of the Popover.</Typography>
</Popover>
</div>
);
I have a page on my application where there is a DataGrid and some textField to update data from the DataGrid.
The DataGrid has checkbox on each row.
The problem is:
If I just enter the page and select any checkbox and then click on any TextField, the TextField's label goes up and quickly down to default position. I need to click again on the TextField to type anything I want. This problem does not happend if I dont click on any checkbox.
My front end
<div className="main">
<Typography>You are at Update Page</Typography>
<p></p>
<div style={{ height: 300, width: '100%', backgroundColor: '' }}>
<DataGrid
rows={rows}
columns={columns}
pageSize={5}
checkboxSelection
onSelectionModelChange={(itemIdselected) => window.localStorage.setItem('id', itemIdselected)}
>
</DataGrid>
</div>
<p></p>
<Typography>First select which user you want to update</Typography>
<p></p>
<form onSubmit={handleSubmit(OnSubmitUpdate)}>
<TextField label='New name' {...register('Name')} color="primary" style={{ width: '10%' }}></TextField>
<p className="errors">{errors.Name?.message}</p>
<TextField label='New email' {...register('Email')} color="primary" style={{ width: '10%' }}></TextField>
<p className="errors">{errors.Email?.message}</p>
<TextField label='New password' type={'password'} {...register('Password')} color="primary" style={{ width: '10%' }}></TextField>
<p className="errors">{errors.Password?.message}</p>
<ButtonComponent text="Update" type='submit'></ButtonComponent>
<p></p>
<Link to="/" style={{ textDecoration: 'none' }}><ButtonComponent text="Return"></ButtonComponent></Link>
</form>
</div>
Hi I want to style three buttons with different colors but When those buttons are disabled the custom style I've added at the beginning overrides the default style disabledTextColor, which adds a default fade and transparency value, so users can see that the button is disabled. How can style the disabled state or which should be the correct way to style the labelStyle and/or disabledTextColor? Here is an example
const style = {
labelStyle: {
color: 'red;
}
}
<FlatButton
label='Mit Linkedin anmelden'
labelPosition='after'
icon={<LinkedinIcon />}
onClick={() => Meteor.loginWithLinkedin()}
disabled={true}
labelStyle={style.labelStyle}
/>
</div>
<div className='mdl-cell mdl-cell--12-col'>
<FlatButton
label='Mit Google anmelden'
labelPosition='after'
icon={<GoogleIcon />}
onClick={() => Meteor.loginWithGoogle()}
disabled={true}
labelStyle={style.labelStyle}
/>
</div>
in this case the button always stays red even though the disabled state in True
You can create a little wrapper component around FlatButton that conditionally fades the labelStyle when the button is disabled.
const CustomFlatButton = (props) => (
<FlatButton
{...props}
labelStyle={{ ...props.labelStyle, opacity: props.disabled ? 0.3 : 1 }}
/>
);
...
<CustomFlatButton label="Disabled Red" style={{ color: 'red' }} disabled />
https://jsfiddle.net/6rads3tt/2/