Separator between list-inline elements


Topic: Separator between list-inline elements

pawled asked 4 years ago

How to put separators into list-inline class?


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.


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

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • 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
Tags
css