search

XiongAmao / vue-easy-lightbox

A tiny lightbox component for Vue.js 3.0 :tada::tada: https://xiongamao.github.io/vue-easy-lightbox/
MIT License
419 stars 69 forks source link

Lightbox is not Working with Bootstrap #10

Closed MuhaddiMu closed 5 years ago

MuhaddiMu commented 5 years ago

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 commented 5 years ago

I have the same problem, using bootstrap 3.3.6

clevercodenl commented 5 years ago

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"

and like this : `

The .vue component would look like :

`

`

MuhaddiMu commented 5 years ago

Thanks alot @GreenLeewayDesignCastle It's working now. 💯

XiongAmao commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

Thx guys ! @MuhaddiMu @GreenLeewayDesignCastle I fixed it https://github.com/XiongAmao/vue-easy-lightbox/commit/a6ec2458c66f53a3bf70cc470e5a48ad757c1381 & release 0.3.11