Topic: Parallax height doesn't do anything
Expected behavior That parallax image height would be adjusted to value in the parameter.
Actual behavior Always is the same height size
Resources (screenshots, code snippets etc.)
https://mdbootstrap.com/snippets/react/ppotter10/1555598
If I change the height parameter, the image remains to have the same size.
Jakub Chmura staff premium answered 5 years ago
HI @ppotter10,
MDBParallax has min 600 px of height by default. If you want to set a lower height you need to use keepImg
property. Then you will be able to set any height and width that you want, but remember extremely large or small valueswill reduce the quality and performance of the component.
I prepared a small example based on your snippet:
import React, { Component } from 'react';
import 'mdbreact/dist/css/mdb.css';
import { MDBContainer, MDBParallax, MDBCol, MDBRow } from 'mdbreact';
class App extends Component {
render() {
return (
<>
<MDBContainer fluid>
<MDBParallax
image='https://mdbootstrap.com/img/Photos/Others/img%20%2844%29.jpg'
speed='0.8'
keepImg
height='10vh'
width='300px'
/>
</MDBContainer>
<MDBContainer className='mt-5'>
<MDBRow>
<MDBCol>
<h1>Some header that should be under it.</h1>
</MDBCol>
</MDBRow>
</MDBContainer>
</>
);
}
}
export default App;
Best, Kuba
ppotter10 commented 5 years ago
I was not aware of that. Thanks!
Jakub Chmura staff premium commented 5 years ago
@ppotter10, You're welcome, Kuba
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.23.1
- Device: any
- Browser: Chrome
- OS: any
- Provided sample code: No
- Provided link: Yes