Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Flex display on list group items causing incorrect spacing within #21584

Closed
lehresman opened this issue Jan 6, 2017 · 4 comments
Closed

Flex display on list group items causing incorrect spacing within #21584

lehresman opened this issue Jan 6, 2017 · 4 comments
Labels
css v4
Milestone
v4.0.0-beta

Comments

@lehresman
Copy link

I just upgraded my project to Alpha 6, and oddly a lot of the spacing seems to have been removed. The only thing I changed between these two screenshots is installing alpha.5 vs alpha.6 using npm (on my Angular 2.4.1 project). In the alpha.5 screenshot, I included bootstrap-flex, but had to change that to bootstrap for the alpha.6 screenshot because of the naming change. That's the only difference.

Here is a before and after:
spacing

Here is the HTML:

<div class="row">
  <div class="col-sm-7">

    ...

  </div>
  <div class="col-sm-5">

    <div class="card card-danger">
      <div class="card-header">
        <span class="font-weight-bold">27 Uncompleted Appointments</span>
      </div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item text-truncate">
          <i class="fa fa-calendar text-alert-red-color"></i>
          Mark  <b>Jacobs</b>  (Sally)
          <div class="text-muted text-small">Mon, Jan 1, 2017 - 8am-9:30am</div>
        </li>
        <li class="list-group-item text-truncate">
          <i class="fa fa-calendar text-alert-red-color"></i>
          Billy Bob <b>Thorton</b> (June)
          <div class="text-muted text-small">Mon, Jan 1, 2017 - 8am-9:30am</div>
        </li>
        <li class="list-group-item text-truncate">
          <i class="fa fa-calendar text-alert-red-color"></i>
          <b>1st Assembly of God</b> (John Smith)
          <div class="text-muted text-small">Mon, Jan 1, 2017 - 8am-9:30am</div>
        </li>
        <li class="list-group-item text-xs-center">
          <button class="btn btn-danger">See All 27 <i class="fa fa-caret-right"></i></button>
        </li>
      </ul>
    </div>

    <div class="card card-danger">
      <div class="card-header">
        <b>1 Pending Reservation</b>
      </div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">
          <i class="fa fa-calendar text-alert-red-color"></i>
          Mark <b>Jacobs</b> (Sally)
          <div class="text-muted text-small">Mon, Jan 8, 2017 - 11am-12:45pm</div>
        </li>
      </ul>
    </div>

  </div>
</div>
@lehresman
Copy link
Author

Notice event the spacing between the words is removed.

@mdo
Copy link
Member

mdo commented Jan 6, 2017

Yeah, we'll need to play with the flexbox styles here more. My hunch is that we'll need to remove display: flex from .list-group-items and apply is only when needed (e.g., the custom content section in the list group docs).

@mdo
Copy link
Member

mdo commented Jan 7, 2017

For the original issue between cards, I've removed the default margin-bottom from .cards (and other components). Rather than rely on some arbitrary default spacing. you can now pick exactly what you need with our spacing utilities.

@mdo mdo added this to the v4.0.0-beta milestone Jan 25, 2017
@mdo mdo changed the title spacing removed from most elements Flex display on list group items causing incorrect spacing within Jan 25, 2017
@nextgenthemes
Copy link
Contributor

I was about to post the same Issue. Since I created the pen already here is a pretty reduced test case.

What is the point for making list items flexbox? Not saying it does not has benefits, just curious.

This was referenced Mar 18, 2017
Closed
Closed
@mdo mdo closed this as completed in ec8c251 Mar 18, 2017
@mdo mdo mentioned this issue Mar 18, 2017
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css v4
Projects
None yet
Milestone
v4.0.0-beta
Development

No branches or pull requests
3 participants
@lehresman @mdo @nextgenthemes