Avoid MDBRow Overflow


Topic: Avoid MDBRow Overflow

Hi, I would appreciate to have your advice regarding these items :

1) I have few MDBRows side by side and they have lots of MDBBButtons inside them. When I decrease screen width to see the results in smaller devices, the rows will overlap. How can I avoid overlap, I have mdbbcontainer with fluid and also I have tried all MDBBRows properties like top, start,etc but had no effect.

2) I read your document for breakpoints, but I didnt get how to use that in our source code? Do I have to add these in our css file ? how to use them in elements? Is there a sample project to show how it has been used in your component?

where we have to use @include media-breakpoint-up , @include media-breakpoint-down, @include media-breakpoint-only?

// Extra small devices (portrait phones, less than 576px) // No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up) @media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }

================================= @include media-breakpoint-up(xs) { ... } @include media-breakpoint-up(sm) { ... } @include media-breakpoint-up(md) { ... } @include media-breakpoint-up(lg) { ... } @include media-breakpoint-up(xl) { ... }

// Example usage: @include media-breakpoint-up(sm) { .some-class { display: block; }

}


Anna Morawska staff answered 6 years ago

Hi there,

Referring to your first question - please try to use MDBCol component as a child of MDBRow. Check out this code and the grid documentation. If you have any further questions, post them here, but please attach a working example.

import React from "react";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
import './index.css';

const gridExamplesPage = () => {
  return (
    <MDBContainer>
      <MDBRow>
        <MDBCol size="1">.col-1</MDBCol>
        <MDBCol size="1">.col-1</MDBCol>
        <MDBCol size="1">.col-1</MDBCol>
        <MDBCol size="1">.col-1</MDBCol>
        <MDBCol size="1">.col-1</MDBCol>
        <MDBCol size="1">.col-1</MDBCol>
        <MDBCol size="1">.col-1</MDBCol>
        <MDBCol size="1">.col-1</MDBCol>
        <MDBCol size="1">.col-1</MDBCol>
        <MDBCol size="1">.col-1</MDBCol>
        <MDBCol size="1">.col-1</MDBCol>
        <MDBCol size="1">.col-1</MDBCol>
      </MDBRow>

      <MDBRow>
        <MDBCol lg="2">.col-lg-2</MDBCol>
        <MDBCol lg="2">.col-lg-2</MDBCol>
        <MDBCol lg="2">.col-lg-2</MDBCol>
        <MDBCol lg="2">.col-lg-2</MDBCol>
        <MDBCol lg="2">.col-lg-2</MDBCol>
        <MDBCol lg="2">.col-lg-2</MDBCol>
      </MDBRow>

    </MDBContainer>
  );
}

export default gridExamplesPage;

Answering the second question - media queries in a form which you mentioned - "@include media-breakpoin..." - are available if you use SASS preprocessor to style your components. If not, use a regular media query, for example :

@media (min-width: 576px) { ... }

Best, Ania


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

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