CODEWITHSUNDEEP
csstwitter-bootstrapangular
Nathan Lepori
Nathan Lepori

Reputation: 63

Bootstrap 4 card-deck with wrapper element

I'm working with Angular (v4.3.1) and Bootstrap (v4.0.0-alpha.6). A template contains two subcomponents like so:

<div class="card-deck">
    <comp1></comp1>
    <comp2></comp2>
</div>

Both subcomponent's templates have as root element's class the .card Bootstrap class.

<div class="card">
    ...
</div>

This, once compiled results in the following HTML

<div class="card-deck">
    <comp1 _nghost-c3="">
        <div _ngcontent-c3="" class="card">
            ...
        </div>
    </comp1>
    <comp2 _nghost-c4="">
        <div _ngcontent-c4="" class="card">
            ...
        </div>
    </comp2>
</div>

The problem is that the .card-deck styling doesn't get applyed properly if there is an element wrapping the .card elements.

A Bootstrap only example, the problem is strictly related to Bootstrap css and not Angular obviously.

<!DOCTYPE html>
<html>

<head>
  <link data-require="[email protected]" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
  <script data-require="[email protected]" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <!--  Displayed properly  -->
  <div id="deck-without-wrapper" class="card-deck">
    <div class="card">
      <div class="card-block">
        <p>Card1</p>
      </div>
    </div>
    <div class="card">
      <div class="card-block">
        <p>Card2</p>
      </div>
    </div>
  </div>
  <br>

  <!--  NOT displayed properly  -->
  <div id="deck-with-wrapper" class="card-deck">
    <div id="wrapper1">
      <div class="card">
        <div class="card-block">
          <p>Card1</p>
        </div>
      </div>
    </div>
    <div id="wrapper2">
      <div class="card">
        <div class="card-block">
          <p>Card2</p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Anyone knows a way to get both the components structure and the styling working?

Upvotes: 5

Views: 2312

Answers (1)

Lars
Lars

Reputation: 3573

The wrappers are causing trouble because a div doesn't have any flex css properties, While the .card classes are using flex:1 0 0;

Option 1 (preferred): Apply the .card class to the angular host element wrapper, instead of the first child element.
I've not used angular, going by these docs you could set a class on the host element. Using @Component.host.

Or define some rules using angulars custom renderer. I can't advice you on the best approach, I lack the knowledge on angular.

In the end you would want to end up with <comp1 _nghost-c3="" class="card">

Option 2 (not very sane): Pretend that the wrappers are cards,
and style them like a card would be styled.
I would advice against this.
It can cause troubles in the long run. IE newer bootstrap versions could change the css styling, and you might forget to update these custom rules.

.card-deck > div {
  display: flex;
  flex: 1 0 0;
  flex-direction:column;
  
}

.card-deck > div:not(:last-child){
 margin-right:15px;
 }
 

.card-deck > div:not(:first-child)
{
margin-left:15px;
}
<!DOCTYPE html>
<html>

<head>
  <link data-require="[email protected]" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
  <script data-require="[email protected]" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <!--  Displayed properly  -->
  <div id="deck-without-wrapper" class="card-deck">
    <div class="card">
      <div class="card-block">
        <p>Card1</p>
      </div>
    </div>
    <div class="card">
      <div class="card-block">
        <p>Card2</p>
      </div>
    </div>
  </div>
  <br>

  <!--  NOT displayed properly  -->
  <div id="deck-with-wrapper" class="card-deck">
    <div id="wrapper1">
      <div class="card">
        <div class="card-block">
          <p>Card1</p>
        </div>
      </div>
    </div>
    <div id="wrapper2">
      <div class="card">
        <div class="card-block">
          <p>Card2</p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 7

Related Questions