Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

  1. MDB Home Page
  2. Support Main Page
  3. MDB React
Topic: ListGroup with scroll

gllermaly free asked 5 years ago

Hello, I have a dynamic list and I need to limit it and scroll if I have more than X elements or more than X height, cant fin a way to do it scrollable if this happens, could you help me? Was looking for something like "responsive" option in table.

This is the code :

             <MDBCol>
            <MDBCard>
              <MDBListGroup>
                <MDBListGroupItem>
                  <MDBRow>
                    <MDBCol md="4">Foto</MDBCol>
                    <MDBCol md="5">
                      <p>Proyecto W</p>
                      <p>Energia</p>
                      <p>Subcategoria A</p>
                    </MDBCol>
                    <MDBCol md="3">
                      <MDBBtn color="blue" size="sm" className="mr-4">
                        Entrar
                      </MDBBtn>
                    </MDBCol>
                  </MDBRow>
                </MDBListGroupItem>
                <MDBListGroupItem>
                  <MDBRow>
                    <MDBCol md="4">Foto</MDBCol>
                    <MDBCol md="5">
                      <p>Proyecto W</p>
                      <p>Energia</p>
                      <p>Subcategoria A</p>
                    </MDBCol>
                    <MDBCol md="3">
                      <MDBBtn color="blue" size="sm" className="mr-4">
                        Entrar
                      </MDBBtn>
                    </MDBCol>
                  </MDBRow>
                </MDBListGroupItem>
                <MDBListGroupItem>
                  <MDBRow>
                    <MDBCol md="4">Foto</MDBCol>
                    <MDBCol md="5">
                      <p>Proyecto W</p>
                      <p>Energia</p>
                      <p>Subcategoria A</p>
                    </MDBCol>
                    <MDBCol md="3">
                      <MDBBtn color="blue" size="sm" className="mr-4">
                        Entrar
                      </MDBBtn>
                    </MDBCol>
                  </MDBRow>
                </MDBListGroupItem>
                <MDBListGroupItem>
                  <MDBRow>
                    <MDBCol md="4">Foto</MDBCol>
                    <MDBCol md="5">
                      <p>Proyecto W</p>
                      <p>Energia</p>
                      <p>Subcategoria A</p>
                    </MDBCol>
                    <MDBCol md="3">
                      <MDBBtn color="blue" size="sm" className="mr-4">
                        Entrar
                      </MDBBtn>
                    </MDBCol>
                  </MDBRow>
                </MDBListGroupItem>
                <MDBListGroupItem>
                  <MDBRow>
                    <MDBCol md="4">Foto</MDBCol>
                    <MDBCol md="5">
                      <p>Proyecto W</p>
                      <p>Energia</p>
                      <p>Subcategoria A</p>
                    </MDBCol>
                    <MDBCol md="3">
                      <MDBBtn color="blue" size="sm" className="mr-4">
                        Entrar
                      </MDBBtn>
                    </MDBCol>
                  </MDBRow>
                </MDBListGroupItem>
              </MDBListGroup>
            </MDBCard>
          </MDBCol>

Thanks!!

Anna Morawska staff answered 5 years ago

Hello,

you can wrap your Listgroup with MDBScrollbar component. An example shown below:

import React, { Component } from "react";
import { MDBCol, MDBListGroupItem, MDBRow, MDBCard, MDBListGroup, MDBBtn, MDBScrollbar } from "mdbreact";
import "./index.css"

class SearchPage extends Component {

render() {
    return (
      <MDBCol>
      <MDBCard style={{height: "50vh"}}>
        <MDBScrollbar >
          <MDBListGroup>
            <MDBListGroupItem>
              <MDBRow>
                <MDBCol md="4">Foto</MDBCol>
                <MDBCol md="5">
                  <p>Proyecto W</p>
                  <p>Energia</p>
                  <p>Subcategoria A</p>
                </MDBCol>
                <MDBCol md="3">
                  <MDBBtn color="blue" size="sm" className="mr-4">
                    Entrar
                  </MDBBtn>
                </MDBCol>
              </MDBRow>
            </MDBListGroupItem>
            <MDBListGroupItem>
              <MDBRow>
                <MDBCol md="4">Foto</MDBCol>
                <MDBCol md="5">
                  <p>Proyecto W</p>
                  <p>Energia</p>
                  <p>Subcategoria A</p>
                </MDBCol>
                <MDBCol md="3">
                  <MDBBtn color="blue" size="sm" className="mr-4">
                    Entrar
                  </MDBBtn>
                </MDBCol>
              </MDBRow>
            </MDBListGroupItem>
            <MDBListGroupItem>
              <MDBRow>
                <MDBCol md="4">Foto</MDBCol>
                <MDBCol md="5">
                  <p>Proyecto W</p>
                  <p>Energia</p>
                  <p>Subcategoria A</p>
                </MDBCol>
                <MDBCol md="3">
                  <MDBBtn color="blue" size="sm" className="mr-4">
                    Entrar
                  </MDBBtn>
                </MDBCol>
              </MDBRow>
            </MDBListGroupItem>
            <MDBListGroupItem>
              <MDBRow>
                <MDBCol md="4">Foto</MDBCol>
                <MDBCol md="5">
                  <p>Proyecto W</p>
                  <p>Energia</p>
                  <p>Subcategoria A</p>
                </MDBCol>
                <MDBCol md="3">
                  <MDBBtn color="blue" size="sm" className="mr-4">
                    Entrar
                  </MDBBtn>
                </MDBCol>
              </MDBRow>
            </MDBListGroupItem>
            <MDBListGroupItem>
              <MDBRow>
                <MDBCol md="4">Foto</MDBCol>
                <MDBCol md="5">
                  <p>Proyecto W</p>
                  <p>Energia</p>
                  <p>Subcategoria A</p>
                </MDBCol>
                <MDBCol md="3">
                  <MDBBtn color="blue" size="sm" className="mr-4">
                    Entrar
                  </MDBBtn>
                </MDBCol>
              </MDBRow>
            </MDBListGroupItem>
        </MDBListGroup>
        </MDBScrollbar>
      </MDBCard>
    </MDBCol>
    );
  }
}

export default SearchPage;

You also have to override default CSS; otherwise, scrollbar doesn't render properly:

.list-group-item:focus, .list-group-item:hover{
  z-index: 0;
}

FREE CONSULTATION

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

Closed

Specification of the issue
  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.8.4
  • Device: PC
  • Browser: Chrome
  • OS: Ubuntu 18
  • Provided sample code: No
  • Provided link: No
Tags
list-group
About author
gllermaly
281Support score
18Questions 18Answers 0Snippets