CODEWITHSUNDEEP
angularangular-material
Julius Dzidzevičius
Julius Dzidzevičius

Reputation: 11000

Styling Material grid-list items

So this:

   <md-grid-list cols="5" rowHeight="20px">
      <md-grid-tile
          *ngFor="let carBrand of carBrands"
          colspan= 1
          rowspan= 1>
        <md-checkbox>{{ carBrand}}</md-checkbox>
      </md-grid-tile>
    </md-grid-list>

generates my list, but all items in cols are centered. I see in dev tools that if I change justify-content: center to justify-content: left it probably works well, but can not achieve same effect in my code.

How to properly style these?

Upvotes: 1

Views: 2933

Answers (1)

Andrei Matracaru
Andrei Matracaru

Reputation: 3671

Set the View Encapsulation to None on your component:

@Component({
    templateUrl: './my.component.html' ,
    styleUrls: ['./my.component.css'], 
    encapsulation: ViewEncapsulation.None,
})

Then in your component css you can do exactly what you tried in the dev tools, overriding the style to justify-content: left

View Encapsulation = None means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This is essentially the same as pasting the component's styles into the HTML.

Upvotes: 1

Related Questions