Topic: React Lightbox Controls overlap
Expected behavior The lightbox controls need to be at top right
Actual behavior For some reason the lightbox controls overlap with the image. i am using latest version of 4.21.1 via git and i tried deleting the node_modules but still the same.
Resources (screenshots, code snippets etc.)
added this via npm "mdbreact": "git+https://.....@git.mdbootstrap.com/mdb/react/re-pro.git" and using it directly
<MDBLightbox className='p-0 m-0' images={this.getGalleries(org.Gallery)} />
Piotr Glejzer staff commented 5 years ago
I don't see a problem with this component. Did you import styles to your file? May you check the latest 4.22.0 version?
balajee commented 5 years ago
i deleted node_modules folder and tried once again... i can see the version which i got is 4.22.0 but still i can see the issue.
Piotr Glejzer staff commented 5 years ago
May you show me your code about that? Thanks. You can copy and paste it here https://mdbootstrap.com/snippets/ ( I need code so don't worry if it will not compile to working snippet)
balajee commented 5 years ago
You can go here and click on right rail gallery https://freenear.in/academy/big-blue-badminton-academy
Also i am seeing this error when go back to home page and come once again.
mdbreact.esm.js:9274 Uncaught TypeError: Cannot read property 'naturalWidth' of null
at t.setData (mdbreact.esm.js:9274)
at mdbreact.esm.js:9225
at Array.map (<anonymous>)
at t.updateGalleryData (mdbreact.esm.js:9224)
at mdbreact.esm.js:9290
at Object.g (react-dom.production.min.js:81)
at A (react-dom.production.min.js:101)
at react-dom.production.min.js:105
at O (react-dom.production.min.js:125)
at C (react-dom.production.min.js:154)
There is a problem with column because you put a lightbox gallery to column and bootstrap columns have a position relative by default and our lightbox has a position absolute to window. If you are put in that way there will look bad.
https://ibb.co/ZMtzK3Z - your column with position relative
https://ibb.co/yQn3941 - your site without position relative
But you probably need that bootstrap column so you can do this workaround about this:
.mdb-lightbox .ui-controls {
width: 99vw;
height: 100vh;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: fixed;
z-index: 10000;
}
Is that error showing only when your back to the home page?
balajee commented 5 years ago
this error show when i exit the page and comeback to other academy... in general this is happening when route change and once again i come back
Piotr Glejzer staff commented 5 years ago
Ok, we will try to replay this problem. If we will fix this we will let you know. Sorry about that. Have a nice day.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.21.1
- Device: Desktop
- Browser: all
- OS: All
- Provided sample code: No
- Provided link: No
Piotr Glejzer staff commented 5 years ago
Hi,
did you modifed code or just copy and pasted from our website? I'm asking because I don't see this problem in our package.
Best,Piotr
balajee commented 5 years ago
added this via npm "mdbreact": "git+https://.....@git.mdbootstrap.com/mdb/react/re-pro.git" and using it directly