I'm trying to do a products carousel with Slick and Bootstrap, but slick is removing Bootstrap nature of equalling heights as you can see in the screenshots:
https://imgur.com/QuzSIys ( without slick )
https://imgur.com/9P3sIJO ( with slick carousel )
Already tried a solution with JQuery and calcs but didn't work as expected, as shown in the next screenshots. ( I'm talking about this solution: Equal Height Bootstrap Cards within Slick Carousel )
https://imgur.com/RnlTaJr ( The height is so long and not in the bigger content max )
CAROUSEL CODE:
<Container className={'mt-2 mb-3'}>
<h3>{props.category}</h3>
<Row>
<Slider {...carouselSettings}>
{
products.map((product)=>{
return(
<Col className="col text-center">
<ProductCard title={product.title} description={product.description} image={product.image} />
</Col>
)
})
}
</Slider>
</Row>
</Container>
CARD COMPONENT CODE:
<Card className={'mh-100 h-100'}>
<div className={'wrapper'}>
<Card.Img className="img-fluid mh-100" variant="top" src={props.image} />
</div>
<Card.Body >
<Card.Title>{props.title}</Card.Title>
<Card.Text>
{props.description}
</Card.Text>
<Button variant="outline-primary" style={{marginRight: '10px'}}>Ver Mais</Button>
<Button variant="outline-success">Carrinho</Button>
</Card.Body>
</Card>
HOME CODE:
<>
<Header/>
<div className={'container mt-2'} style={{minHeight: 'calc(100vh - 380px)'}}>
<OffersCarousel/>
<ProductsCarousel category={'Lançamentos'}/>
</div>
<Footer/>
</>
Please any suggestion or fix to this or something that is not clear on this question tell me!
Related
I have a React-Bootstrap Card component that I'm making. I'd like the content in the <Card.Body> to flow from left to right, similar to an HStack in SwiftUI. Currently, the content renders vertically. Is there any way to change this? Below is my code.
function TestCard(props) {
return (
<Card>
<Card.Img />
<Card.Body>
<Card.Title className="fw-bold">Card Title</Card.Title>
<div className="vr" />
<Card.Text>Card Text</Card.Text>
</Card.Body>
</Card>
);
}
I'm using Material UI Grid to make an image grid and I'm trying to get rid of the empty spaces between some grid items. I've tried changing the alignitems and justify values of the container, but it didn't work.
See image.
return <Grid container alignItems="flex-start" justify="center" className="img-container" spacing={2}>
{/* All images */}
{docs && docs
.map(image => (
// In a grid item
<Grid className="img-item" item key={image.id} xs={12} md={6} lg={4}>
{/* all accounts */}
{docs2 && docs2
.filter((user) => image.userID === user.userID)
.map(user => (
<div key={image.id} className="div">
<img src={image.url} alt="uploaded pic" />
<Typography variant="subtitle1"> By {user.userName}
{/* Delete button only renders if currentUser.uid === image.userID*/}
{handleButton(image.userID) &&
<IconButton
color="secondary" aria-label="delete image"
onClick={() => handleDeleteImage(image.id,
image.userID, image.name)}
component="span" >
<DeleteForever />
</IconButton>}
</Typography>
</div>
))}
</Grid>
))}
</Grid>
}
The problem is the Grid container, Grid item takes the size of its content in that case its image, but the Grid container takes the size of the Larger Grid item in your case the first Grid item that's why the following Grids have spaces below.
In your case, dealing with list of images you should use GridList component not Grid.
Follow this link for more details about it https://material-ui.com/components/grid-list/
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"
/>
I want the card header to be the normal text together with an image, side by side.
import logo from './images/logo.svg';
render() {
return (
<div>
<Card>
<Card.Content className='left aligned'>
<div className="two column headers">
<Card.Header>Hello World!</Card.Header>
<Image src={logo} size='tiny'/>
</div>
<Card.Meta>Item</Card.Meta>
<Card.Meta>Category</Card.Meta>
</Card.Content>
<Card.Content>
<Card.Description>10 units of test.</Card.Description>
</Card.Content>
</Card>
</div>
);
The image is appearing just after the 'Hello World!' header. How can I put them side by side, left aliging the text and right aligning the image ?
You can do this with CSS, however I will recomend to use Grid there.
<Card.Header>
<Grid>
<Grid.Column width={12}>Hello World!</Grid.Column>
<Grid.Column width={4}>
<Image src={logo} size='tiny'/>
</Grid.Column>
</Grid>
</Card.Header>
By the way, if you want to have an Image component on left, you can use Header component, see examples.
I have the following React code:
render() {
return (
<NavItem dropdown toggleOnHover className='collapse-left'>
<DropdownButton nav>
<Icon bundle='fontello' glyph='bullhorn' />
{this.getBadge()}
</DropdownButton>
<Menu alignRight ref='bullhorn-menu' id='notifications-menu' className='double-width' alwaysInactive>
<MenuItem header>
<Entity entity='Notifications' />
</MenuItem>
{this.state.notifications.map((item, index) => {
return (
<Notification notification={item} key={index} />
)
})}
<MenuItem noHover>
<Grid collapse style={{marginBottom: -10}}>
<Row>
<Col xs={12} collapseLeft collapseRight>
<Button block className='notification-footer-btn left-btn'>MARK ALL READ</Button>
</Col>
</Row>
</Grid>
</MenuItem>
</Menu>
</NavItem>
)
}
The code above doesn't work, because it throws:
react-with-addons.js:9729 Uncaught TypeError: Cannot read property 'toUpperCase' of undefined
However, when I surround the map() statement with a div, it works, but that breaks the layout.
The Notification component just returns something like this:
<MenuItem href='/'>
<Grid>
<Row>
<Col xs={2} className='avatar-container' collapseRight>
<div><img src='/imgs/avatars/avatar22.png' width='40' height='40' alt='sarah_patchett' /></div>
<div className='text-center'>
<BLabel bsStyle='info'>NEW</BLabel>
</div>
</Col>
<Col xs={10} className='notification-container' collapseLeft collapseRight>
<div className='time'>
<strong className='fg-darkgray50'><Icon bundle='fontello' glyph='chat-5'/><em><Entity entity='notificationsTimeFirst' /></em></strong>
</div>
<div className='message-header'>
<strong className='fg-darkgreen45'>Sarah Patchett sent you a private message</strong>
</div>
<div className='message-details fg-text'>
<span>{"Hey Anna! Sorry for delayed response. I've just finished reading the mail you sent couple of days ago..."}</span>
</div>
</Col>
</Row>
</Grid>
</MenuItem>
Can someone tell me how to just loop over my array and render the Notification component, without the surrounding div?
Currently it is not possible to return multiple components like that, so you need to wrap them in something.
Why don't you just change the style of the container so that it doesn't break the layout?
For example:
<div style={{ display: "inline" }}>
{this.state.notifications.map((item, index) => {
return (
<Notification notification={item} key={index} />
)
})}
</div>
Alternatively, you could do this:
let menuItems = [
<MenuItem header key="header">
<Entity entity='Notifications' />
</MenuItem>
].concat(notifications);
return <Menu>
{ menuItems }
</Menu>;
Now the contents of the menu is an array, so every item needs a key.