Topic: Avoid MDBRow Overflow

afshinshahpari@gmail.com free asked 5 years ago

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; }

}

Add comment

Anna Morawska staff answered 5 years ago

0 0 Best answer

Hi there,

Referring to your first question - please try to use MDBCol component as a child of MDBRow. Check out this code and the <a href="https://mdbootstrap.com/docs/react/layout/grid-examples/" target="_blank">grid</a> documentation. If you have any further questions, post them here, but please attach a working example.

<pre class="prettyprint"><code>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>

</MDBContainer>
 );
}

export default gridExamplesPage;
</code></pre>

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 :

<pre class="prettyprint"><code>@media (min-width: 576px) { ... }
</code></pre>

Best,
Ania

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: 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

afshinshahpari@gmail.com

100Support score
16Questions 2Answers 1Snippets