Develop Reference

Material UI List Item Text: Primary Text Overflow

Sorry if this has been asked, I looked and couldn't find the answer!
I have a Material UI listview that has a set width (it's in a sidebar). I am trying to render the titles of some options, and the Primary text of ListItemText is wrapping past its container. Why is it not simply extending the container's height and going multi-line?
Thanks so much in advance!
return (
<ListItem
key={network._id}
selected={user.network && user.network._id === network._id}
>
<ListItemText
primary={network.name}
sx={{ maxWidth: '100%' }}
/>
<IconButton>
<DoubleArrowIcon />
</IconButton>
</ListItem>
);

All,
If you have my problem, here is what worked for me:
<ListItemText
primary={tooLongTitle}
primaryTypographyProps={{ style: { whiteSpace: "normal" } }} />
Credit:
multiline with <ListItemText>

How to implement react-particles-js with anchor links?

Using react-particles-js
as a background on a React project, I discover that disables the anchor tag, don't know if its my implementation
const App = () => {
return (
<div className="App" style={{ position: "relative", overflow: "hidden" }}>
<div style={{ position: "absolute" }}>
<Particles height="330vh" width="100vw" params={particlesConfig} />
</div>
<Home /> {/*this is the content */}
</div>
);
};
What it happens its that in this component with link like this
<a
href="https://tienda-de-garage.herokuapp.com/"
style={{ textDecoration: "none", color: "black" }}
>
<p>Tienda de Garage</p>
</a>
Don't work.
I wonder if its the implementation, maybe the use of the view port the increase the size of the area to encompass the background but i'm not sure.
here its a live version, with the 1 link not working to show the issue

You need to set interactivity.detectsOn to window (InteractivityDetect.window or "window")
You can see a working sample here
This sample uses react-tsparticles but it's the same as react-particles-js since they share the same core library tsparticles

Make antd modal expand according to size of google maps map

I have a simple antd modal divided using the Row and Col grid. The Modal expands as needed if I put some content in it on one side, however on the other side I have a map displayed using google-maps-react.
The issue here is, I would like the map to be a certain size, but when there is little content, it overflows the modal and looks silly.
This is what my code currently looks like:
export function MyModal () {
return (
<Modal>
<Row>
<Col lg={12}>
[MY CONTENT]
</Col>
<Col lg={12}>
<div>
<Map google={google}
initialCenter={{ lat: 45.42, lng: -75.69 }}
zoom={14}
style={{ width: 420, height: 400 }}
/>
</div>
</Col>
</Row>
</Modal>
)
}
When MY_CONTENT does not have much, the map overflows the modal and looks like this:
However when I am filling in the other side of the modal with content, it naturally expands. So I don't understand why the map does not expand it.
Anyway the question is how can I make the right side of the modal also expand as much as necessary so that the map fits in it?
Thanks!
Edit: I created a code sandbox so the antd components could be seen. Unfortunately I don't know how to do this on SO's code snippet editor.

Turns out this was because my Map component was an iframe.
I learned that when this is the case, it doesn't bring in its own width and height, so the parent div thinks it's all 0 or something like that.
The solution was for me to put a width and height on the div. Since this is static on the map anyway, it isn't a problem. So now my code looks like this:
export function MyModal () {
return (
<Modal>
<Row>
<Col lg={12}>
[MY CONTENT]
</Col>
<Col lg={12}>
<div style={{ width: 420, height: 400 }}>
<Map google={google}
initialCenter={{ lat: 45.42, lng: -75.69 }}
zoom={14}
style={{ width: 420, height: 400 }}
/>
</div>
</Col>
</Row>
</Modal>
)
}

I can't seem to get overflow:"hidden" to work

I am trying to disable scrolling beyond the monitor resolution by hiding overflow. I am not sure why it is not working.
App.js file:
function App() {
return (
<BrowserRouter>
<div className="App"
style={{
overflow:"hidden"
}}
>
<Route
exact
path="/"
component={DefaultView}
></Route>
</div>
</BrowserRouter>
);
}
Default View File:
render(){
return(
<div
style={{
overflow:"hidden"
}}>
<div
className="bg"
style={{
backgroundColor:"#FFFFF",
position:"absolute",
width:"100%",
height:"100%"
}}
/>
<div
className="line"
style={{
backgroundColor:"#289BD3",
position:"absolute",
height:"1000px",
width:"1920px",
transform:"rotate(45deg)",
top:"200px",
left:"-800px"
}}
>
</div>
</div>
)
}
Right now, there is no X scrolling, but I can scroll up and down.
A codesandbox of the issue:
https://codesandbox.io/s/rylyo4zy24
Thanks for any help!

I changed the parent div's position to absolute and my child div's positions to relative, solving the issue.

I'm not sure exactly what you're trying to accomplish here, but for overflow hidden to have any meaning you need to define some height and/or width for the respective element:
<div
style={{
overflow:"hidden",
height:"1000px",
width:"1920px"
}}
>
...

Material ui appbar doesn't scale down when on mobile

I have created a material-ui appbar at the top of my website like this: Website Appbar
When I scale the website to a mobile size, the Appbar is not responsive to the screen: Appbar when in mobile size
Here is the code on how my appBar is designed:
<MuiThemeProvider theme={theme}>
<AppBar color="primary" style={{ position: 'absolute' }} >
<Toolbar style={{ marginRight: 'auto', marginLeft: 'auto' }}>
<Button basic href="http://localhost:3006/home">
<Image
spaced="left"
height="40px"
floated="left"
verticalAlign="middle"
src="https://admin.neruti.com/wp-content/uploads/2017/11/neruti_logo_inverted_400x400.png"
alt="logo"
/>
</Button>
{menu.items.map((item) => {
if (item.menu_item_parent === '0') {
const menuList = menu.items.filter(
i => i.menu_item_parent === item.ID.toString(),
);
if (menuList.length === 0) {
return (
<Button
style={{ marginRight: '3vw', color: '#D8EDFE' }}
as="a"
key={item.ID}
link
href={`/${item.url.split(config.wp_url)[1].slice(0, -1)}`}
>
{item.title}
</Button>
);
}
return (
<div>
<Button style={{ marginRight: '3vw', color: '#D8EDFE' }}>
<Dropdown item text={item.title} key={item.ID}>
<Dropdown.Menu>
{menuList.map(i => (
<Dropdown.Item
key={i.ID}
href={`/${item.url.split(config.wp_url)[1].slice(0,
-1)}/${i.url.split(config.wp_url)[1].slice(0, -1)}`}
>
{i.title}
</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
</Button>
</div>
);
}
return null;
})}
</Toolbar>
</AppBar>
</MuiThemeProvider>
Do I need some extra codes to adjust the size of the Appbar?
How can I solve this problem?
Problem solved update
After much research and work, I have solved the problem and I would like to share the solution.
Instead of changing the style of the AppBar, I ended up creating a new header component just for mobile screen size. Then, use react responsive media queries as seen here React responsive to check whether the screen is mobile or desktop to find out which header components to execute.
Code example:
<div>
<MediaQuery maxWidth={1224}>
<MobileFixedMenu menu={menu} config={config} />
</MediaQuery>
<MediaQuery minWidth={1224}>
<FixedMenu menu={menu} config={config} />
</MediaQuery>
</div>
I hope this solution will help anyone that is facing the same problem :)

I had the same issue and I just found the answer here: https://github.com/mui-org/material-ui/issues/7130
You need to handle viewport in your index.html file, for example like that:
<meta
name="viewport"
content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1"
/>