CODEWITHSUNDEEP
htmlcssangularbootstrap-4
ceyhunmelek
ceyhunmelek

Reputation: 21

Angular renders unnecessary space

I have a members component which has all single member component in it.

If I use members component as static shown below, problem dont occurs

<div class="row bg-light justify-content-center py-4">
  <div class="col-lg-8">
    <h3 class="font-weight-light pb-2">Members</h3>
    <div class="row">
<!-- Repeating div -->
      <div class="col-12 col-md-4 col-lg-3 p-2"> 
        <div class="card px-0 ">
          <img class="card-img-top" src="https://i1.sndcdn.com/avatars-000495007683-zg65ko-t500x500.jpg" alt="Card image cap">
          <div class="card-body p-2 text-center">
            <h5 class="card-title mb-1">Name Surname</h5>
            <p class="card-text mb-1">Title</p>
            <a href="#"><span class="ion ion-logo-linkedin text-dark mx-1 h3"></span></a>
            <a href="#"><span class="ion ion-logo-github text-dark mx-1 h3"></span></a>
            <a href="#"><span class="ion ion-logo-twitter text-dark mx-1 h3"></span></a>
          </div>
        </div>
      </div>
<!-- Repeating div -->
    </div>
  </div>
</div>

enter image description here

But if I use repeating div as a component, problem occurs

<div class="row bg-light justify-content-center py-4">
  <div class="col-lg-8">
    <h3 class="font-weight-light pb-2">Members</h3>
    <div class="row">

      <app-member></app-member>
      <app-member></app-member>
      <app-member></app-member>

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

enter image description here I couldnt figured out why this is happening

Upvotes: 0

Views: 60

Answers (2)

tano
tano

Reputation: 2817

you can use: 

<app-member style="display: contents;"></app-member>

however it is not supported in every browser.

You can also use:

<app-member class="col-12 col-md-4 col-lg-3 p-2"></app-member>

of course you should remove this classes within the component

Upvotes: 2

Vikas Saini
Vikas Saini

Reputation: 485

There is an extra tag <app-member> wrapping your component which is not having the required styling. Here <app-member> tag is your component selector defined in your component.

enter image description here

Giving an appropriate styling to the <app-member> tag will resolve the issue for now, but I will suggest you to style parent of <app-member> with appropriate Display property and then use css selector to style <app-member> for this particular instance so the styling wont affect other <app-member> tags in your applications.

Its really common issue developers face regarding component styling. :-)

Letme know, I can help you with this component styling if required.

Upvotes: 1

Related Questions