Topic: ListGroup with scroll
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!!
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;
}
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- User: 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