How to set multiple columns with angular 4 and bootstrap 4?

Question

Context:

I'm trying to do a basic thing:

<container>
    <div class="row">
    <div class="col-3">
    ...
    </div>
    <div class="col-4">
    ...
    </div>
    <div class="col-5">
    ...
    </div>
</div>

Each column is dedicated to its own module. Let's say that first column is a vertical menu, middle column is a list of things and the last column is the detail of a thing selected in the second column. I'm using Angular4 and Bootstrap4 (with the help of ng-bootstrap). I'm new to both of them.

Issue:

First column is ok, it displays the menu with the expected size. An issue arise when trying to set the second column. This is the resulting code:

<div class="container-fluid">
  <div class="row">
    <div id="sidebar" class="col-md-3">
      ...
    </div>

    <router-outlet></router-outlet>
    <list-of-things ng-version="4.0.3">
      <div class="col-md-3">
        ...
      </div>
    </list-of-things>
    ...
  </div>
</div>

The problem is that the component selector <list-of-things ng-version="4.0.3"> has a determined width and I don't know where this width comes from. Consequently, when I set the width col-md-3, 3 is relative to the size of <list-of-things ng-version="4.0.3"> and not the page width. So I end up with a very norrow list... Setting the value of the inner div to col-md-12 fills the <list-of-things> box.

Additional information: Below is the CSS stack for the <list-of-things> straight from the web developer tool.

element {}

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

*,
*::after,
*::before {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

body {
  font-family: "Segoe UI", "Source Sans Pro", Calibri, Candara, Arial, sans-serif;
  font-size: 0.9375rem;
  font-weight: normal;
  line-height: 1.5;
  color: #373a3c;
}

body {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #292b2c;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

Bootstrap 4 uses flex. The columns should be direct descendants of rows. In this case `col-md-3` has styles: `max-width: 25%;` and `flex: 0 0 25%;` There might be other styles playing in, but those are key. So you could try adding those to your list-of-things' styles (ugly), you could override .col-md-3 when inside a `list-of-things` (uglier). Or you could just use bootstraps classes as intended. Have you tried ``? — ippi, May 07 '17 at 13:23
Effectively, your last proposal is the way to go. The thing is that `` is a tag injected by angular via the component selector property. The angular documentation on this property is rather poor so I had to make further tests and I think I finaly found out how to "style" the tag like this: `selector: '[id=all-posts][class=col-md-6]'`. I will answer my own question to let others know. — Melicerte, May 07 '17 at 13:45

score 1 · Accepted Answer · edited May 23 '17 at 11:54

I found the answer by my self by trial and error.

The best thing to do is to add the class "col-md-3" to the <list-of-things> tag. The hard part is that this tag is injected by angular via the component selector definition. The documentation about that selector is rather poor for the time being.

Basically, all example shows you to set the selector like this:

@Component({
  selector: 'my-posts',
  templateUrl: './../templates/posts.component.html',
  providers: [PostService]
})

Apparently, if you put the selector value into brackets [ and ], the tag will be a <div> tag with whatever is in between the brackets.

The following example:

  @Component({
      selector: '[id=my-posts]',
      templateUrl: './../templates/posts.component.html',
      providers: [PostService]
    })

generates the following tag:

<div id="my-posts" ng-version...>InnerHTML Here </div>

I want to set a css class on this div to specify the bootstrap col-md-3. But my selector can't be set on css class (that lead to an error related to recursion). It has to be set at least on an css id. With a bit of luck, I found that the following gives me what I want:

@Component({
  selector: '[id=all-posts][class=col-md-6]',
  templateUrl: './../templates/posts.component.html',
  providers: [PostService]
})

Output:

<div class="col-md-6" id="all-posts" ng-version="4.0.3">
...
</div>

See also Can an angular 2 component be used with an attribute selector?

How to set multiple columns with angular 4 and bootstrap 4?

1 Answers1