Empty string in array of *ngFor causes strange placement issues (as opposed to non-empty strings in the array)

Question

A live demo link speaks a thousand words: https://stackblitz.com/edit/angular-5vwspd

As you can see, the first 2 days are places awkwardly.

I'm creating a calendar component, and to display the day numbers (eg 1,2,...,31) I have a days array. But in order for the 1 to appear under the right weekday (eg Tu) I need to pad days with empty strings.

However, these empty strings are causing strange placement issues. The elements of the empty string are placed higher than the others.

For example, in my .ts file: days = ['','','',...,'30','31'];

In my .html file:

<li *ngFor="let day of days">
    <div class="dayNumber">
       {{day}}
    </div>
 </li>

ConnorsFan · Accepted Answer · 2019-05-24T16:10:15.783

2

The defaut vertical alignment of the div elements is vertical-align: baseline. The baseline is based on the text content (see this post) but, when the element is empty, it appears to be at the bottom of the element.

You can avoid the problem by displaying a non-breakable space when a string is empty or contains only spaces:

{{ day.trim() || '&nbsp;' }}

See this stackblitz for a demo.

As an alternative, you can specify the vertical alignment for the .days li elements. Any alignment value will do except baseline, which is the default that causes the problem.

.days li {
  ...
  vertical-align: middle;
}

See this stackblitz for a demo. Thanks to codequiet for the suggestion.

edited May 24 '19 at 16:10

answered May 24 '19 at 15:37

ConnorsFan

70,558
13
122
146

But what even causes the problem? Why is the div without content higher up? – Roberto Zvjerković May 24 '19 at 15:38
It is actually the elements with numbers displayed which are oriented *lower* than the elements with no content inside. – Tim Klein May 24 '19 at 15:40
You could also use a zero-width space (``) in place of the non-breaking space. This would essentially render as an empty element. – Tim Klein May 24 '19 at 15:41
2

You can also just add `vertical-align: middle;` to the '.days li' rule – codequiet May 24 '19 at 15:43
Thanks a lot! codequiet's solution is slightly better because his does not leave an empty string in the webpage which can be "seen" when highlighting. – kebab-case May 24 '19 at 15:49

Empty string in array of *ngFor causes strange placement issues (as opposed to non-empty strings in the array)

1 Answers1