zalog / placeholder-loading

Simple and flexible, css only, content placeholder loading animation. https://zalog.github.io/placeholder-loading/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Parent Display Flex Issue

kamyar-nemati opened this issue · comments

Placeholder-Loading is not showing up when the parent's "display" is set to "flex".

Edit:
It seems by manually setting the width of the placeholder-loading div containing it to "inherit" fixes the issue.

Code Example:
<div class="d-flex flex-column align-items-center bg-white shadow-sm tw-rounded-lg tw-w-80">
<div class="d-flex tw-pt-7 tw-pb-4">
...
</div>
<div v-if="postsLoaded" class="list-group">
<a v-for="post in posts" :key="post.index" :href="post.post_link" class="list-group-item list-group-item-action border-0 tw-px-8">
...
</a>
</div>
<div v-else style="width: inherit;">
<div class="ph-item">
<div class="ph-col-12">
<div class="ph-picture"></div>
<div class="ph-row">
<div class="ph-col-6 big"></div>
<div class="ph-col-4 empty big"></div>
<div class="ph-col-2 big"></div>
<div class="ph-col-4"></div>
<div class="ph-col-8 empty"></div>
<div class="ph-col-6"></div>
<div class="ph-col-6 empty"></div>
<div class="ph-col-12"></div>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-end w-100 tw-p-4">
...
</div>
</div>

Regards
Adam