Topic: ListGroup: Weird behavior when adding .active class

Benjamin Kasten free asked 2 years ago


*Expected behavior*I implemented a ListGroup with the option to click on an entry and make it active by adding the .active class. When I change the active status from one entry to another, the list length increses by like 1 pixel and then goes back to the previous length (Actually, just the toggled items change their height). You can see the same effect on the example https://mdbootstrap.com/docs/standard/components/list-group/#section-javaScript-behavior.

*Actual behavior*I would like to have no change in height when toggling the active class. How can this be accomplished?

*Resources (screenshots, code snippets etc.)*See you example in the documentation: https://mdbootstrap.com/docs/standard/components/list-group/#section-javaScript-behavior


Dawid Wajszczuk staff answered 2 years ago


Hi,

Add this CSS:

.list-group-item+.list-group-item.active {
    margin-top: 0px;
}

Here is the snippet https://mdbootstrap.com/snippets/standard/d-wajszczuk/3886098.

Keep coding,
Dawid



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

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 4.0.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes