I'm using React-Ionic and I am not able to reduce the top/bottom padding from the Col element of my Grid.
This is the code I'm using
<IonGrid fixed={true} >
<IonRow >
{
categories.map(l => {
return (
<IonCol key={l.name} size="6" size-md >
<IonCard style={{ backgroundColor: '#444' }}>
<IonCardHeader >
<IonIcon style={{ display: 'flex', fontSize: '30px', marginBottom: 10 }} icon={l.icon} />
<IonCardTitle style={{ fontSize: 18 }}>{l.name}</IonCardTitle>
</IonCardHeader>
</IonCard>
</IonCol>
)
})
}
</IonRow>
</IonGrid>
and below you can see the result, but I wanted to have vertically closer the cards.
I also tried to change the code to
<IonCard style={{ backgroundColor: '#444', paddingTop:0, paddingBottom:0 }}>
without results.
Thanks for the help.
it is a combination of padding and margin, i reduced it to zero so you can adjust accordingly
<IonCol key={l} size="6" size-md style={{ padding : 0}}>
<IonCard style={{ backgroundColor: '#444', padding :0 , margin :0 }}>
<IonCardHeader >
<IonIcon style={{ display: 'flex', fontSize: '30px', marginBottom: 10 }} icon={homeOutline} />
<IonCardTitle style={{ fontSize: 18 }}>{l + " THIS IS TITLE"}</IonCardTitle>
</IonCardHeader>
</IonCard>
</IonCol>
Related
I appreciate if anyone can give a solution to add space between or space evenly between the two IconButton inside the ImageListItem in Material UI. The code uses Material UI library inside Reactjs
<ImageListItem
key={item?.id}
cols={item.cols || 1}
rows={item.rows || 1}
>
<img
{...srcSetStyle(item.url, 121, item.rows, item.cols)}
alt={item.url}
loading="lazy"
/>
<ImageListItemBar
sx={{
background: "transparent",
top: "5%",
}}
position="top"
actionPosition="left"
actionIcon={
<>
<IconButton
sx={{ color: "red" }}
>
{item.isFavorite ? (
<FavoriteIcon className="favoriteIcon" />
) : (
<FavoriteBorderIcon
className="favoriteIcon"
/>
)}
</IconButton>
<IconButton
className="addIcon"
sx={{
color: "red",
}}
>
<AddCircleOutlineIcon />
</IconButton>
</>
}
/>
</ImageListItem>
You need to change flex-grow attributes of both MuiImageListItemBar-titleWrap and MuiImageListItemBar-actionIcon classes of ImageListItemBar like this:
sx={{
background: "transparent",
top: "5%",
"& .MuiImageListItemBar-titleWrap": {
flexGrow: 0
},
"& .MuiImageListItemBar-actionIcon": {
flexGrow: 1
}
}}
After that, you need to wrap your icons with a div and add desired style like this:
<div
style={{
display: "flex",
justifyContent: "space-between"
}}
>
... (action button icons here)
</div>
You can take a look at this sandbox for a live working example of this solution.
On my test branch I can get this to work just fine, but when I try to add it to my partners work, it will map just fine but when I add the .filter with the following line .includes(query.toLowerCase()) like below, The page will load for 1/2 a second and then instantly go blank. I get an error in the console saying:
"Uncaught TypeError: query.toLowerCase is not a function"
< BasicModal />
<input
autoFocus={true}
onChange={event => setQuery(event.target.value)} placeholder="Search...">
</input>
</div>
<br />
<hr />
<div>
{
wikiData.filter(data =>{
if(query === ''){
return data;
} else if (data.title.toLowerCase().includes(query.toLowerCase())) {
return data;
} else if (data.body.toLowerCase().includes(query.toLowerCase())) {
return data;
}
}).map((data, index) => (
<div key={data.id}
ref={refs[data.id]}
style={{ height: 'flex', paddingLeft: '5%', paddingRight: '5%' }}>
<h1 style={{ fontSize: 24, fontWeight: "bold", textAlign: "center" }}>{data.title}</h1>
<div style={{ textAlign: "center", paddingBottom: "10px", Top: "-5px!important" }}>
<Tooltip title="Edit Content">
<EditIcon data-id={data.id} fontSize='large' color='action' style={{ paddingRight: "10px", cursor: "pointer" }} onClick={() => handleEdit(data, index)} />
</Tooltip>
<Tooltip title="Save Edit">
<Check data-id={data.id} fontSize='large' color='success' style={{ paddingRight: "10px", cursor: "pointer" }} onClick={() => saveEdit(data, index)} />
</Tooltip>
<Tooltip title="Delete Post">
<CloseIcon fontSize='large' color='error' style={{ cursor: "pointer" }} />
</Tooltip>
</div>
<div id={data.id} className="wiki-unedited" onChange={handleChange} value={data.body} >{data.body}</div>
<hr style={{ paddingLeft: "10%", paddingRight: "10%", width: "80%" }} />
</div>
))}
</div>
</Grid>
</Grid>
</div>
I figured it out... I didnt post it all to make it solvable either.. I had the state variable set to an array instead of a string...
I put the key prop to parent component but it gives unique key error. Even I put the key props to every element still getting this error. How can I fix this problem?
{orders &&
orders.slice(0).reverse().map((order) =>
order.order_type === 'PickupOrders' &&
<Row key={uuidv4()} align="middle" style={{ height: '6vh', borderBottom: '1px solid #e6ebe7' }} justify="center" >
<Col span={9} key={uuidv4()} >
<p key={uuidv4()} style={{ marginBottom: 'auto', marginTop: 'auto' , textAlign:'center'}}>{order.customer_fullname}</p>
</Col>
<Col span={9} key={uuidv4()}>
<p key={uuidv4()} style={{ marginBottom: 'auto', marginTop: 'auto' , textAlign:'center'}} >{order.order_status}</p>
</Col>
<Col span={6} key={uuidv4()}>
<p key={uuidv4()} style={{ marginBottom: 'auto', marginTop: 'auto' , textAlign:'center'}} >{order.total_price}</p>
</Col>
</Row>
)}
{counter > 0 &&
_.times( counter , (i) => (
<div style={{ height: '6vh', borderBottom: '1px solid #e6ebe7' }} >
<Dropdown
key={uuidv4()}
overlay={menu( PickUpOrder(orders, counter - i), openModalFunc)}
placement='bottomCenter'
trigger={['click']}
>
<IconButton
color='primary'
aria-label='add an alarm'
>
<MoreVertIcon />
</IconButton>
</Dropdown>
</div>
))
}
The first part looks fine. When you map or _.times in order to iterate arrays or array of objects, key attribute should be in top tag. In your case;
_.times( counter , (i) => (
<div style={{ height: '6vh', borderBottom: '1px solid #e6ebe7' }} key={uuidv4()}> {/* <---- */}
<Dropdown
overlay={menu( PickUpOrder(orders, counter - i), openModalFunc)}
placement='bottomCenter'
trigger={['click']}
> ...
I hope it works fine.
I'm new to material UI framework, i want to stretch the grid accordingly displayed in the content. I couldn't able to do that. Can anyone help me in this?
<Card>
<CardHeader
avatar={<Avatar aria-label="recipe">S</Avatar>}
title={
<>
<InputBase placeholder="Search Google Maps" margin="normal" />
<IconButton type="submit" aria-label="search">
<SearchIcon />
</IconButton>
</>
}
/>
<Divider />
<CardContent
style={{ overflow: "scroll" }}
className={classes.contentHeight}
id="chatList"
>
<div>
<Message isSender content="Hello" />
{this.state.data.map(item => {
if (item.isSender) {
return (
<Message isSender name="Sanjana" content={item.content} />
);
}
return <Message name="Sanjana" content={item.content} />;
})}
</div>
</CardContent>
<Divider />
<CardActions>
<Paper className={classes.contentPaper}>
<Input
margin="dense"
className={classes.input}
placeholder="Enter a Message"
disableUnderline
/>
</Paper>
</CardActions>
</Card>
Can anyone help me in this query?
Thanks in advance!
Remove width: 100
<Card
style={{
backgroundColor: "#eee",
float: isSender ? "right" : "left",
padding: 16,
minHeight: 40,
width: 100,
display: "flex",
alignItems: "center",
textAlign: "center"
}}
>
{content}
</Card>
should be
<Card
style={{
backgroundColor: "#eee",
float: isSender ? "right" : "left",
padding: 16,
minHeight: 40,
display: "flex",
alignItems: "center",
textAlign: "center"
}}
>
{content}
</Card>
because the width: 100 gives it a width of 100px.
To make the content to stretch full width, you can use width: "fit-content" and assign your width value of 100 to minWidth: 100.
So your card will look like,
<Card
style={{
backgroundColor: "#eee",
float: isSender ? "right" : "left",
padding: 16,
diaplay: "block",
minHeight: 40,
width: "fit-content",
minWidth: 100,
display: "flex",
alignItems: "center",
textAlign: "center"
}}
>
To make the content left align inside card, you can assign style to Grid like,
<Grid style={{ paddingBottom: 8, textAlign: "left" }} item xs={12}>
<span>{name}</span>
</Grid>
Forked sandbox
vertical grouped bar chart of dynamic columns using react-vis
the output using react-vis vertical bar
Expected output
<XYPlot
xType={chartData['type']}
width={width}
height={height}>
<VerticalGridLines style={gridLineStyle} />
<HorizontalGridLines style={gridLineStyle} />
<XAxis tickLabelAngle={xAxisAngle} style={tickStyle} tickFormat={chartData['type'] == 'linear' ? tick => this.formatNumber(tick) : null} />
<YAxis tickLabelAngle={yAxisAngle} style={tickStyle} tickFormat={tick => this.formatNumber(tick)} />
<ChartLabel
text={chartData['name']}
className="alt-x-label"
includeMargin={false}
xPercent={0.5}
yPercent={1.18}
style={{
fontWeight: 'bold',
textAnchor: 'middle',
fontSize: "12px",
fill: "#6b6b76",
fontFamily: "sans-serif"
}}
/>
<ChartLabel
text={'No. of variants'}
className="alt-y-label"
includeMargin={false}
xPercent={-0.02}
yPercent={0.5}
style={{
transform: 'rotate(-90)',
fontWeight: 'bold',
textAnchor: 'middle',
fontSize: "12px",
fill: "#6b6b76",
fontFamily: "sans-serif"
}}
/>
{hoveredNode && (
<Hint value={hoveredNode}>
<div style={{ background: '#000000' }}>
<p style={{ fontSize: "10px", padding: "3px", color: '#ffffff' }}>{`${hoveredNode.y} variants with ${chartData['name']} of ${hoveredNode.x}`}</p>
</div>
</Hint>
)}
<BarSeries data={A} />
<BarSeries data={C} />
<BarSeries data={G} />
<BarSeries data={T} />
</XYPlot>
I get three 3 bars but there is always one fourth empty bar. Which is not needed. Any suggestion would be helpful. Thanks