Classicform example not responsive


Topic: Classicform example not responsive

Denzil pro premium asked 8 months ago

Expected behavior Be responsive on mobile devices

Actual behavior Not responsive, MDBView with text on the left and form on the right are not visible with negative top margins.

Take https://react.mdbootstrap.com/sections/classicform as an example, but looks like most of the examples from section are affected.

Same examples with jQuery work just fine.

Resources (screenshots, code snippets etc.) I can't attached the screenshot.


Jakub Chmura staff premium answered 8 months ago

Hi @Denzil,

Thank you for founded bug!  

We will try to fix it as soon as possible.  

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

Best Regards,  

Kuba


Denzil pro premium commented 8 months ago

Great, thanks! Please keep me posted.


Jakub Chmura staff premium commented 8 months ago

Ok, if something will change I will inform you.

Best


Denzil pro premium commented 8 months ago

Hi Jakub,

I have done some more testing and I think the issue is wider then just this example. I'm not entirely sure but looks like the issue is with the grid system when width is set to 100vh;

I compared all examples from section on React to same on jQuery and only React components are not aligning properly with different media queries, all jQuery examples work fine


Jakub Chmura staff premium commented 8 months ago

@Denzil,

Thank you very much for your feedback! 

We are currently working on this issue. Your comments will help us solve the problem.

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

Best Regards, Kuba


Denzil pro premium answered 8 months ago

Hi Kuba,

Do you have ETA for a fix, we are trying to build the page based on this example and/or grid components and its not correctly breaking on breakpoints and not responsive. Thanks.


Jakub Chmura staff premium commented 8 months ago

Hi,

this problem seems to be more complicated than we thought. We are currently working on this issue, and we do our best to fix it as soon as possible.

We will try to push changes on the closest release, but I can't promise that will happen.

Best, Kuba


Denzil pro premium commented 8 months ago

Ok, thanks for an update.


Jakub Chmura staff premium answered 8 months ago

@Denzil,

We just solve this problem, You need to add additional style to this template.

JSX:

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import {
  MDBNavbar,
  MDBNavbarBrand,
  MDBNavbarNav,
  MDBNavItem,
  MDBNavLink,
  MDBNavbarToggler,
  MDBCollapse,
  MDBMask,
  MDBRow,
  MDBCol,
  MDBBtn,
  MDBView,
  MDBContainer,
  MDBFormInline,
  MDBCard,
  MDBCardBody,
  MDBInput
} from 'mdbreact';
import './ContactFormPage.css';

class ContactFormPage extends React.Component {
  state = {
    collapseID: ''
  };

  toggleCollapse = collapseID => () =>
    this.setState(prevState => ({
      collapseID: prevState.collapseID !== collapseID ? collapseID : ''
    }));

  componentDidMount() {
    document.querySelector('nav').style.height = '65px';
  }

  componentWillUnmount() {
    document.querySelector('nav').style.height = 'auto';
  }

  render() {
    const { collapseID } = this.state;
    const navStyle = { marginTop: '65px' };
    const overlay = (
      <div
        id='sidenav-overlay'
        style={{ backgroundColor: 'transparent' }}
        onClick={this.toggleCollapse('navbarCollapse')}
      />
    );
    return (
      <div id='contactformpage'>
        <Router>
          <div>
            <MDBNavbar
              style={navStyle}
              color='deep-purple darken-4'
              dark
              expand='md'
              fixed='top'
              scrolling
              transparent
            >
              <MDBContainer>
                <MDBNavbarBrand>
                  <strong className='white-text'>MDB</strong>
                </MDBNavbarBrand>
                <MDBNavbarToggler
                  onClick={this.toggleCollapse('navbarCollapse')}
                />
                <MDBCollapse id='navbarCollapse' isOpen={collapseID} navbar>
                  <MDBNavbarNav left>
                    <MDBNavItem active>
                      <MDBNavLink to='#!'>Home</MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink to='#!'>Link</MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink to='#!'>Profile</MDBNavLink>
                    </MDBNavItem>
                  </MDBNavbarNav>
                  <MDBNavbarNav right>
                    <MDBNavItem>
                      <MDBFormInline waves>
                        <div className='md-form my-0'>
                          <input
                            className='form-control mr-sm-2'
                            type='text'
                            placeholder='Search'
                            aria-label='Search'
                          />
                        </div>
                      </MDBFormInline>
                    </MDBNavItem>
                  </MDBNavbarNav>
                </MDBCollapse>
              </MDBContainer>
            </MDBNavbar>
            {collapseID && overlay}
          </div>
        </Router>

        <MDBView>
          <MDBMask overlay='indigo-strong' />
          <MDBContainer
            style={{ height: '100%', width: '100%', paddingTop: '10rem' }}
            className='d-flex justify-content-center align-items-center'
          >
            <MDBRow>
              <div className='white-text text-center text-md-left col-md-6 mt-xl-5 mb-5'>
                <h1 className='display-4 font-weight-bold'>Lorem ipsum </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
                  iste.
                </h6>
                <MDBBtn outline color='white'>
                  Learn More
                </MDBBtn>
              </div>
              <MDBCol md='6' xl='5' className='mb-4'>
                <MDBCard className='dark-grey-text'>
                  <MDBCardBody className='z-depth-2'>
                    <h3 className='dark-grey-text text-center'>
                      <strong>Write to us:</strong>
                    </h3>
                    <hr />
                    <MDBInput label='Your name' icon='user' />
                    <MDBInput label='Your email' icon='envelope' />
                    <MDBInput
                      label='Your message'
                      icon='pencil-alt'
                      type='textarea'
                      rows='3'
                    />
                    <div className='text-center mt-3 black-text'>
                      <MDBBtn color='indigo'>Send</MDBBtn>
                      <hr />
                      <MDBInput
                        type='checkbox'
                        id='checkbox'
                        label='Subscribe me to the newsletter'
                      />
                    </div>
                  </MDBCardBody>
                </MDBCard>
              </MDBCol>
            </MDBRow>
          </MDBContainer>
        </MDBView>

        <MDBContainer>
          <MDBRow className='py-5'>
            <MDBCol md='12' className='text-center'>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>
            </MDBCol>
          </MDBRow>
        </MDBContainer>
      </div>
    );
  }
}

export default ContactFormPage;

CSS:

#contactformpage .view {
  background-image: url('https://mdbootstrap.com/img/Photos/Others/images/89.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  min-height: 100vh;
}

#contactformpage h6 {
  line-height: 1.7;
}

#contactformpage .form-check {
  margin-bottom: 0 !important;
}

#contactformpage i {
  color: #9e9e9e !important;
}

Best, Kuba


Denzil pro premium commented 7 months ago

Thanks, just saw the comment., for some reason didn't get notification. I'll check it.


Jakub Chmura staff premium commented 7 months ago

Let us know if this solution has solved your problem.

Best.


Denzil pro premium answered 7 months ago

All good now!

Thanks very much for help.


Jakub Chmura staff premium commented 7 months ago

You're welcome!


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: React
  • MDB Version: 4.25.0
  • Device: MacBook
  • Browser: Safari
  • OS: MacOsx
  • Provided sample code: No
  • Provided link: Yes
Tags