Issue

This Content is from Stack Overflow. Question asked by Vzupo

I want these images to appear horizontal instead of vertical on the preview. I tried applying the display grid in the css, but it still appears vertical. Can someone tell me what is missing? Basically try selecting two or more images and they appear vertical

new Vue({
  el: '#app',
  data: () => ({ url: [], }),
  methods: {
    onFileChange(e) {
      [...e.target.files].forEach(f => this.url.push(URL.createObjectURL(f)))
    },
  }
})

body {
  background-color: #e2e2e2;
}

#app {
  padding: 20px;
}

#preview {

 
}
.flipper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
}


#preview img {
  max-width: 100%;
  max-height: 50px;
  padding-right:5px;
   display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.myGallery {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <input type="file" multiple="multiple" @change="onFileChange" /><br>
  <div id="preview" v-for="(img, i) in url" :key="i" class=flipper>
    <img :src="img" />
  </div>
</div>

Solution

The .flipper class should be in element that wrap the elements rendered by v-for :

new Vue({
  el: '#app',
  data: () => ({
    url: [],
  }),
  methods: {
    onFileChange(e) {
      [...e.target.files].forEach(f => this.url.push(URL.createObjectURL(f)))
    },
  }
})

body {
  background-color: #e2e2e2;
}

#app {
  padding: 20px;
}

#preview {}

.flipper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
}

#preview img {
  max-width: 100%;
  max-height: 50px;
  padding-right: 5px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.myGallery {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <input type="file" multiple="multiple" @change="onFileChange" /><br>
  <div class="flipper">
    <div id="preview" v-for="(img, i) in url" :key="i">
      <img :src="img" />
    </div>
  </div>
</div>

This Question was asked in StackOverflow by Vzupo and Answered by Boussadjra Brahim It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.