I m using react-phone-input-2 in my next project.after change to rtl language the phone-input not change right way.To change direction i m passing a value(get from localstoge) as props in mui useStyles.but initially render i m not getting update value from localstorge
const useStyles = makeStyles((theme) => ({
borderClass: ({theme, focus, lanDirection}) => ({
"&.react-tel-input .special-label": {
color: focus ? theme.palette.primary.main : theme.palette.neutral[1000],
left: "10px",
background: theme.palette.neutral[100],
},
"&.react-tel-input .form-control": {
background: theme.palette.neutral[100],
color: theme.palette.neutral[1000],
padding: "1px 70px 0px 1px",
borderRadius: "8px",
},
"&.react-tel-input .form-control:focus": {
borderColor: theme.palette.primary.main,
borderWidth: "2px",
zIndex: 999,
boxShadow: "none",
},
"&.react-tel-input .country-list .country-name": {
color: "#000000",
},
"&.react-tel-input .flag-dropdown": {
borderRadius: "8px 0px 0px 8px",
},
"&.react-tel-input .selected-flag": {
marginRight: lanDirection === "rtl" ? "30px" : "0px",
padding: " 0 0px 0 11px",
},
"&.react-tel-input .selected-flag .arrow": {
left: "29px",
},
}),
}));
const classes = useStyles({theme, focus, lanDirection});
<PhoneInput
autoFormat={false}
onFocus={() => setFocus(true)}
onBlur={() => setFocus(false)}
placeholder={t("Enter phone number")}
value={value}
enableSearchField
enableSearch
onChange={changeHandler}
inputProps={{
required: true,
autoFocus: false,
}}
specialLabel={t("Phone")}
country={defaultCountry}
searchStyle={{margin: "0", width: "95%", height: "50px"}}
inputStyle={{
width: "100%",
height: "56px",
// borderRadius: '8px',
}}
containerClass={lanDirection && classes.borderClass}
dropdownStyle={{height: "300px", width: "267px"}}
onlyCountries={[]}
// disableDropdown="false"
/>
Related
I am creating custom tabs using react and material UI. In these tabs, we don't have a fixed tab count, based on the data, the length of the tab might increase and decrease. So we planned to add scrollable functionality If the tabs count is not occupied in the given space.
But by default, the scroll is appearing even if we have only one data.
below is the code for it.
import { Key, useState } from "react";
import { styled } from "#mui/material/styles";
import Button from "#mui/material/Button";
import { ReactComponent as Plus } from "./plus.svg";
import React from "react";
const Tabs = styled("div")`
width: 100%;
overflow: hidden;
margin: 1em 0 2em;
`;
const TabContainer = styled("ul")(() => ({
padding: 0,
margin: 0,
display: "flex",
flex: "1 1 auto",
overflowX: "auto",
overflowY: "hidden",
"& li": {
"&:first-of-type": {
marginLeft: 0,
"#media (max-width: 991px)": {
marginLeft: 10
}
}
},
"#media (max-width: 400px)": {
display: "unset"
}
}));
const Nav = styled("nav")(() => ({
display: "flex",
"#media (max-width: 991px)": {
textAlign: "center"
}
}));
const Tab = styled("li")(({ theme }) => ({
border: `2px solid ${theme.palette.grey[900]}`,
borderBottom: "none",
margin: "0 10px",
display: "block",
float: "left",
position: "relative",
borderTopRightRadius: 5,
borderTopLeftRadius: 5,
backgroundColor: theme.palette.common.white,
"#media (max-width: 991px)": {
float: "unset",
textAlign: "center"
},
"&.tab-current": {
border: `2px solid ${theme.palette.primary.main}`,
borderBottom: "none",
zIndex: 100,
"&::before": {
content: '""',
position: "absolute",
height: "2px",
right: "100%",
bottom: 0,
width: "1000px",
background: theme.palette.primary.main
},
"&::after": {
content: '""',
position: "absolute",
height: "2px",
right: "100%",
left: "100%",
bottom: 0,
width: "4000px",
background: theme.palette.primary.main
},
"& span": {
color: theme.palette.primary.main
}
}
}));
const Span = styled("span")(({ theme }) => ({
color: theme.palette.grey[900],
display: "block",
fontSize: "24px",
lineHeight: 2.5,
padding: "0 14px",
cursor: "pointer",
fontWeight: 400,
overflow: "hidden",
maxWidth: "ch",
textOverflow: "ellipsis",
whiteSpace: "nowrap"
}));
const AddGoalCTA = styled("span")(({ theme }) => ({
color: theme.palette.grey[900],
display: "block",
fontSize: "24px",
lineHeight: 2.5,
padding: "0 24px",
cursor: "pointer",
fontWeight: 900,
overflow: "hidden",
whiteSpace: "nowrap"
}));
const ButtonContainer = styled("div")(() => ({
float: "right",
"#media (max-width: 991px)": {
display: "none"
},
"& .MuiButton-root": {
padding: "10px"
}
}));
const PlusIcon = styled("span")(() => ({
width: "24px",
color: "black"
}));
const tabsData = ["Save For College", "Retirement Saving", "Save For Bike"];
// const tabsData = ["Save For College", "Retirement Saving", "Save For Bike", "Legacy Saving", "Save For Poker", "Save For Money"]
const TabsComponent = ({ hideEditButton, showAddTab = true }: any) => {
const [toggleState, setToggleState] = useState(0);
const toggleTab = (index: any) => {
setToggleState(index);
};
return (
<>
<Tabs>
<Nav>
<TabContainer>
{tabsData?.map((value: string, index: Key | null | undefined) => (
<Tab
className={toggleState === index ? "tab-current" : ""}
onClick={() => toggleTab(index)}
key={index}
tabIndex={0}
role="tab"
>
<Span>{value}</Span>
</Tab>
))}
{showAddTab && (
<Tab
onClick={() => {}}
tabIndex={0}
role="tab"
onKeyPress={() => {}}
>
<AddGoalCTA>
<PlusIcon as={Plus} />
</AddGoalCTA>
</Tab>
)}
</TabContainer>
{!hideEditButton && (
<ButtonContainer>
<Button variant="contained" onClick={() => {}}>
Edit
</Button>
</ButtonContainer>
)}
</Nav>
</Tabs>
</>
);
};
export default TabsComponent;
Here you can find the working demo - https://codesandbox.io/s/mui-tabs-9sgt89?file=/tab.tsx:0-4092
Please help me to resolve this one.
I checked your code. Actually for the current tab &::after has fixed width width: "4000px", which is causing the issue. you can reduce it to 1000px or to your convenience.
Hope this helps!!
Thanks
I have created custom MUI TextField
const CustomDisableInput = styled(TextField)(() => ({
".MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000",
color: "#000",
},
input: {
"&[type=number]": {
"-moz-appearance": "textfield",
},
"&::-webkit-outer-spin-button": {
"-webkit-appearance": "none",
margin: 0,
},
"&::-webkit-inner-spin-button": {
"-webkit-appearance": "none",
margin: 0,
},
},
}));
<CustomDisableInput
fullWidth
variant="standard"
size="small"
type="text"
sx={{
backgroundColor: "grey.300",
borderRadius: "3px",
paddingX: "3px",
}}
InputProps={{
disableUnderline: true,
}}
disabled={!isEditMode}
/>
now I want to apply
sx={{ backgroundColor: "grey.300",borderRadius: "3px",paddingX: "3px"}}
only when isEditMode is true.
What i tried ?
<CustomDisableInput
fullWidth
variant="standard"
size="small"
type="text"
sx={ isEditMode && {
backgroundColor: "grey.300",
borderRadius: "3px",
paddingX: "3px",
}}
InputProps={{
disableUnderline: true,
}}
disabled={!isEditMode}
/>
but it gives error
Type 'false | { backgroundColor: "grey.300"; borderRadius: string; paddingX: string; }' is not assignable to type 'SxProps<Theme> | undefined'.
Type 'false' is not assignable to type 'SxProps<Theme> | undefined'. TS2322
...
sx={isEditMode ? {
backgroundColor: "grey.300",
borderRadius: "3px",
paddingX: "3px",
} : {}}
or
const CustomDisableInput = styled(({ isEditMode, ...props }) => (
<TextField {...props} />
))(({ theme, isEditMode }) => ({
".MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000",
color: "#000",
},
input: {
"&[type=number]": {
"-moz-appearance": "textfield",
},
"&::-webkit-outer-spin-button": {
"-webkit-appearance": "none",
margin: 0,
},
"&::-webkit-inner-spin-button": {
"-webkit-appearance": "none",
margin: 0,
},
},
...isEditMode && {
backgroundColor: "grey.300",
borderRadius: "3px",
paddingX: "3px",
}
}));
const formContainer = {
maxWidth: "300px",
backgroundColor: '#FD439B',
padding: "10px",
"& textarea" : {
width: '100%',
padding: '15px',
margin: '5px 0 22px 0',
border: "none",
background: '#F1F1F1',
resize: "none",
minHeight: '200px'
},
"& focus" : {
backgroundColor: '#ddd',
outline: 'none'
};
JS Code :
<div class="formContainer" style={formContainer}>
With this code only formContainer maxWidth,backgroundColor,padding is appending ,remaining code like textarea,focus styles are not coming.
do it with Material-UI styles :
import React from "react";
import { withStyles } from "#material-ui/core/styles";
const styles = theme => ({
root: {
maxWidth: "300px",
backgroundColor: '#FD439B',
padding: "10px",
"& textarea" : {
width: '100%',
padding: '15px',
margin: '5px 0 22px 0',
border: "none",
background: '#F1F1F1',
resize: "none",
minHeight: '200px'
},
"& textarea:focus" : {
backgroundColor: '#ddd',
outline: 'none'
}
}
});
function TypographyTheme(props) {
return (
<div className={props.classes.root} contenteditable="false">
<textarea>
"This div's text looks like that of a button.
</textarea>
</div>
);
}
export default withStyles(styles)(TypographyTheme);
Demo
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 2 years ago.
I try to align my menu properly but it's not working properly. So the way it's done is that when you arrive on my website and not logged in, the header below is displayed:
When the user is loggedin, the login/register is replaced by a scrolldown menu which is triggered by the click of an avatar. The scroll down works fine but the render of the menu is not aligned as you see below:
I am not able to make the avatar and the menu properly aligned as it's done at first.
below is code:
const fakeName = "First Last";
const isGuest = false;
const StyledProfileMenu = withStyles({
paper: {
border: '1px none',
borderRadius: "21px",
boxShadow: "0px 8px 18px 0 rgba(0,0,0,0.14)",
},
})((props) => (
<Menu
elevation={0}
getContentAnchorEl={null}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
{...props}
/>
));
const StyledProfileMenuItem = withStyles((theme) => ({
root: {
margin: "2px 30px 1px 10px",
fontFamily: "Source Sans Pro",
fontSize: "",
'&:hover': {
backgroundColor: "#ffffff",
color: '#ff7255'},
'&:focus': {
backgroundColor: "#ffffff",
color: '#ff7255'},
},
}))(MenuItem);
const useStyles = makeStyles(theme => ({
root: {
boxShadow: "none",
backgroundColor: "#ffffff",
marginTop: theme.spacing(3)
},
logo: {
width:"214px",
height:"28px",
marginLeft: theme.spacing(20),
marginRight: theme.spacing(3)
},
search: {
position: 'relative',
borderRadius: "21px",
backgroundColor: "#f4f7f8",
marginRight: theme.spacing(2),
marginLeft: theme.spacing(3),
width: "467px",
height: "40px",
// [theme.breakpoints.up('sm')]: {
// marginLeft: theme.spacing(3),
// width: 'auto',
// },
},
searchIcon: {
padding: theme.spacing(1, 2),
height: '18px',
width: '18px',
position: 'absolute',
pointerEvents: 'none',
alignItems: 'center',
justifyContent: 'center',
color: "#cecece"
},
inputRoot: {
color: "#cecece",
fontFamily: "Source Sans Pro",
fontSize: "18px"
},
inputInput: {
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
width: "467px",
// [theme.breakpoints.up('md')]: {
// width: '20ch',
// },
},
menu: {
display: "flex",
marginLeft: theme.spacing(2),
margin: "auto",
},
menuItem: {
color: "#cecece",
fontSize: "20px",
fontFamily: "Fredoka One",
fontWeight: "bold",
'&:hover': {
backgroundColor: "#ffffff",
color: '#ff7255'},
'&:focus': {
backgroundColor: "#ffffff",
color: '#ff7255'},
marginRight: theme.spacing(3),
marginLeft: theme.spacing(3),
},
userName: {
fontFamily: "Source Sans Pro",
fontWeight: "Bold",
borderBottom: '3px solid #ff7255',
textAlign: "center",
margin: "2px 10px 2px 10px",
paddingBottom: "2px"
}
}));
function Header(){
let loginOrProfile;
const styles = useStyles();
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const profileMenu =
<div>
<IconButton
aria-controls="customized-menu"
aria-haspopup="true"
variant="contained"
color="primary"
onClick={handleClick}>
<Avatar alt="Avatar" src={DefaultAvatar} />
<ArrowDropDownIcon style={{ color: "#ff7255" }}/>
</IconButton>
<StyledProfileMenu
id="customized-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}>
<p className={styles.userName}> {fakeName} </p>
<StyledProfileMenuItem>
<ListItemText primary={TextContents.MenuProfile} />
</StyledProfileMenuItem>
<StyledProfileMenuItem>
<ListItemText primary={TextContents.MenuMessages} />
</StyledProfileMenuItem>
<StyledProfileMenuItem>
<ListItemText primary={TextContents.MenuSettings} />
</StyledProfileMenuItem>
<StyledProfileMenuItem>
<ListItemText primary={TextContents.MenuLogout} />
</StyledProfileMenuItem>
</StyledProfileMenu>
</div>;
const loginMenu =
<Typography className={styles.menuItem}> {TextContents.MenuLoginRegister} </Typography>;
if(isGuest){
loginOrProfile = loginMenu;
} else {
loginOrProfile = profileMenu;
}
return (
<div className={styles.root}>
<AppBar position="static" className={styles.root}>
<Toolbar>
<img src={VillageLogo} alt="logo" className={styles.logo}/>
<div className={styles.search}>
<div className={styles.searchIcon}>
<SearchIcon />
</div>
<InputBase
placeholder={TextContents.SearchPlaceHolder}
classes={{
root: styles.inputRoot,
input: styles.inputInput,
}}
inputProps={{ 'aria-label': 'search' }}
/>
</div>
<div className={styles.menu}>
<Typography className={styles.menuItem}> {TextContents.MenuDiscover} </Typography>
<Typography className={styles.menuItem}> {TextContents.MenuCreate} </Typography>
<Typography className={styles.menuItem}> {TextContents.MenuHiW} </Typography>
{isGuest && loginMenu}
{!isGuest && profileMenu}
</div>
</Toolbar>
</AppBar>
</div>
);
}
export default Header
If someone may have any idea how to make the alignment proper, I would be super happy
try this:
display: flex;
align-items: center;
I am trying to use material ui's appbar and code in some custom responsiveness to it. I am creating a personal project that will be accessed from a Galaxy s8 smartphone. Ultimately I would like the nav-links and logout button on the navbar to consolidate into a hamburger button when the viewport is small. I am not quite sure how to achieve this however as I am using flexbox on the webpage when it is at full size and it keeps messing me up.
Here is the appbar at full size:
Here is the appbar at phone size with the hamburger button:
Here is the desired effect I would like with items, posts, groups, and the log out button being pushed to an accordion like menu on mobile:
Here is my navbar component code:
import { withStyles } from "#material-ui/core/styles";
import styles from "./styles/NavBarStyles";
import { LoggedInContext } from "./contexts/LoggedIn";
import { ThemeContext } from "./contexts/ThemeContext";
function Navbar(props) {
const { isDarkMode, toggleTheme } = useContext(ThemeContext);
const { loggedIn, changeLogIn, token, setToken } = useContext(
LoggedInContext
);
const { classes } = props;
const [mobileHamburgerOpen, setMobileHamburger] = useState(false);
const handleMobileClick = () => {
setMobileHamburger(!mobileHamburgerOpen);
console.log(mobileHamburgerOpen);
};
return (
<div className={classes.root}>
<AppBar
position="static"
style={{ background: isDarkMode ? "#2E3B55" : "#715AFF" }}
>
<Toolbar>
<Typography className={classes.title} variant="h6" color="inherit">
{isDarkMode ? "🌚" : "🌞"}
</Typography>
<Switch onChange={toggleTheme} />
<div className={classes.grow} />
{loggedIn && (
<div className={classes.loggedIn}>
<div className={classes.navlinks}>
<NavLink
to="/items"
activeStyle={{ background: "rgba(0, 0, 0, 0.5)" }}
>
Items
</NavLink>
<NavLink
to="/facebookitems"
activeStyle={{ background: "rgba(0, 0, 0, 0.5)" }}
>
<i className="fab fa-facebook-square"></i> Posts
</NavLink>
<NavLink
to="/groups"
activeStyle={{ background: "rgba(0, 0, 0, 0.5)" }}
>
<i className="fab fa-facebook-square"></i> Groups
</NavLink>
</div>
<Button
className={classes.logOutButton}
variant="contained"
color="secondary"
onClick={handleClick}
>
Log Out
</Button>
<Button
className={classes.hamburgerMenu}
variant="contained"
color="primary"
onClick={handleMobileClick}
>
<i className="fas fa-bars"></i>
</Button>
</div>
)}
</Toolbar>
</AppBar>
</div>
);
}
export default withStyles(styles)(Navbar);
Here is my style sheet code:
import { fade } from "#material-ui/core/styles/colorManipulator";
const styles = theme => ({
root: {
width: "100%",
marginBottom: 0
},
grow: {
flexGrow: 1
},
menuButton: {
marginLeft: -12,
marginRight: 20
},
title: {
display: 'block'
},
search: {
position: "relative",
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
"&:hover": {
backgroundColor: fade(theme.palette.common.white, 0.25)
},
marginLeft: 0,
width: "100%",
[theme.breakpoints.up("sm")]: {
marginLeft: theme.spacing(1),
width: "auto"
}
},
searchIcon: {
width: theme.spacing(9),
height: "100%",
position: "absolute",
display: "flex",
alignItems: "center",
justifyContent: "center"
},
inputRoot: {
color: "inherit",
width: "100%"
},
inputInput: {
paddingTop: theme.spacing(1),
paddingRight: theme.spacing(1),
paddingBottom: theme.spacing(1),
paddingLeft: theme.spacing(10),
transition: theme.transitions.create("width"),
width: "100%",
[theme.breakpoints.up("sm")]: {
width: 120,
"&:focus": {
width: 200
}
}
},
loggedIn: {
width: "100%",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
paddingLeft: "2rem"
},
navlinks: {
// [theme.breakpoints.down("sm")]: {
// position: 'absolute',
// backgroundColor: "rgba(0,0,0,.7)",
// top: '0%',
// right: '0%',
// width: '100vw',
// height: '100vh'
// },
"& a": {
color: "white",
fontWeight: "bold",
fontSize: "1.5rem",
textDecoration: "none",
marginRight: '1rem',
padding: ".5rem",
borderRadius: "15px"
},
"& a:active": {
backgroundColor: "rgba(0, 0, 0, 0.5)"
}
},
hamburgerMenu: {
display: 'none',
[theme.breakpoints.down("sm")]: {
display: 'block',
marginLeft: "auto",
backgroundColor: "white",
color: "#715AFF"
}
},
logOutButton: {
// [theme.breakpoints.down("sm")]: {
// display: 'none'
// }
}
});
export default styles;