0

I have a list-group with icons and links. My goal is to only show the icons when the screen is smaller than lg and change the orientation from vertical to horizontal.

So far I've managed to only show the icons on screens smaller than lg; however, I'm struggling to figure out how to dynamically change the orientation from verticle to horizontal for screens smaller than lg. How do I achieve this?

code:

<template>
    <div>
        <b-container>
            <b-row>
                <b-col class="col-md-6 col-xl-3">
                    <b-list-group>
                        <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="d-none d-lg-block">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="d-none d-lg-block">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: ''
        }
    },


}
</script>

<style scoped>

</style>

EDIT: I attempted to figure this out and tried all of the responsive variants: <b-list-group horizontal="sm">, <b-list-group horizontal="md">, and <b-list-group horizontal="xl"> All of them are not working as expected. The list-group is horizontal on all screen sizes but sm

Code that I tried:

<template>
    <div>
        <b-container>
            <b-row>
                <b-col class="col-md-6 col-xl-3" >
                    <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="d-none d-lg-block">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="d-none d-lg-block">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 : 991px) { 
  .d-none{display:none;} 
}


/* large screen  above 991px width */
@media only screen and (min-width : 992px) {
  .d-lg-vertical{
    display:block;
  }
}
</style>
dottedquad
  • 1,371
  • 6
  • 24
  • 55
  • 1
    You can try this - 1. add some class to for example 'd-sm-block. 2.Add styling in ur css file for large screen resolution - .d-sm-block{display:block; clear:both;} – Guruling Kumbhar Mar 11 '20 at 01:32
  • 1
    Media query for targeting large screens can be something like - @media only screen and (min-width : 1824px) { .d-sm-block{display:block; clear:both;} } – Guruling Kumbhar Mar 11 '20 at 01:40
  • I had a go with your example, but it did not work. I've also have been searching and came across this example(https://jsfiddle.net/nerq0ero/) which doesn't use a list-group. I'm wondering if I am going about this all wrong. – dottedquad Mar 11 '20 at 02:24
  • 1
    Created example using ur code snippet. 992px above width is considered for large screen you are targeting. https://jsfiddle.net/guruling/oyumzb9c/16/ – Guruling Kumbhar Mar 11 '20 at 03:14
  • 1
    What version of Bootstrap CSS are you using? The responsive horizontal breakpoint for list groups was added in a later release of Bootstrap v4. Make sure you are using Bootstrap v4.4.1 (or greater) CSS/SCSS. – Troy Morehouse Mar 11 '20 at 21:32
  • 1
    Also, which version of BootstrapVue are you using? you should update to v2.6.1 or newer – Troy Morehouse Mar 11 '20 at 22:19
  • @TroyMorehouse My package.json files says: bootstrap: ^4.0.0 and "bootstrap-vue": "^2.6.1" – dottedquad Mar 12 '20 at 00:05
  • @GurulingKumbhar I had a look at your example on jsfiddle and it does indeed work. However, I attempted to try it out by resizing chrome and the list group is still verticle. I updated my original post with the code that I tried – dottedquad Mar 12 '20 at 00:26
  • 1
    Remove 'd-lg-block' class from Add 'd-lg-vertical' class to both elements. https://jsfiddle.net/guruling/oyumzb9c/17/ – Guruling Kumbhar Mar 12 '20 at 02:17
  • 1
    @dottedquad upgrade to the latest Bootstrap CSS v4.4.1, as responsive breakpoint horizontal list groups are not available in v4.0.0 – Troy Morehouse Mar 12 '20 at 04:01
  • @TroyMorehouse I upgraded to the latest bootstrap 4.4.1 checked my package.json which now says bootstrap 4.4.1 and checked the bootstrap.scss which also says Bootstrap v4.4.1 – dottedquad Mar 13 '20 at 00:10
  • @GurulingKumbhar I started from scratch and copied pasted your new jsfiddle code. I'm not sure why this still isn't working. The lists group only stays in the vertical position. when resizing chrome window. I also checked firefox, but still only stays in the vertical position. – dottedquad Mar 13 '20 at 00:14
  • @GurulingKumbhar Also, it looks like .d-none is working; however, the span text is removed on all screen sizes. I meant to edit my original comment, but I can only edit within 5mins. – dottedquad Mar 13 '20 at 00:20
  • @GurulingKumbhar I am continuing to troubleshoot this further. I had a look at the resources in your jsfiddle example and noticed bootstrap.min.css file isn't found. Cannot find package bootstrap@next I went ahead and created a jsfiddle and added the same code and resources you did, but used https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css for instead. I ran my code and I am getting the same issue as explained above. I then removed the bootstrap.min.css resource and now the example that I created works, but without bootstrap.min.css. – dottedquad Mar 13 '20 at 01:17
  • It should work with bootstrap 4.3.1. I think you have missed to add 'd-lg-vertical' class to both items. And, also 'd-lg-block' should be removed from all list item's – Guruling Kumbhar Mar 13 '20 at 18:08
  • please share me your fiddle link. – Guruling Kumbhar Mar 13 '20 at 19:49
  • @GurulingKumbhar Here you go: https://jsfiddle.net/d0773d/qvatdpfm/3/ Also, check to see if your bootstrap.min.css is found in your jsfiddle example. I clicked on the link and it says: Cannot find package bootstrap@next – dottedquad Mar 13 '20 at 22:54
  • Posted fiddle example by updating your code snippet in answer section below. Hope it will help you. – Guruling Kumbhar Mar 14 '20 at 04:41

2 Answers2

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>
dottedquad
  • 1,371
  • 6
  • 24
  • 55
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.

Guruling Kumbhar
  • 1,039
  • 1
  • 8
  • 18