Parallax height doesn't do anything


Topic: Parallax height doesn't do anything

ppotter10 asked a year ago

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 a year 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 a year ago

I was not aware of that. Thanks!


Jakub Chmura staff premium commented a year ago

@ppotter10, You're welcome, Kuba


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: React
  • MDB Version: 4.23.1
  • Device: any
  • Browser: Chrome
  • OS: any
  • Provided sample code: No
  • Provided link: Yes
Tags