0

I'm a newbie UI developer, with not a lot of experience in styling html. Can someone show me how to make my column within the mat-table smaller? I'm not understanding why I can't make this work.

Here's my html:

      <ng-container matColumnDef="edit">
        <mat-header-cell *matHeaderCellDef></mat-header-cell>
        <mat-cell *matCellDef="let row">
          <button mat-raised-button>Edit</button>
        </mat-cell>
      </ng-container>

And the scss (I picked some random width just to see if it would work):

.mat-column-edit {
  width: 300px !important;
}

Seems like it should be pretty simple, but it isn't!

CNDyson
  • 1,687
  • 7
  • 28
  • 63
  • Thanks, but I don't see where ::ng-deep belongs? – CNDyson Feb 06 '19 at 20:52
  • what do you mean? – IvanS95 Feb 06 '19 at 20:53
  • It works *without* `::ng-deep`. I went on their demo website, inspected, and dynamically added some CSS to inspector stylesheet. [Result](https://i.stack.imgur.com/2bnKH.jpg). Most likely, you're using ***the wrong selector***. As in, I don't think `.mat-column-edit` is the correct selector for your ``s. See it [working here](https://stackblitz.com/edit/angular-wxdpwj?file=styles.css). – tao Feb 06 '19 at 20:53
  • Can you show an example of using ::ng-deep? I don't see it in the stackblitz you provided. And isn't that deprecated? – CNDyson Feb 06 '19 at 20:54
  • @AndreiGheorghiu, I see how your example works, but my code still doesn't. Could the mat-button be interfering with the sizing? – CNDyson Feb 06 '19 at 21:11
  • Provide a [mcve] and I'll tell you why it doesn't work. Otherwise I'd have to guess and that's not something I particularly enjoy. Besides, it would be against SO's guidelines (in short: *"When in doubt, don't guess. Ask for details."*) – tao Feb 06 '19 at 21:13
  • Comparing your markup with the one in the example, it looks like you're using `mat-cell` as a component, when it should be used as a directive. It's possible it works as both, but you might want to try the markup which clearly works: `{{ ...}}` Same goes for ``. If you're keen on using them as components and you still need help applying CSS, provide a working example. – tao Feb 06 '19 at 21:21
  • That did i!! But why? Please provide your comment in an answer, so you can receive the points. – CNDyson Feb 06 '19 at 21:38
  • 2
    I don't need the points. As for why, you have a bit of reading to do. I'd start [here](https://stackoverflow.com/questions/34613065/what-is-the-difference-between-component-and-directive). Btw, I played around with the initial example [here](https://stackblitz.com/edit/angular-wxdpwj-hbkz1z?file=styles.css). – tao Feb 06 '19 at 21:50

0 Answers0