ListGroup with scroll

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!!

Add comment

Anna Morawska staff answered 5 years ago

0 0 Best answer

Hello,

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

<pre class="prettyprint"><code>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">
 Proyecto W
 Energia
 Subcategoria A
 </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">
 Proyecto W
 Energia
 Subcategoria A
 </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">
 Proyecto W
 Energia
 Subcategoria A
 </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">
 Proyecto W
 Energia
 Subcategoria A
 </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">
 Proyecto W
 Energia
 Subcategoria A
 </MDBCol>
 <MDBCol md="3">
 <MDBBtn color="blue" size="sm" className="mr-4">
 Entrar
 </MDBBtn>
 </MDBCol>
 </MDBRow>
 </MDBListGroupItem>
 </MDBListGroup>
 </MDBScrollbar>
 </MDBCard>
 </MDBCol>
 );
 }
}

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

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

<pre class="prettyprint"><code>.list-group-item:focus, .list-group-item:hover{
 z-index: 0;
}
</code></pre>

Please insert min. 20 characters.

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

Add comment

Closed

This topic is closed.

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

gllermaly

281Support score
18Questions 18Answers 0Snippets