why MDBMask renders behind MDBCarousel in MDBView?


Topic: why MDBMask renders behind MDBCarousel in MDBView?

mirana asked 2 years ago

Question: why MDBMask renders behind MDBCarousel in MDBView while it's working fine with img element?

Expected behavior: show same mask on each carousel item.

Actual behavior: show mask behind items.

Resources:

import React from "react";
import {MDBMask, MDBRow, MDBCol, MDBIcon, MDBBtn, MDBView, MDBContainer, MDBCard, MDBCardBody, MDBInput, MDBAnimation, MDBCarousel, MDBCarouselInner, MDBCarouselItem} from "mdbreact";
import "../../../templates/HomePage/Home.css";

class Home extends React.Component {

  render() {

const homeMask = (
    <MDBMask className="d-flex justify-content-center align-items-center gradient">
      <MDBContainer>
        <MDBRow>
          <MDBAnimation
            type="fadeInLeft"
            delay=".3s"
            className="white-text text-center text-md-left col-md-6 mt-xl-5 mb-5"
          >
            <h1 className="h1-responsive font-weight-bold">
              Sign up right now!
            </h1>
            <hr className="hr-light" />
            <h6 className="mb-4">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
              Rem repellendus quasi fuga nesciunt dolorum nulla magnam
              veniam sapiente, fugiat! Commodi sequi non animi ea dolor
              molestiae, quisquam iste, maiores. Nulla.
            </h6>
            <MDBBtn outline color="white">
              Learn More
            </MDBBtn>
          </MDBAnimation>

          <MDBCol md="6" xl="5" className="mb-4">
            <MDBAnimation type="fadeInRight" delay=".3s">
              <MDBCard id="classic-card">
                <MDBCardBody className="white-text">
                  <h3 className="text-center">
                    <MDBIcon icon="user" /> Register:
                  </h3>
                  <hr className="hr-light" />
                  <MDBInput
                    className="white-text"
                    iconClass="white-text"
                    label="Your name"
                    icon="user"
                  />
                  <MDBInput
                    className="white-text"
                    iconClass="white-text"
                    label="Your email"
                    icon="envelope"
                  />
                  <MDBInput
                    className="white-text"
                    iconClass="white-text"
                    label="Your password"
                    icon="lock"
                    type="password"
                  />
                  <div className="text-center mt-4 black-text">
                    <MDBBtn color="indigo">Sign Up</MDBBtn>
                    <hr className="hr-light" />
                    <div className="text-center d-flex justify-content-center white-label">
                      <a href="#!" className="p-2 m-2">
                        <MDBIcon
                          fab
                          icon="twitter"
                          className="white-text"
                        />
                      </a>
                      <a href="#!" className="p-2 m-2">
                        <MDBIcon
                          fab
                          icon="linkedin"
                          className="white-text"
                        />
                      </a>
                      <a href="#!" className="p-2 m-2">
                        <MDBIcon
                          fab
                          icon="instagram"
                          className="white-text"
                        />
                      </a>
                    </div>
                  </div>
                </MDBCardBody>
              </MDBCard>
            </MDBAnimation>
          </MDBCol>
        </MDBRow>
      </MDBContainer>
    </MDBMask>
)

return (
    <MDBView>
      <MDBCarousel
      activeItem={1}
      length={3}
      showControls={true}
      showIndicators={true}
      className="z-depth-1"
      >
        <MDBCarouselInner>
          <MDBCarouselItem itemId="1">
            <MDBView>
              <img
                className="d-block w-100"
                src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg"
                alt="First slide"
              />
            </MDBView>
          </MDBCarouselItem>
          <MDBCarouselItem itemId="2">
            <MDBView>
              <img
                className="d-block w-100"
                src="https://mdbootstrap.com/img/Photos/Slides/img%20(129).jpg"
                alt="Second slide"
              />
            </MDBView>
          </MDBCarouselItem>
          <MDBCarouselItem itemId="3">
            <MDBView>
              <img
                className="d-block w-100"
                src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg"
                alt="Third slide"
              />
            </MDBView>
          </MDBCarouselItem>
        </MDBCarouselInner>
      </MDBCarousel>
      {homeMask}
    </MDBView>
);
}
}

export default Home;

please note that I cannot use this mask for each carousel item separately cause it's a login form.


Jakub Chmura staff premium answered 2 years ago

Hi, @mirana,

You need to add to your MDBContainer inside MDBMask thezIndex style.

Here is an example.

import React from 'react';
import {
  MDBMask,
  MDBRow,
  MDBCol,
  MDBIcon,
  MDBBtn,
  MDBView,
  MDBContainer,
  MDBCard,
  MDBCardBody,
  MDBInput,
  MDBAnimation,
  MDBCarousel,
  MDBCarouselInner,
  MDBCarouselItem
} from 'mdbreact';
import '../../../templates/HomePage/Home.css';

class Home extends React.Component {
  render() {
    const homeMask = (
      <MDBMask className='d-flex justify-content-center align-items-center gradient'>
        <MDBContainer style={{ zIndex: '1' }}>
          <MDBRow className='justify-content-center'>
            <MDBAnimation
              type='fadeInLeft'
              delay='.3s'
              className='white-text text-center text-md-left col-md-6 mt-xl-5 mb-5'
            >
              <h1 className='h1-responsive font-weight-bold'>
                Sign up right now!
              </h1>
              <hr className='hr-light' />
              <h6 className='mb-4'>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem
                repellendus quasi fuga nesciunt dolorum nulla magnam veniam
                sapiente, fugiat! Commodi sequi non animi ea dolor molestiae,
                quisquam iste, maiores. Nulla.
              </h6>
              <MDBBtn outline color='white'>
                Learn More
              </MDBBtn>
            </MDBAnimation>

            <MDBCol md='6' xl='5' className='mb-4'>
              <MDBAnimation type='fadeInRight' delay='.3s'>
                <MDBCard id='classic-card'>
                  <MDBCardBody className='white-text'>
                    <h3 className='text-center'>
                      <MDBIcon icon='user' /> Register:
                    </h3>
                    <hr className='hr-light' />
                    <MDBInput
                      className='white-text'
                      iconClass='white-text'
                      label='Your name'
                      icon='user'
                    />
                    <MDBInput
                      className='white-text'
                      iconClass='white-text'
                      label='Your email'
                      icon='envelope'
                    />
                    <MDBInput
                      className='white-text'
                      iconClass='white-text'
                      label='Your password'
                      icon='lock'
                      type='password'
                    />
                    <div className='text-center mt-4 black-text'>
                      <MDBBtn color='indigo'>Sign Up</MDBBtn>
                      <hr className='hr-light' />
                      <div className='text-center d-flex justify-content-center white-label'>
                        <a href='#!' className='p-2 m-2'>
                          <MDBIcon fab icon='twitter' className='white-text' />
                        </a>
                        <a href='#!' className='p-2 m-2'>
                          <MDBIcon fab icon='linkedin' className='white-text' />
                        </a>
                        <a href='#!' className='p-2 m-2'>
                          <MDBIcon
                            fab
                            icon='instagram'
                            className='white-text'
                          />
                        </a>
                      </div>
                    </div>
                  </MDBCardBody>
                </MDBCard>
              </MDBAnimation>
            </MDBCol>
          </MDBRow>
        </MDBContainer>
      </MDBMask>
    );

    return (
      <MDBView>
        <MDBCarousel
          activeItem={1}
          length={3}
          showControls={true}
          showIndicators={true}
          className='z-depth-1'
        >
          <MDBCarouselInner>
            <MDBCarouselItem itemId='1'>
              <MDBView>
                <img
                  className='d-block w-100'
                  src='https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg'
                  alt='First slide'
                />
              </MDBView>
            </MDBCarouselItem>
            <MDBCarouselItem itemId='2'>
              <MDBView>
                <img
                  className='d-block w-100'
                  src='https://mdbootstrap.com/img/Photos/Slides/img%20(129).jpg'
                  alt='Second slide'
                />
              </MDBView>
            </MDBCarouselItem>
            <MDBCarouselItem itemId='3'>
              <MDBView>
                <img
                  className='d-block w-100'
                  src='https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg'
                  alt='Third slide'
                />
              </MDBView>
            </MDBCarouselItem>
          </MDBCarouselInner>
        </MDBCarousel>
        {homeMask}
      </MDBView>
    );
  }
}

export default Home;

Best, Kuba


mirana answered 2 years ago

It just solved the problem, thank you :)


Jakub Chmura staff premium commented 2 years ago

You're welcome :).

If there is anything else I could do for you do not hesitate to ask me. I'll be happy to help you.

Best, Kuba


FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.24.0
  • Device: laptop
  • Browser: Edge Chromium
  • OS: windows 10
  • Provided sample code: No
  • Provided link: No
Tags