feat: Prevent content from collapsing when empty (#60)

fuxingloh · Jan 7, 2021 · c3ac860 · c3ac860
1 parent 0c308db
commit c3ac860
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -11,7 +11,7 @@ Documentation are also extensible with everything you can think of about horizon
 
 [Vue Horizontal](https://github.com/fuxingloh/vue-horizontal) also contains a snippet dossier with many SPA/SSR/SSG
 friendly recipes for your design needs.
-Vue Horizontal is not just a library, **it's a place for everything horizontal.**
+[Vue Horizontal](https://vue-horizontal.fuxing.dev/) is not just a library, **it's a place for everything horizontal.**
 
 ## Vue Horizontal List
 

diff --git a/src/vue-horizontal-list.vue b/src/vue-horizontal-list.vue
@@ -450,14 +450,15 @@ export default {
 
   padding-top: 24px;
   padding-bottom: 24px;
+
+  z-index: 1;
+
+  /* Prevent content from collapsing when empty. E.g. image while loading height=0. */
+  min-height: 1px;
 }
 
 .vhl-list > * {
   scroll-snap-align: start;
   flex-shrink: 0;
 }
-
-.vhl-item {
-  z-index: 1;
-}
 </style>