Skip to content

proper styling list-group in collapsible panel #14711

Closed
@nereusz

Description

I would like to introduce small improvement to BS. I'm not very familiar with BS internal coding, so maybe somebody will apply this to BS.

First of all: it is possible to use .list-group instead of .panel-body in regular use (first column of sample).

Problem: making panels with accordion feature on panel-like elements. When I want to put .list-group instead of .panel-body, the appearance is broken (second column of example).

Then I played a little with CSS and prepared a little patch for this (third column). I added .add class at beginning to show example only in one column.

Here is this example: http://www.bootply.com/xia3cligxm

Please consider incorporating this to BS.

CSS that should be added:

.panel-heading + .collapsing > .list-group .list-group-item:first-child,
.panel-heading + .collapse > .list-group .list-group-item:first-child {
    border-top-width: 0;
}

.panel > .collapsing > .list-group .list-group-item,
.panel > .collapse > .list-group .list-group-item {
    border-radius: 0;
    border-width: 1px 0;
}

.panel > .collapsing > .list-group,
.panel > .collapse > .list-group {
    margin-bottom: 0;
}

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions