CODEWITHSUNDEEP
cssmaterialize
OscarDev
OscarDev

Reputation: 977

Cards skip line with MaterializeCSS and VUE

I am showing information on MateralizeCSS cards but I want to show them side by side on medium to large devices but they are shown one over the other when using V_FOR and I do not understand the reason:

Can you help me?

According to I must show 3 cards and then 1 for the class: col s12 m4 but it shows one on top of the other in any resolution

   <div class="row">
          <div class="col s12 m4" v-for="item in services" :key="item.id">
          <div v-for="inside in item.servicios" :key="inside.name">
            <div class="card" v-if="item.id === serviceId">
              <div class="card-content">
                <img class="responsive-img" :src="require(`../assets/img/services/${inside.img}`)">
                <h3>Lavandería</h3>
              </div>
              <div class="card-action">
                <a href="#">This is a link</a>
                <a href="#">This is a link</a>
              </div>
            </div>
          </div>
        </div>
    </div>

Attached image of how they are displayed:

enter image description here

I also tried to do it with FLexbox but some images take a lot of space and look bad

Upvotes: 0

Views: 32

Answers (1)

Sean Doherty
Sean Doherty

Reputation: 2378

You need to place all the cards inside a single row - it is not 1 row per card. Rows are block level items so they will start a new line. I replaced the image and duplicated your card markup (which starts .col) 3 times:

https://codepen.io/doughballs/pen/rNVyaBR?editors=1010

<div class="row">

          <!-- Card 1 -->
          <div class="col s12 m4" v-for="item in services" :key="item.id">
          <div v-for="inside in item.servicios" :key="inside.name">
            <div class="card" v-if="item.id === serviceId">
              <div class="card-content">
                <img class="responsive-img" src="https://cdn.mos.cms.futurecdn.net/ntFmJUZ8tw3ULD3tkBaAtf-650-80.jpg">
                <h3>Lavandería</h3>
              </div>
              <div class="card-action">
                <a href="#">This is a link</a>
                <a href="#">This is a link</a>
              </div>
            </div>
          </div>
        </div>

  <!-- Card 2 -->
  <div class="col s12 m4" v-for="item in services" :key="item.id">
          <div v-for="inside in item.servicios" :key="inside.name">
            <div class="card" v-if="item.id === serviceId">
              <div class="card-content">
                <img class="responsive-img" src="https://cdn.mos.cms.futurecdn.net/ntFmJUZ8tw3ULD3tkBaAtf-650-80.jpg">
                <h3>Lavandería</h3>
              </div>
              <div class="card-action">
                <a href="#">This is a link</a>
                <a href="#">This is a link</a>
              </div>
            </div>
          </div>
        </div>

  <!-- Card 3 -->
  <div class="col s12 m4" v-for="item in services" :key="item.id">
          <div v-for="inside in item.servicios" :key="inside.name">
            <div class="card" v-if="item.id === serviceId">
              <div class="card-content">
                <img class="responsive-img" src="https://cdn.mos.cms.futurecdn.net/ntFmJUZ8tw3ULD3tkBaAtf-650-80.jpg">
                <h3>Lavandería</h3>
              </div>
              <div class="card-action">
                <a href="#">This is a link</a>
                <a href="#">This is a link</a>
              </div>
            </div>
          </div>
        </div>

</div>

https://materializecss.com/cards.html

Upvotes: 0

Related Questions