div width not taking up all the space available in angular with multiple components-CodePudding

This project is done with Angular and Tailwind CSS.

Issue: My divs do not take up all the space available. Each 'a' is a div with a blue background color. The whitespace is the empty space I would like to get rid of

My code: Here are the simplified contents of my main html file

      <div >
        <app-photo-card
          *ngFor="let photo_card of photo_cards"
          [photo_card]="photo_card"
          [class]="'w-full'"
        ></app-photo-card>
      </div>

simplified contents of main ts file

  photo_cards = [
    {
      title: 'a',
      content: "",
      img_src: '',
    },
  ];

and here are the contents of my photo card component html file

<div >
  <div >a</div>
</div>

Tried a similar version of this code with vanilla html and css and it seemed to work as expected. Really unsure on what I'm doing wrong here.

Expected output would be the 4 'a' divs with the blue background spanning across the screen which would result in no whitespace.

CodePudding user response：

Angular's component have implicitely set display: inline to it, which means that the component will take as much space as it's content. That's the reason setting a width to it, does not have any effect. Try setting display: inline-block to your app-photo-card component (either from the parent or from the component itself using the host selector.

CodePudding user response：

Here is a much simpler solution in my opinion, while still using flexbox. I achieve that by adding flex-grow class to the component instead of w-full.

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<div >
  <div >
    <div >a</div>
  </div>
  <div >
    <div >a</div>
  </div>
  <div >
    <div >a</div>
  </div>
  <div >
    <div >a</div>
  </div>
</div>

CodePudding user response：

If you are using flexbox, use class flex-grow instead of w-full. here is an example check here

<div >
  <div >
    <div >a</div>
  </div>
  <div >
    <div >a</div>
  </div>
  <div >
    <div >a</div>
  </div>
  <div >
    <div >a</div>
  </div>
</div>