I'm using Material UI Accordion for creating a filter menu.
It looks like this on some devices whereas it looks likes this on other devices with different dimensions even though the margins between the items are the same and uses the same code. On resizing the dimensions of the screen, the inconsistency changes.
How to fix this inconsistency with the spacing between each filter item?
Here's my file FilterAccordion.tsx:
<Box className={classes.accordionRoot}>
<Accordion style={{ boxShadow: "none" }} defaultExpanded={true}>
<AccordionSummary
expandIcon={<ExpandMore style={{ fill: "#d3d3d3" }} />}>
<div className={classes.verticalrootcontainer}>
<Icon
onClick={(e) => e.stopPropagation()}
style={{
fill: "#d3d3d3",
width: "2rem",
marginRight: "1rem",
transform: "scale(3)",
zIndex: -1,
}}
/>
<Typography
variant="body1"
className={`titleAquire ${classes.title}`}>
{title}
</Typography>
</div>
</AccordionSummary>
<AccordionDetails>
<div className={classes.listRoot}>
{Object.keys(groupByPacks).map((item, index) => {
let checked = isChecked(item);
return (
<div
key={index}
className={`${classes.list} ${
checked ? classes.selected : ""
}`}
onClick={() => handleOnCheck(item)}>
<Typography variant="body1" className={classes.item}>
{item}
</Typography>
<Typography variant="body1" className={classes.item}>
{groupByFilteredPacks[item]
? groupByFilteredPacks[item]?.length
: 0}
</Typography>
</div>
);
})}
</div>
</AccordionDetails>
</Accordion>
</Box>
And the CSS file:
accordionRoot: {
"& .MuiAccordion-root": {
background: "transparent",
},
"& .MuiAccordionDetails-root": {
padding: "0px",
},
"& .MuiAccordionSummary-root": {
padding: "0px",
marginBottom: "-1rem",
},
"& .MuiCollapse-entered": {
marginTop: "1rem",
},
},
title: {
fontSize: "18px",
color: theme.on.dark,
},
verticalrootcontainer: {
display: "flex",
alignItems: "center",
},
list: {
display: "flex",
width: "100%",
alignItems: "center",
justifyContent: "space-between",
marginTop: "0.2rem",
padding: "0.2rem 0.5rem",
cursor: "pointer",
"&:first-child": {
marginTop: 0,
},
},
item: {
textTransform: "uppercase",
color: theme.on.dark,
opacity: "30%",
},
selected: {
background: theme.on.dark,
"& p": {
color: theme.darkMode.light,
opacity: "100%",
},
},
listRoot: {
width: "100%",
},
Related
So I want the boxes I have displayed in a parent box to completely stretch out. I followed the documentation on MUI for the flexbox, though after editing it a bit I do not understand why it does not work anymore :?
I have given the inner items a minimum for width and height, but even without this the items do not stretch.
Does the stretch attribute not mean that the parent container will be completely filled out?
Here's my code:
import "./styles.css";
import React from "react";
import Box, { BoxProps } from "#mui/material/Box";
import PropTypes from "prop-types";
function Item(props) {
const { sx, ...other } = props;
return (
<Box
sx={{
border: "1px solid pink",
borderRadius: 2,
fontSize: "0.875rem",
minHeight: "5rem",
minWidth: "5rem",
...sx
}}
{...other}
/>
);
}
Item.propTypes = {
sx: PropTypes.oneOfType([
PropTypes.arrayOf(
PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])
),
PropTypes.func,
PropTypes.object
])
};
export default function App() {
const items = [
{
title: "Car",
color: "yellow"
},
{
title: "Plane",
color: "lightblue"
},
{
title: "Bicycle",
color: "lightgreen"
},
{
title: "Train",
color: "orange"
}
];
const movies = [
{
title: "Seven",
color: "red"
},
{
title: "Memento",
color: "white"
},
{
title: "Vivarium",
color: "lightgreen"
},
{
title: "Blue Velvet",
color: "lightblue"
}
];
return (
<>
<Box
className="Container Of Sub"
style={{
backgroundColor: "lightpink",
display: "flex",
alignItems: "center",
width: "100%",
height: "100%"
}}
>
<Box className="FirstSub" style={{ width: "50%" }}>
<Box
className="Header"
style={{
borderRadius: "10px",
paddingLeft: "10px",
boxShadow: "4px 4px 20px 0px rgba(0,0,0,0.25",
backgroundColor: "white"
}}
>
<h4>Subcategory 1</h4>
</Box>
<Box
className="Category Holder"
sx={{
display: "flex",
flexWrap: "wrap",
alignContent: "stretch",
borderRadius: 1
}}
>
{items.map((item) => (
<Item
sx={{
backgroundColor: item.color
}}
>
{item.title}
</Item>
))}
</Box>
</Box>
<Box
className="2ndSubCategory"
style={{
width: "50%",
marginLeft: "20px"
}}
>
<Box
className="Header"
style={{
borderRadius: "10px",
paddingLeft: "10px",
boxShadow: "4px 4px 20px 0px rgba(0,0,0,0.25",
backgroundColor: "white"
}}
>
<h4>Subcategory 2</h4>
</Box>
<Box
className="Category Holder"
sx={{
display: "flex",
flexWrap: "wrap",
alignContent: "stretch",
borderRadius: 1
}}
>
{movies.map((item) => (
<Item
sx={{
backgroundColor: item.color
}}
>
{item.title}
</Item>
))}
</Box>
</Box>
</Box>
</>
);
}
I am using AgoraUIKit from "agora-react-uikit". it is supposed to have the option to mute remote users as per their documentation, but it is not there as they showed in their demo example.
Here is the github link for controls panal which is supposed to be there by default.
https://github.com/AgoraIO-Community/VideoUIKit-Web-React/wiki/Guide#controls
Here is a code of the App.tsx file
import React, { CSSProperties, useState } from 'react'
import AgoraUIKit, { layout, VideoPlaceholderProps, BtnTemplate } from 'agora-react-uikit'
import 'agora-react-uikit/dist/index.css'
const PageComponent: React.FunctionComponent<VideoPlaceholderProps> = ({isShown=true, showButtons=true, showSwap=false}) => {
return (
<>
{showButtons}{isShown}{showSwap}
{BtnTemplate}
</>
);
};
const App: React.FunctionComponent = () => {
const [videocall, setVideocall] = useState(false)
const [isHost, setHost] = useState(true)
const [isPinned, setPinned] = useState(false)
const [username, setUsername] = useState('')
return (
<div style={styles.container}>
<div style={styles.videoContainer}>
{videocall ? (
<>
<div style={styles.nav2}>
<h3 style={styles.heading}>Online Video Call</h3>
<p style={styles.btn} onClick={() => setPinned(!isPinned)}>
Change Layout
</p>
</div>
<AgoraUIKit
rtcProps={{
appId: 'appid',
channel: 'channel name',
uid: 0,
token: 'token', // add your token if using app in secured mode
role: isHost ? 'host' : 'audience',
layout: isPinned ? layout.pin : layout.grid,
activeSpeaker: true,
disableRtm: false,
enableScreensharing: true,
CustomVideoPlaceholder: PageComponent,
}}
rtmProps={{
username: username || 'user',
displayUsername: true,
showPopUpBeforeRemoteMute: true
}}
callbacks={{
EndCall: () => setVideocall(false)
}}
styleProps={{
localBtnContainer: { backgroundColor: 'white', justifyContent: 'center', gap: "20px" },
> BtnTemplateStyles: { borderColor: 'rgb(107 107 107)' },
}}
/>
</>
) : (
<div style={styles.nav}>
<input
style={styles.input}
placeholder='nickname'
type='text'
value={username}
onChange={(e) => {
setUsername(e.target.value)
}}
/>
<h3 style={styles.btn} onClick={() => setVideocall(true)}>
Start Call
</h3>
</div>
)}
</div>
</div>
)
}
const styles = {
container: {
maxWidth: '1100px',
margin: "0 auto",
height: '100vh',
display: 'flex',
flex: 1,
},
container2: {
padding: "2px 16px"
},
heading: { textAlign: 'center' as const, marginBottom: 0 },
videoContainer: {
display: 'flex',
flexDirection: 'column',
flex: 1
} as CSSProperties,
nav: { display: 'flex', justifyContent: 'space-between' },
nav2: { display: 'flex', justifyContent: 'space-between', borderBottom: "1px solid black" },
card: {
// position:"absolute",
// left:"0",
// bottom:"0",
// transform:"translate(155px, -82px)",
// boxShadow: '0 4px 8px 0 rgba(0,0,0,0.2)',
// transition: '0.3s',
// display: 'flex',
// width:"80vw",
// height:"80vh",
// flexDirection: "column",
// justifyContent: "space-between"
} as CSSProperties,
btn: {
backgroundColor: '#007bff',
cursor: 'pointer',
borderRadius: 5,
padding: '4px 8px',
color: '#ffffff',
fontSize: 20
},
input: { display: 'flex', height: 24, alignSelf: 'center' } as CSSProperties
}
export default Apptype here
I've got a problem with my CSS styling. I've got some example headers with the possibility to add some header bookmarks with help of the "PLUS" button. You can see the code here: https://codesandbox.io/s/condescending-feather-wjxfuu?file=/src/App.js or:
import React, { useState } from "react";
export default function App() {
const [list, setList] = useState([]);
const handleAddItem = () => {
const newItem = { id: list.length, name: `Item ${list.length + 1}` };
setList([...list, newItem]);
};
const handleRemoveItem = (index) => {
setList(list.filter((item) => index !== item.id));
};
return (
<div className="App">
<div
style={{
width: "400px",
height: "50px",
display: "flex",
alignItems: "center",
gap: "8px",
overflow: "hidden",
padding: "8px",
border: "1px solid red"
}}
>
{list.map((item, i) => (
<div
key={i}
style={{
border: "1px solid blue",
borderRadius: "5px",
padding: "4px",
backgroundColor: "blue",
color: "white",
cursor: "pointer",
overflow: " hidden",
whiteSpace: "nowrap",
textOverflow: "ellipsis"
}}
onClick={() => handleRemoveItem(i)}
>
{item.name}
</div>
))}
<button onClick={handleAddItem}>+</button>
</div>
</div>
);
}
The problem is, that when I add some number of the bookmarks, then in some cases the "PLUS" button starts to overflow the div container(header) as you can see in the GIF.
I want the button not to overflow the content.
You can add another div to keep all your items separate from your button
You can try this playground
import React, { useState } from "react";
export default function App() {
const [list, setList] = useState([]);
const handleAddItem = () => {
const newItem = { id: list.length, name: `Item ${list.length + 1}` };
setList([...list, newItem]);
};
const handleRemoveItem = (index) => {
setList(list.filter((item) => index !== item.id));
};
return (
<div className="App">
<div
style={{
width: "400px",
height: "50px",
display: "flex",
alignItems: "center",
gap: "8px",
overflow: "hidden",
padding: "8px",
border: "1px solid red"
}}
>
<div
style={{
height: "50px",
display: "flex",
alignItems: "center",
gap: "8px",
overflow: "hidden"
}}
>
{list.map((item, i) => (
<div
key={i}
style={{
border: "1px solid blue",
borderRadius: "5px",
padding: "4px",
backgroundColor: "blue",
color: "white",
cursor: "pointer",
overflow: " hidden",
whiteSpace: "nowrap",
textOverflow: "ellipsis"
}}
onClick={() => handleRemoveItem(i)}
>
{item.name}
</div>
))}
</div>
<button onClick={handleAddItem}>+</button>
</div>
</div>
);
}
Hi, Simply make the button directly in the div classed app <div className="App">
import React, { useState } from "react";
export default function App() {
const [list, setList] = useState([]);
const handleAddItem = () => {
const newItem = { id: list.length, name: `Item ${list.length + 1}` };
setList([...list, newItem]);
};
const handleRemoveItem = (index) => {
setList(list.filter((item) => index !== item.id));
};
return (
<div className="App">
<div
style={{
width: "400px",
height: "50px",
display: "flex",
alignItems: "center",
gap: "8px",
overflow: "hidden",
padding: "8px",
border: "1px solid red"
}}
>
{list.map((item, i) => (
<div
key={i}
style={{
border: "1px solid blue",
borderRadius: "5px",
padding: "4px",
backgroundColor: "blue",
color: "white",
cursor: "pointer",
overflow: " hidden",
whiteSpace: "nowrap",
textOverflow: "ellipsis"
}}
onClick={() => handleRemoveItem(i)}
>
{item.name}
</div>
))}
</div>
<button onClick={handleAddItem}>+</button>
</div>
);
}
I have a project that builds a Dashboard using Material UI, the dashboard can have plots and different content inside a Material UI Card.
When there is enough y-space the content works just fine like this:
But when the vertical space is not enough the content overflow kinda breaks and places some items on the right instead of overflowing vertically.
The idea is that the plot will use any available space and the text will use just what it needs.
All the code for this is here: https://github.com/danielfrg/jupyter-flex/blob/main/js/src/Card/index.js
But I will put some pieces here to help.
This is the Card:
<Grid
item
container
className={`card ${cardsClsName} ${customClsNames}`}
direction="column"
alignItems="stretch"
xs={size}
>
{header ? <Grid item>{header}</Grid> : null}
<Grid
item
component={MaterialCard}
className={`${boxClsName} ${
verticalLayout == "scroll" ? classes.boxVLScroll : ""
}`}
variant="outlined"
xs
>
<Grid
item
container
direction="column"
component={CardContent}
className={cardContentClsName}
xs
>
{bodyComponents}
</Grid>
</Grid>
{footerComponents.length > 0 ? (
<Grid
item
container
component={CardActions}
className={classes.cardFooter}
>
{footerComponents}
</Grid>
) : null}
</Grid>
And the Material Styles that I apply to these:
const styles = (theme) => ({
card: {},
cardInColumn: {},
cardInRow: {},
cardInTabs: {
maxWidth: "100%",
height: "100%",
},
cardInSidebar: {
maxWidth: "100%",
height: "100%",
padding: 8,
},
cardHeader: {
padding: "6px 8px",
},
cardTitle: {
padding: "5px 0",
fontSize: "1.05em",
fontWeight: 600,
},
space: {
flexGrow: 1,
},
box: {},
boxVLScroll: {
flexBasis: "auto",
},
boxInSidebar: {
flexGrow: 1,
border: "none",
},
cardContent: {
maxWidth: "100%",
minHeight: "100%",
height: "100%",
overflow: "auto",
},
cardContentInSidebar: {
height: "100%",
display: "flex",
flex: "1 1 auto",
flexDirection: "column",
padding: "0 8px",
},
cardFooter: {
padding: "0 8px 8px",
},
empty: {
margin: "auto",
padding: theme.spacing(2),
textAlign: "center",
color: theme.palette.text.secondary,
},
});
I appreciate any pointers I am not the best when it comes to CSS.
Thanks!
const SearchBar = (text, onChange) => {
return (
<div>
<div style={{flexWrap: "wrap", background: 'red', border: "1px solid", borderRadius: 10}}>
<Search style={{background: 'blue', verticalAlign: 'bottom'}}/>
<input style={{background: 'blue', verticalAlign: 'bottom'}}
text={text} onChange={onChange}/>
</div>
</div>
);
};
export default SearchBar;
Here is my search bar code.
The result is
but, I want it to appear like this.
How can I get the result?
In your Search component make the width to be 100%.
<Search style={{background: 'blue', verticalAlign: 'bottom', width:'100%'}}/>
First import FaSearch then replace your code with below mentioned.
import { FaSearch } from "react-icons/fa";
const App =(text, onChange)=> {
return (
<>
<div style={styles.mainStyle}>
<Search />
<input style={styles.inputStyle} text={"text"} onChange={null} />
</div>
</>
);
}
const Search = () => <FaSearch style={styles.search} />;
const styles = {
mainStyle: {
display: "flex",
flexWrap: "wrap",
borderRadius: 10,
alignItems: "center",
border: "1px solid",
overflow: "hidden"
},
inputStyle: {
flex: 1,
border: "none",
height: 30
},
search: {
fontSize: 30,
padding: "0px 10px",
cursor: "pointer",
borderRight: '1px solid grey'
}
};