5

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="bootstrap@4.0.5" 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="bootstrap@4.0.5" 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?

WebDevBooster
  • 14,674
  • 9
  • 66
  • 70
Nathan Lepori
  • 63
  • 1
  • 8

1 Answers1

7

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="bootstrap@4.0.5" 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="bootstrap@4.0.5" 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>
Lars
  • 3,022
  • 1
  • 16
  • 28