Lightbox is not Working with Bootstrap

[MuhaddiMu]

I'm not sure why it's not working with Bootstrap.

When I remove import ('Bootstrap.css) its working fine while my custom stylesheet still there.

Any help would be much appreciated

Thanks

[clevercodenl]

I have the same problem, using bootstrap 3.3.6

[clevercodenl]

I fixed it by adding a class to the element and adding this class afterwards in te component like this :
<customer-upload-light-box :visible="visible" :imgs="image" @hide="hideImage" class="force-display" ></customer-upload-light-box>
and like this :
<style lang="scss"> .force-display{ display:block!important; } </style>

The .vue component would look like :

`

<customer-upload-light-box
:visible="visible"
:imgs="image"
@hide="hideImage"
class="force-display"
>

<script> import LightBox from 'vue-easy-lightbox'; export default { name: 'app', data() { return { } }, methods: { hideImage: function() { this.$store.commit('HIDE_IMAGE', ''); }, }, computed:{ visible() { return this.$store.getters.visible; }, image() { return this.$store.getters.image; }, }, components: { customerUploadLightBox: LightBox, } } </script> <style lang="scss"> .force-display{ display:block!important; } </style>

`

[MuhaddiMu]

Thanks alot @GreenLeewayDesignCastle It's working now. 💯

[XiongAmao]

I didn't use Bootstrap. It's there any demos?
Should i add display:block to component's root element?
(I'm sorry for viewing issues too late

[MuhaddiMu]

Hey @XiongAmao Here's the simple project I am working on if you can take a look:
https://github.com/MuhaddiMu/VueGallery

Yeah i'll suggest to add display:block to the root element to avoid design issues later on.

[XiongAmao]

Thx guys ! @MuhaddiMu @GreenLeewayDesignCastle
I fixed it a6ec245 & release 0.3.11