Topic: Separator between list-inline elements
Grzegorz Bujański staff answered 4 years ago
The inline-list does not provide such a separator. You can add it yourself by adding some css code, e.g .:
.list-inline-item:not(:last-child):after {
content:" ";
margin: 0 .5rem;
position: absolute;
height: 1rem;
top: 4px;
bottom: 0;
width: 1px;
background: #666666;
}
pawled commented 4 years ago
Can you attach similar example for vertical list (how to change its style)?
Grzegorz Bujański staff answered 4 years ago
For the vertical list there is a ready example:: https://mdbootstrap.com/docs/standard/components/list-group/#section-flush
If you want to change this example and apply the solution I gave for llist-inline you can modify the styles:
.list-group-flush > .list-group-item {
border-width: 0;
}
.list-group-flush > .list-group-item:not(:last-child):after {
content:" ";
position: absolute;
height: 1px;
bottom: 0;
width: 100%;
left: 1rem;
background: #666666;
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: 3.0.0
- Device: Any
- Browser: Any
- OS: Any
- Provided sample code: No
- Provided link: No
Grzegorz Bujański staff commented 4 years ago
What separator do you mean? Do you mean commas or vertical line between list items?
pawled commented 4 years ago
Exactly. Pipes that are invisible to the text selection tool.