CODEWITHSUNDEEP
cssangularflexbox
Jake11
Jake11

Reputation: 831

Angular items in flex don't have fixed height after making them component

I am making my portfolio in angular and doing skill page now, I have list of skills grouped in category each category has their own box, and few skills with progress and amount of skills differs for each category. The thing is that since skill section wasn't separate component everything was ok, because height of boxes was fixed and if one box had less skills than another in the row empty space was added to adjust elements in row to have same height, now when I turned div into component all items(components) in row have diffrent heights according to their content.

skill page before: 

<div class="flex-container">
   <div class="skill-section">
      <h3> Skill title</h3>
      <app-skill-progress></app-skill-progress>
      <app-skill-progress></app-skill-progress>
      <app-skill-progress></app-skill-progress>
   </div>
   <div class="skill-section">
      <h3> Skill title</h3>
      <app-skill-progress></app-skill-progress>
      <app-skill-progress></app-skill-progress>
   </div>
</div>

skill page after: 

<div class="flex-container">
   <app-skill-section></app-skill-section> // has 3 skills inside
   <app-skill-section></app-skill-section> // has 2 skills inside
</div>

here are styles for classes:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.skill-section {
  width: 560px;
  margin-bottom: 35px;
  margin-right: 30px;
  border-radius: 8px;
  padding: 24px 16px;
  background-color: #fff;
  box-shadow: 0px 5px 20px -1px rgba(0, 0, 0, 0.55);
  position: relative;
}

Upvotes: 0

Views: 2303

Answers (1)

Dale Harris
Dale Harris

Reputation: 597

The .skill-section class is now nested inside the new component element, so it's no longer an immediate child of the .flex-container. I recommend changing the selector from the .skill-section class to the app-skill-section element and adding display: block.

Like so:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
app-skill-section {
  width: 560px;
  margin-bottom: 35px;
  margin-right: 30px;
  border-radius: 8px;
  padding: 24px 16px;
  background-color: #fff;
  box-shadow: 0px 5px 20px -1px rgba(0, 0, 0, 0.55);
  position: relative;
  display: block;
}

Alternatively, you could apply these styles directly to the :host element in the CSS for the new component:

:host {
  width: 560px;
  margin-bottom: 35px;
  margin-right: 30px;
  border-radius: 8px;
  padding: 24px 16px;
  background-color: #fff;
  box-shadow: 0px 5px 20px -1px rgba(0, 0, 0, 0.55);
  position: relative;
  display: block;
}

Upvotes: 1

Related Questions