1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Gallery/LightBox Controls not visible

kenc free asked 4 years 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 4 years 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 free commented 3 years 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 3 years 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 free commented 3 years 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 3 years 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
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.4.0
  • Device: iMac
  • Browser: Safari/Chrome
  • OS: iOS 10.14.6
  • Provided sample code: No
  • Provided link: No
Tags
lightbox-gallery-controls-invisible
About author
kenc
15Support score
3Questions 0Answers 0Snippets