Gallery/LightBox Controls not visible


Topic: Gallery/LightBox Controls not visible

kenc pro premium asked 10 months ago

Expected behavior gallery controls should be visible

Actual behavior controls are there but not visible, if cursor is moved over area where they should be and clicked then functions correctly. But cannot see forward or back arrow, maximize, restore, exit icons. gallery count and current do appear correctly in upper left corner. This is a simple example using html and images from your example.

Any pointers would be appreciated.

Resources (screenshots, code snippets etc.)


Bartosz Termena staff commented 10 months ago

Hi!

Could you tell me what version of MDB and Browser are you using? Also, please attach an image with your problems.

Best Regards, Bartosz.


Yusuf.42 pro premium commented 2 months ago

Hi I have the same Problem "angular-bootstrap-md": "^9.3.1", ng-uikit-pro-standard ( "9.3.1") Browser Chrome: 83.0.4103.106 Safari: Version 13.1.1 (15609.2.9.1.2) Firefox: 75.0 (64-Bit)

I used "node_modules/@fortawesome/fontawesome-free/css/all.min.css", in angular.json also "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss", Only Info-Text is shown.

"styles": [
           "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
          "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
          "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
          "node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss",
          "node_modules/angular-bootstrap-md/assets/scss/mdb.scss",
          "node_modules/animate.css/animate.css",
          "apps/myproject/src/styles.scss"
        ],
        "scripts": [
          "node_modules/chart.js/dist/Chart.js",
          "node_modules/hammerjs/hammer.min.js",
          "node_modules/screenfull/dist/screenfull.js"
        ]

Arkadiusz Idzikowski staff commented 2 months ago

Please provide the HTML/ts code that you use to render the lightbox component and a screenshot/gif on which we will be able to see this unexpected behavior. Are there any errors in the console when you use the component?


Yusuf.42 pro premium commented 2 months ago

The html code

<ng-container *ngIf="gallery && gallery.length > 0">
<div class="row">
  <mdb-image-modal [modalImages]="gallery" type="no-margin"></mdb-image-modal>
</div>

Missing icons on right top

The controls are available, but not visible.


Arkadiusz Idzikowski staff commented 2 months ago

We tried to recreate this issue on our end but without success. Please send a simple demo app on which we will be able to reproduce this problem to a.idzikowski@mdbootstrap.com


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: Angular
  • MDB Version: 8.4.0
  • Device: iMac
  • Browser: Safari/Chrome
  • OS: iOS 10.14.6
  • Provided sample code: No
  • Provided link: No