I can't seem to force bootstrap list-group to horizontal on small screens

Development Web Development
1

I’m using laravel 6 bootstrap 4.4.1 and bootstrap-vue 2.6.1

My goal is the force the list-group to horizontal on small screen sizes and remove the text located in my span tags. So far the removal of the span text sorta works, but it’s removed on all screen sizes. Also the damn list-group refuses to change to horizontal. I hate ui/ux design.

jsfiddle example works:
https://jsfiddle.net/guruling/oyumzb9c/16/

My Code:

    <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">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="d-none">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>
2

Try removing the scoped tags for your style block

3

Unfortunately that doesn’t work.

4

Hmmm. There must be something else. If the jsfiddle works there is some other inheritance interference.

5

I ended up figuring this out I can now rest easy tonight :slight_smile:

<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>
1 Like