[Vuejs]-Is it possible to dynamically change a list-group from vertical to horizontal on screen smaller than lg in bootstrap-vue?

by

0👍

✅

You can do like this –

Template

<div class="container">
    <div class="row">
        <div class="col-xl-3 col-lg-4 col-md-4 col-sm-12 col-xs-12">
           <b-list-group>
                        <b-list-group-item class="d-lg-vertical">
                            <b-link v-on:click="component = 'product-list'">
                                <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
                                    <path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM8 19h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zm0-6h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zM7 6c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1z"/>
                                </svg>
                                <span class="custom-sm-d-none">Material List</span>
                            </b-link>
                        </b-list-group-item>
                        <b-list-group-item class="d-lg-vertical">
                            <b-link v-on:click="component = 'batch-create-material-list'">
                                <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
                                    <path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 9h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zM7 7h2v2H7zm0 4h2v2H7zm0 4h2v2H7zM20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 16H5V5h14v14z"/>
                                </svg>
                                <span class="custom-sm-d-none">Batch Create Material List</span>
                            </b-link>
                        </b-list-group-item>
                    </b-list-group>
        </div>

      <div class="col-xl-9 col-lg-8 col-md-8 col-sm-12 col-xs-12">
          <keep-alive>
           <component v-bind:is="component"></component>
          </keep-alive>
      </div>
    </div>
  </div>

CSS

/* small screen  below 768px width */
@media only screen and (max-width : 767px) { 
  .custom-sm-d-none{display:none;} 
}

/* large screen  above 767px width */
@media only screen and (min-width : 768px) {
  .d-lg-vertical{
    display:block;
  }
}

fiddle – 

https://jsfiddle.net/guruling/f9m1v0so/33/

Hope it will resolve your issue.

0👍

I figured this out. Thank you @GurulingKumbhar for helping me get to this point by mentioning @media rules which got me delving deeper into how all of this stuff works and then I stumbled upon flexbox.

<template>
    <div>
         <b-container>
            <b-row>
                <b-col class="col-md-6 col-xl-3">
                    <b-list-group id="" class="d-flex horiz">
                        <b-list-group-item>
                            <b-link v-on:click="component = 'product-list'">
                                <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
                                    <path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM8 19h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zm0-6h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zM7 6c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1z"/>
                                </svg>
                                <span class="hide-title">Material List</span>
                            </b-link>
                        </b-list-group-item>
                        <b-list-group-item>
                            <b-link v-on:click="component = 'batch-create-material-list'">
                                <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
                                    <path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 9h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zM7 7h2v2H7zm0 4h2v2H7zm0 4h2v2H7zM20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 16H5V5h14v14z"/>
                                </svg>
                                <span class="hide-title">Batch Create Material List</span>
                            </b-link>
                        </b-list-group-item>
                    </b-list-group>
                </b-col>
                <b-col class="col-md-6 col-xl-9">
                    <keep-alive>
                        <component v-bind:is="component"></component>
                    </keep-alive>
                </b-col>
            </b-row>
        </b-container>
    </div>
</template>

<script>
import ProductList from '../../components/admin/ProductList';
import CreateProductAndCategory from '../../components/admin/CreateProductAndCategory';

export default {
    name: 'Dashboard',

    components: {
        'product-list': ProductList,
        'batch-create-material-list': CreateProductAndCategory,
    },

    data() {
        return {
            component: 'product-list',
        }
    },


}
</script>

<style scoped>
/* small screen  below 992px width */
@media only screen and (max-width : 992px) { 
  .horiz {
    flex-direction: row;
  }

  .hide-title {
    display:none;
  } 
}
</style>

Leave a comment