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>
Related
in my project I need to customize a checkbox with FormControlLabel. In this label I need to show name and code of an item one above another with lowered font size. I tried to add html markup to label or used Typography, but it did not work. The code is as follows:
<FormControlLabel
label={<Typography variant="subtitle2" style={{ color: 'black', fontSize: '10px' }}>{"name_here" + "<br />(\n also not working)" + "code_here"}</Typography>}
control={<Checkbox size="small"/>}
/>
Any ideas how to fix it would be welcome. Thank you.
You can achieve this by using the sx property in the FormControlLabel for MUI V5. Alternative ways is to use styled components, or if you want a global solution to use the MUI theme.
Below is a solution using the sx and here is the working codesanbox to play with
<FormControlLabel
value="top"
sx={{
".MuiFormControlLabel-label": {
fontSize: "10px"
}
}}
control={
<Checkbox
name="test"
value="test"
checked={true}
size="small"
inputProps={{ "aria-label": "controlled" }}
/>
}
label="Top"
labelPlacement="top"
/>
Alternatively, if you want to render a Typography component in side the label you can write similar as you did
label={
<Typography sx={{ fontSize: '10px' }}>
Label Text
</Typography>
}
or give any properties you want in the Typography component
I'm using Semantic UI to show some images. It works fine, also to add text near the image but I want to put the text over the image. On the bottom half of the image if possible.
This is my code with text above the image:
import { Grid, Image } from 'semantic-ui-react';
{data.map((element) => (
<Grid.Column>
<>
<div>{element.name + ' ' + element.city}</div>
<Image
src={element.image}
/>
</>
</Grid.Column>
))}
Is there a way to put the text from the div over the image?
You can set the position the div absolute in dependence to the parent
<Grid.Column style={{ position: "relative", display: "flex"}}>
<div style={{position: "absolute",bottom: 20}}>
Name : City
</div>
<Image src={element.image} />
</Grid.Column>
I have been trying to resize this logo without making the container itself larger. I'm completely stuck and dont know what to do. Modifying the logo svg file with inline styling
<svg viewBox="0 0 493.19 493.19" width='400'height='400'> produces the above result. I just want to make the logo bigger without pushing down all the components under it. I will post the layout code itself, if that will make things easier to help me out. Thank you!
const data: QueryResult = useStaticQuery(query)
return (
<ThemeProvider theme={theme}>
<>
<GlobalStyles />
<Wrapper>
<SideBarInner bg={color} as="aside" p={[6, 6, 8]}>
<Flex
flexWrap="nowrap"
flexDirection={['row', 'row', 'row', 'column']}
alignItems={['center', 'center', 'center', 'flex-start']}
justifyContent="space-between"
>
<Box width={['3rem', '4rem', '5rem', '8rem']}>
<Link to="/" aria-label="LekoArts, Back to Home">
<Logo />
</Link>
</Box>
<Nav
color={color}
mt={[0, 0, 0, 10]}
as="nav"
flexWrap="nowrap"
flexDirection={['row', 'row', 'row', 'column']}
alignItems="flex-start"
>
{data.navigation.nodes.map((item) => (
<PartialNavLink to={item.link} key={item.name}>
{item.name}
</PartialNavLink>
))}
</Nav>
</Flex>
</SideBarInner>
<Main>{children}</Main>
<Footer color={color}>
<Box p={[6, 6, 8]} fontSize={0}>
little things with love LekoArts.<br />
Source.
</Box>
</Footer>
</Wrapper>
</>
</ThemeProvider>
)
}
export default Layout```
The SVG viewBox dimensions don't change the size of the paths in the SVG, they change the size of the SVG object that contains the paths which results with that extra white-space.
I would undo the changes you made to the viewBox and remove the width and height inline styles. Then, the SVG should resize automatically to fit the container that it is in.
Try setting the width to 100% in the svg code and then control the size of svg with CSS (however you are implmenting css) by adjusting the width of the container that holds the svg.
Something like:
.sl-container {
width: 4rem;
}
EDIT:
If you need help implementing the css you can find a good explanation of numerous implmentations here. Inline styling is probably the simplest way to do it.
<Logo style="width: 4rem;" />
I have this render function:
render() {
const {classes} = this.props
return (
<Paper className={classes.root} elevation={4}>
<Typography type="title" className={classes.title}>
All Users
</Typography>
<List dense>
{this.state.users.map((item, i) => {
const photoUrl = item._id
? `/api/users/photo/${item._id}?${new Date().getTime()}`
: '/api/users/defaultphoto'
return <Link to={"/user/" + item._id} key={i}>
<ListItem button>
<ListItemAvatar>
<Avatar src={photoUrl} className={classes.bigAvatar}/>
</ListItemAvatar>
<ListItemText primary={item.name}/>
<ListItemSecondaryAction>
<IconButton>
<ArrowForward/>
</IconButton>
</ListItemSecondaryAction>
</ListItem>
</Link>
})
}
</List>
</Paper>
)
}
}
When I Initially load the page the below blue dot appears to the left of each user:
If I then click a link to another page and then the browser back arrow to return to the Users page the user list appears without the blue dot:
I would prefer if the blue dot never appears. How do I do this?
I faced the same problem today using ListItem component from react material ui v4.6.0.
The default list style type value of disc will be displayed if "ListItemSecondaryAction" component is used as the last child of "ListItem" component.
According to the React Material UI Docs, the value of ContainerComponent prop will be set to 'li' when ListItemSecondaryAction is used as the last child.
Changing the value of ContainerComponent prop to other elementType such as 'div' fixed the issue.
<ListItem button ContainerComponent="div">
<ListItemAvatar>
<Avatar src={photoUrl} className={classes.bigAvatar} />
</ListItemAvatar>
<ListItemText primary={item.name} />
<ListItemSecondaryAction>
<IconButton>
<ArrowForward />
</IconButton>
</ListItemSecondaryAction>
</ListItem>
I assume somewhere in the nested components you have a li of some sort.
The dots are from html list bullet points and can be removed by adding the following css:
ul {
list-style-type: none !important;
}
If the component is a part of the Material-UI library, you might need to add !important
Using material-ui I am trying to make a <List /> inside of a <Grid /> column. I want the list to scroll on overflow but also take up the width of the grid it is in. I can get both of these to work but not at the same time. the first section with the <Grid /> is the overflowY functioning properly but without the full width of the <ListItem />:
const styles = theme => ({
root: {
flexGrow: 1,
},
list: {
flexGrow: 1,
position: 'absolute',
overflow: 'auto',
bottom: '1em',
top: '1em',
},
})
...
<Grid item xs>
<List classes={{ root: classes.list }}>
{genereateData(35).map(item => (
<ListItem button>
<ListItemText primary={item} />
</ListItem>
))}
</List>
</Grid>
...
<List classes={{ root: classes.root }}>
but if I switch the line to the last little bit of code above the full width part works. So why would the flexGrow: 1 work in the root prop but not the list prop, and is there a way to get both? I assume it has to do with position: absolute but I cannot get rid of that. Just looking for a way to get both.
Here is a codesandbox!