When clicking the text area, I want to put the label on top right of text box with transparent border, so it will be like this:
But instead, I received something strange:
import TextField from "#mui/material/TextField";
import { createTheme, ThemeProvider } from "#mui/material/styles";
import { makeStyles } from "#material-ui/core/styles";
const theme = createTheme({
direction: "rtl"
});
const useStyles = makeStyles((theme) => ({
root: {
"& label": {
width: "100%",
textAlign: "right",
transformOrigin: "center",
"&.Mui-focused": {
transform: "translate(-5, -5px) scale(0)",
transformOrigin: "center",
},
},
},
}));
export default function CatalogTextBox(params) {
const classesStyles = useStyles();
return (
<ThemeProvider theme={theme}>
<div className="pt-2 col-sm" dir="rtl">
<TextField
className={classesStyles.root}
type={params.type}
id="outlined-basic"
label={params.text}
variant="outlined"
/>
</div>
</ThemeProvider>
);
}
Related
Newbie to React, have mercy on my soul.
I'm attempting to create a card with a Collapse component. Cool. I have the following ugly result:
now, once I expand the Collapse component, my bottom bottoms move a bit upwards,
making my ugly result even uglier:
If I turn on pesticide extension, I get the following result once expanded:
it seems like the item below pushes my like and review buttons upwards, or perhaps I'm wrong.
Now, what is weird for me is that my buttons are absolute. by my understanding, they're supposed to be 'relative' to their parents, and act as a 'free entity', so I don't get why would it be moved anyway?
The code for that component:
import React, { useContext, useState } from "react";
import { styled } from "#mui/material/styles";
import Card from "#mui/material/Card";
import CardHeader from "#mui/material/CardHeader";
import CardMedia from "#mui/material/CardMedia";
import CardContent from "#mui/material/CardContent";
import CardActions from "#mui/material/CardActions";
import Collapse from "#mui/material/Collapse";
import Avatar from "#mui/material/Avatar";
import IconButton from "#mui/material/IconButton";
import Typography from "#mui/material/Typography";
import { red } from "#mui/material/colors";
import FavoriteIcon from "#mui/icons-material/Favorite";
import ShareIcon from "#mui/icons-material/Share";
import ExpandMoreIcon from "#mui/icons-material/ExpandMore";
import ExpandLessIcon from "#mui/icons-material/ExpandLess";
import MoreVertIcon from "#mui/icons-material/MoreVert";
import ThumbUpIcon from '#mui/icons-material/ThumbUp';
import ThumbDownIcon from '#mui/icons-material/ThumbDown';
import AuthContext from "../Contexts/isLoggedIn-context";
import usersAndProductsContext from "../Contexts/usersAndProducts-context";
import RateReviewIcon from '#mui/icons-material/RateReview';
import Farmers from "../Pages/Farmers";
import { useNavigate } from "react-router-dom";
import { Paper } from "#mui/material";
import ReviewText from "./ReviewText";
import { Box } from "#mui/system";
import { ExpandLess } from "#mui/icons-material";
// import logo_img from "../../Images/logo.png";
const ExpandMore = styled((props) => {
const { expand, ...other } = props;
return <IconButton {...other} />;
})(({ theme, expand }) => ({
transform: !expand ? "rotate(0deg)" : "rotate(180deg)",
marginLeft: "auto",
transition: theme.transitions.create("transform", {
duration: theme.transitions.duration.shortest,
}),
}));
function FarmerComponent(props) {
let navigate = useNavigate();
let authCtx = useContext(AuthContext)
let usersAndItemsCtx = useContext(usersAndProductsContext)
let [isWritingReviewFlag, edit_isWritingReviewFlag] = useState(false);
let current_logged_user = usersAndItemsCtx.usersVal.find(user => user.id === authCtx.currentLoggedUserId);
console.log(current_logged_user.likedProfilesId)
let flag = (current_logged_user.likedProfilesId.find((id) =>id === props.id) ? true : false)
console.log(flag)
let [isCurrentFarmerLikedFlag, isCurrentFarmerLikedFlagToggle] = useState(flag)
const [expanded, setExpanded] = React.useState(false);
// let [favouriteClicked, set_favouriteClicked] = useState(false);
const handleFavouriteClicked = () => {
let prevLikedStatus = isCurrentFarmerLikedFlag
if(isCurrentFarmerLikedFlag){
current_logged_user.likedProfilesId = current_logged_user.likedProfilesId.filter(userid => props.id !== userid)
isCurrentFarmerLikedFlagToggle(!prevLikedStatus)
}
else {
current_logged_user.likedProfilesId.push(props.id);
isCurrentFarmerLikedFlagToggle(!prevLikedStatus)
}
}
const handleExpandClick = () => {
setExpanded(!expanded);
};
const handleCardClick = () => { //choosing a farmer to view his shop/products.
navigate('/farmershop/'+props.id)
}
const handleNewReview = () => {
edit_isWritingReviewFlag(true)
}
return (
<Paper sx={{width: "300px", border: "none"}}>
{/* props===the farmer card we're on */}
{isWritingReviewFlag ? <ReviewText
edit_isWritingReviewFlag={edit_isWritingReviewFlag}
reviewingFarmer={current_logged_user}
reviewedFarmer={props}
/> : <></>}
<Card
sx={{
height: "600px",
width: "350px",
padding: "5px",
backgroundColor: "#D37C65",
marginTop: "20px",
marginLeft: "20px",
marginRight: "20px",
boxShadow: "5px 16px 5px 0px rgba(0,0,0,0.75)",
borderRadius: "7px",
border: "none",
padding: "50px"
}}>
<div onClick={handleCardClick} style={{marginTop: "10%", letterSpacing: "2px", fontFamily: "sans-serif", cursor: "pointer"}}><h1>{props.firstname + " " + props.lastname}</h1></div>
<CardMedia
component="img"
height="194"
image={props.img}
sx={{borderRadius: "5px"}}
title={props.firstname + " " + props.lastname}
onClick={handleCardClick}
style={{cursor: "pointer", backgroundColor: "#5CBEFD"}}
/>
<Box sx={{borderRadius: "5px", opacity: "80%", position: "relative"}}>
<Typography variant="body2" color="text.secondary" sx={{backgroundColor: "#5CBEFD"}}> <span>Location: {props.location}</span></Typography>
{expanded ? <></> : <Typography variant="body2" color="text.secondary" sx={{backgroundColor: "#5CBEFD"}}><span>more info...</span></Typography>}
<IconButton onClick={handleExpandClick}>
{expanded ? <ExpandLessIcon/> : <ExpandMoreIcon/> }
</IconButton>
<Box sx={{marginTop: "80%"}}>
<Collapse sx={{position: "absolute", marginTop: "-70%" }} in={expanded}>{props.about}</Collapse>
</Box>
</Box>
<Box sx={{position: "absolute", marginTop: "-5%"}}>
<CardActions>
<IconButton onClick={handleFavouriteClicked} aria-label="add to favorites">
{!isCurrentFarmerLikedFlag ? <ThumbUpIcon style={{color: "rgba(0, 194, 0, 1)"}}/> : <ThumbDownIcon style={{color: "rgba(255, 30, 127, 1"}}/> }
</IconButton>
<IconButton onClick={handleNewReview} sx={{display: "flex", alignItems: "center", flexWrap: 'wrap'}} aria-label="add review">
<RateReviewIcon/>
<span style={{letterSpacing: "1px", marginLeft: "3px", marginBottom: "5px", fontSize: "15px"}}>add new review</span>
</IconButton>
</CardActions>
</Box>
</Card>
</Paper>
);
}
export default FarmerComponent;
Many thanks!
I need to change the border color of stars in material ui Rating cause my background color is black and I can't see nothing when the star is empty !
code:
import Rating from '#material-ui/lab/Rating';
import { makeStyles } from '#material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
flexDirection: 'column',
'& > * + *': {
marginTop: theme.spacing(1),
},
},
}));
in the functional component :
<div className={classes.root}>
<Rating name="half-rating-read" defaultValue={finalAverage} precision={0.5} readOnly />
</div>
you need to import an icon with border for empty one like StarBorderIcon and add it like this:
import Rating from "#material-ui/lab/Rating";
import StarBorderIcon from "#material-ui/icons/StarBorder";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
flexDirection: "column",
"& > * + *": {
marginTop: theme.spacing(1)
}
},
emptyStar: {
color: "white"
}
}));
const Star = () => {
const classes = useStyles();
return (
<div className={classes.root}>
<Rating
name="half-rating-read"
defaultValue={3.5}
precision={0.5}
readOnly
emptyIcon={
<StarBorderIcon fontSize="inherit" className={classes.emptyStar} />
}
/>
</div>
);
};
export default Star;
I have successfully increased the Label in the TextField of my React app.
My problem is that when its on shrink, it just overlaps some line on its right.
Click Here
import React from "react";
import TextField from "#material-ui/core/TextField";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
root: {
"& .MuiInputLabel-shrink": {
fontSize: "24px"
}
}
}));
export default function CustomTextField({ InputLabelProps = {}, ...props }) {
const classes = useStyles();
return <TextField {...props} className={classes.root} />;
}
I would encourage you to always use the DevTools when it comes to applying customizations. The size of the gap it determined by the <legend> element:
The element's font size has a font-size: 0.75em to account for the CSS transformation.
So you can simply apply the same font size to its parent:
import React from "react";
import TextField from "#material-ui/core/TextField";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
root: {
"& .MuiInputLabel-shrink, & fieldset": {
fontSize: "24px"
}
}
}));
export default function CustomTextField({ InputLabelProps = {}, ...props }) {
const classes = useStyles();
return <TextField {...props} className={classes.root} />;
}
https://codesandbox.io/s/material-ui-custom-textfield-composition-forked-g5co7?file=/src/CustomTextField.js
You should use the Shrink as prop for TextField
Remove fontSize: "24px" let it resize by Material-UI
Make sure your TextField as:
<TextField InputLabelProps={{shrink: true}} .../>
if you want to customize the size of the label:
fontSize: 30,
color: "red",
"&$labelFocused": {
color: "purple"
}
},
labelFocused: {}
};
function App({ classes }) {
return (
<div className="App">
<TextField
id="standard-with-placeholder"
label="Your Label"
InputLabelProps={{
classes: {
root: classes.labelRoot,
focused: classes.labelFocused
}
I can not change the color and CSS from the TAB PANEL using material-ui Some ideas? :(
Looks like useStyle and theme are not working. I could change some other properties like scrollable but not the colors. I wonder if there is some conflict con other CSS, but I don't think so because the colors I see from the TABs are blue, I'm not using blue in my Web-App.
import PropTypes from 'prop-types';
import { makeStyles } from '#material-ui/core/styles';
import AppBar from '#material-ui/core/AppBar';
import Tabs from '#material-ui/core/Tabs';
import Tab from '#material-ui/core/Tab';
import Typography from '#material-ui/core/Typography';
import Box from '#material-ui/core/Box';
function TabPanel(props) {
const { children, value, index, ...other } = props;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`scrollable-auto-tabpanel-${index}`}
aria-labelledby={`scrollable-auto-tabpanel-${index}`}
{...other}
>
{value === index && (
<Box p={3}>
<Typography>{children}</Typography>
</Box>
)}
</div>
);
}
TabPanel.propTypes = {
children: PropTypes.node,
index: PropTypes.any.isRequired,
value: PropTypes.any.isRequired,
};
function a11yProps(index) {
return {
id: `scrollable-auto-tabpanel-${index}`,
'aria-controls': `scrollable-auto-tabpanel-${index}`,
};
}
function LinkTab(props) {
return (
<Tab
component="a"
onClick={(event) => {
event.preventDefault();
}}
{...props}
/>
);
}
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
margin: 0,
background: 'white',
},
}));
export default function NavTabs() {
const classes = useStyles();
const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<AppBar position="static">
<Tabs
variant="container-fluid"
value={value}
onChange={handleChange}
variant="scrollable"
scrollButtons="auto"
aria-label="scrollable auto tabs example"
centered
>
It's actually the AppBar that has that blue color. Upon reviewing the stylesheet, the individual tab items actually have transparent as a default value for background-color. So to solve this, just override the background of the root element of AppBar
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
margin: 0,
background: "white"
}
}));
export default function NavTabs() {
const classes = useStyles();
<AppBar position="static" classes={{ root: classes.root }}>
...
I have Dialog component where I have a button(bottom right corner) which shows another div with an item list. The problem I'm facing is that the list is being rendered inside the Dialog component and it's being cropped. I set the position: absolute, z-index and set the position: relative to the parent but it does not work. Here is how it looks like. Any helpful tips I would appreciate it.
1) Before I click the button to show the list
2) After I click the button. Highlighted css properties for the list element
And the code for Dialog component :
import React, { useState } from "react";
import { makeStyles } from "#material-ui/core";
import Button from "#material-ui/core/Button";
import Dialog from "#material-ui/core/Dialog";
import DialogContent from "#material-ui/core/DialogContent";
import DialogContentText from "#material-ui/core/DialogContentText";
import DialogTitle from "#material-ui/core/DialogTitle";
import IconButton from "#material-ui/core/IconButton";
import CloseIcon from "#material-ui/icons/Close";
import Typography from "#material-ui/core/Typography";
import OutlinedInput from "#material-ui/core/OutlinedInput";
import { ProjectTreeWindow } from "../index";
const useStyles = makeStyles(theme => ({
addTaskButton: {
marginTop: 10
},
dialog: {
width: "40%",
maxHeight: 435
},
closeButton: {
position: "absolute",
right: theme.spacing(1),
top: theme.spacing(1),
color: theme.palette.grey[500]
},
controlsWrapper: {
display: "flex",
alignItems: "center",
justifyContent: "space-between"
}
}));
const AddQuickTaskDialog = props => {
const classes = useStyles(props);
const { open, close } = props;
const [quickTaskDescription, setQuickTaskDescription] = useState("");
const [textInputRef, setTextInputRef] = useState(null);
const handleChangeQuickTaskDescription = event => {
setQuickTaskDescription(event.target.value);
};
const handleAddQuickTaskSubmit = () => {
alert("Quick task submitted");
close(textInputRef);
};
return (
<Dialog
data-testid="add-task-quick"
classes={{
paper: classes.dialog
}}
maxWidth="lg"
open={open}
keepMounted
onClose={() => {
close(textInputRef);
}}
aria-labelledby="quick-task-dialog"
aria-describedby="quick-task-dialog-description"
>
<DialogTitle id="quick-task-dialog-title">
<Typography variant="h6">Quick Add Task</Typography>
{close ? (
<IconButton
aria-label="close"
className={classes.closeButton}
onClick={() => {
close(textInputRef);
}}
>
<CloseIcon />
</IconButton>
) : null}
</DialogTitle>
<DialogContent>
<div className={classes.wrapper}>
<OutlinedInput
onChange={handleChangeQuickTaskDescription}
inputRef={input => {
setTextInputRef(input);
return input && input.focus();
}}
fullWidth
// className={showAddTaskInput ? classes.show : classes.hide}
placeholder="e.g. Take the dog out for a walk"
inputProps={{ "aria-label": "add task" }}
/>
<div className={classes.controlsWrapper}>
<Button
className={classes.addTaskButton}
disabled={quickTaskDescription.length === 0}
data-testId="quick-add-task-submit"
// onClick={handleAddTaskSubmit}
color="primary"
onClick={handleAddQuickTaskSubmit}
>
Add Task
</Button>
<ProjectTreeWindow />
</div>
</div>
</DialogContent>
</Dialog>
);
};
export default AddQuickTaskDialog;
and for the List component:
import React, { useState } from "react";
import { makeStyles } from "#material-ui/core";
import ListAltTwoToneIcon from "#material-ui/icons/ListAltTwoTone";
import IconButton from "#material-ui/core/IconButton";
import { CustomizedToolTip } from "../index";
import OutlinedInput from "#material-ui/core/OutlinedInput";
import DoneTwoToneIcon from "#material-ui/icons/DoneTwoTone";
import List from "#material-ui/core/List";
import ListItem from "#material-ui/core/ListItem";
import ListItemIcon from "#material-ui/core/ListItemIcon";
import ListItemText from "#material-ui/core/ListItemText";
import FiberManualRecordTwoToneIcon from "#material-ui/icons/FiberManualRecordTwoTone";
import { useProjectsValue, useSelectedProjectValue } from "../../context";
const useStyles = makeStyles(theme => ({
root: {
position: "absolute",
zIndex: 9999,
top: 200,
left: 0,
display: "flex",
flexDirection: "column",
"&:hover $child": {
visibility: "visible"
}
},
wrapper: {
position: "relative !important"
},
selected: {
"& $child": {
visibility: "visible !important"
}
},
hidden: {
visibility: "hidden"
},
listItemIcon: {
minWidth: 30
}
}));
const ProjectTreeWindowList = props => {
const [textInputRef, setTextInputRef] = useState(null);
const [typeProject, setTypedProject] = useState("");
const classes = useStyles(props);
const { projects } = useProjectsValue();
return (
<div className={classes.root}>
<OutlinedInput
// onChange={handleChangeQuickTaskDescription}
inputRef={input => {
setTextInputRef(input);
return input && input.focus();
}}
placeholder="Type a project"
inputProps={{ "aria-label": "select project" }}
/>
<List>
{projects &&
projects.map((project, index) => (
<ListItem
onClick={() => {
alert("move selected project to input");
}}
// selected={active === project.projectId}
button
// classes={{
// root: classes.root,
// selected: classes.selected
// }}
>
<ListItemIcon
className={classes.listItemIcon}
style={{ color: project.color }}
>
<FiberManualRecordTwoToneIcon />
</ListItemIcon>
<ListItemText primary={project.name} />
<ListItemIcon
className={`${classes.listItemIcon} ${classes.hidden}`}
>
<DoneTwoToneIcon />
</ListItemIcon>
</ListItem>
))}
</List>
</div>
);
};
const ProjectTreeWindow = props => {
const classes = useStyles(props);
const [showProjectTreeWindow, setShowProjectTreeWindow] = useState(false);
const handleShowProjectWindow = () => {
setShowProjectTreeWindow(!showProjectTreeWindow);
};
const handleCloseProjectWindow = () => {
setShowProjectTreeWindow(false);
};
return (
<div className={classes.wrapper}>
<CustomizedToolTip title="Select a project">
<IconButton onClick={handleShowProjectWindow} aria-label="add-project">
<ListAltTwoToneIcon />
</IconButton>
</CustomizedToolTip>
{showProjectTreeWindow ? <ProjectTreeWindowList /> : null}
</div>
);
};
export default ProjectTreeWindow;
It is because of the combinaison of position: relative and overflow-y: auto from the <Paper> component. If you override one of this property, it won't be hidden anymore.
To do this, there is a PaperProps property in <Dialog>.
Example:
<Dialog {...otherProps} PaperProps={{style: {position: 'static'} }}/>