"Dimensions not specified for ngx-gallery - width and height parameters are needed

I have a question about customizing the height of ngx-gallery from this link: https://github.com/MurhafSousli/ngx-gallery. Currently, it has a fixed height value of 500px and adjusting the parent div height doesn't seem to have any effect.

I was hoping to find a way to set the height directly in the template like this:

<gallery
   [height] = '250px'>
</gallery>

Here is the Stackblitz link for reference: https://stackblitz.com/edit/angular-osh1vu

Another question I have is regarding the behavior of fit-height vs. fit-width with ngx-gallery. In the current implementation of my application, the black background appears above and below the image due to fit-width, whereas in the provided Stackblitz example it seems to be fit-height. Is there a way to adjust this behavior as well? (It used to be possible with an older attribute, but that is no longer valid)

Alternatively, I've tried inspecting the elements using dev tools and noticed the sliding images are labeled as div.g-template.g-item-template. However, attempts to override their height with CSS hasn't been successful:

div.g-template.g-item-template {
  height: 200px !important;
}

Answer №1

Click here to see a demo on how to add a class to a gallery element.

<div class="basic-container">
    <h2>Gallery component</h2>
    <gallery class="custom"
    [items]="items"
    [dots]=true
    [thumb]=false
    [loop]=false
    [playerInterval] = 5000
    [autoPlay]=true
    [loadingStrategy]=preload>
  </gallery>
</div>

Modify the following CSS:

.custom{
height:200px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with Font Requests in Browsers when Using Angular 10 and SCSS with @font-face

I have a project built with Angular 10 that utilizes SCSS for styling. In my _typography.scss file, I have defined some @font-face rules pointing to the font files located in the assets/fonts directory. However, when I run the application, the browser does ...

The module located at "c:/Users//Desktop/iooioi/src/main/webapp/node_modules/rxjs/Rx" does not have a default export available

I am currently delving into the realm of RxJs. Even after installing rxjs in package.json, why am I still encountering an error that says [ts] Module '"c:/Users//Desktop/iooioi/src/main/webapp/node_modules/rxjs/Rx"' has no default export ...

Generate a TemplateRef and place it into the template of the component

Inquiring about Angular 5.0.2 After reviewing the example provided on NgTemplateOutlet at https://angular.io/api/common/NgTemplateOutlet I am eager to discover if there is a method to dynamically generate a TemplateRef and then insert it into the componen ...

Display a custom toast from a list using Bootstrap 5

I've been utilizing the toast feature from Bootstrap, and it works perfectly when displaying a single toast. However, I encountered an issue when trying to display a specific toast, like an error toast, from a list of predefined toasts. It ended up sh ...

What is the process for setting a default checkbox as checked in Angular 6?

example.component.html <form method="post" enctype="multipart/form-data> <mat-checkbox class="style" name="checkboxenabled"[(ngModel)]="checkboxObj.checkboxenabled">Enabled</mat-checkbox> </form> I have been trying to set the c ...

Icons on the top banner that adjust to different screen sizes

I am still getting acquainted with Wordpress, so please bear with me if I use incorrect terminology or ask silly questions. I am eager to learn and improve. My website is focused on jewelry (using Kallyas premium), and I have a row of banner icons between ...

Can we bring flexbox inserts, removes, and item positioning to life through animation?

This question was first raised in 2012, but the responses provided didn't address my specific situation (smooth transition for rearranging wrapped content). "After removing an item from a flexbox, the remaining items snap into their new positions imm ...

What is the best way to properly center my navigation in Bootstrap 4?

My search for a solution to center the navigation in Bootstrap 4 led me to the discovery of the .mx-auto class, which worked perfectly. However, I encountered a drawback related to the brand size displayed before the navigation. In this demonstration, I h ...

The value of an Angular array seems to be disappearing after being copied to another array and then cleared

I have encountered an issue while working with arrays. I am initializing two arrays - one with some values and another as empty. However, when I assign the items from the first array to the second array and then clear the first array, it unexpectedly clear ...

Displaying Bootstrap 4 dropdown menu on hover

I've noticed that the dropdown menus in Bootstrap 4 are triggered by click by default, but for some reason, my menu is appearing on hover without any additional CSS or JS. This poses a problem for mobile development. I could create a jQuery solution, ...

Alert once all observables have finished

I have a collection of observables, each representing a file that needs to be uploaded using an HTTP request. My objectives are: To emit an event for each successfully uploaded file, which will be handled in the parent component. To notify when all file ...

The push() method replaces the last item in an array with another item

Two objects are available: ej= { name="", code: "", namebusinessG:"", codebusinessG:"" }; group = { name:"", code:"" } Both of these objects will be stored in two arrays: groupList:any[]=[]; ejList:any[]=[]; The program flow s ...

Display when moving up and conceal when moving down

Is there a way to make the div appear when scrolling up and down on the page? I'm new to jquery and could use some assistance, please. ...

Can a background image flow into another div?

My goal is to use this specific image as the background image for this particular page. I want the background image to begin within the navbar navbar-default class. However, I'm facing an issue. I need the image to extend into the next div, which is d ...

Ways to indicate a mat-checkbox as selected in Angular 7

I recently integrated a mat-checkbox into my project. To set the mat-checkbox as checked, I attempted to use [checked]="true" <div *ngFor="let dwidgets of module.widgets"> <mat-checkbox [formControl]="moduleswidgets.controls['widgets' ...

Executing the SQL query more than once is not permitted

I seem to be facing a challenge in executing SQL queries multiple times. In the given code snippet, the first SQL query 【SELECT h.title, h.place, h.introduction ~】works fine. However, the second one 【SELECT name ~】fails to execute. If I comment ...

Adding gradient to the background cover photo

I am currently working with a JavaScript fiddle that has a background image that I am using as a cover without distorting the image. My goal is to add a gradient on top of this image, but despite finding similar questions, I can't seem to make it wor ...

Repairing the base navigation interface and correcting the hyperlink to redirect to a different webpage

Can anyone assist with aligning my bottom navigation bar and fixing a link issue on both navigation bars? I've been struggling to center it. Do you think using padding could solve the problem? I've tried guessing the pixel count, but to no avail ...

Alternative to bower_concat for NPM

bower_concat is an amazing tool. Simply add a bower package using: bower install something --save Then bower_concat will gather the javascript and CSS from that package and combine it into a bundle, resulting in vendor.js and vendor.css files that can be ...

Conceal a script-generated div using CSS styling

Using the code below, you can create an HTML chatbox with a link in the top panel and multiple child divs. The structure is as follows: cgroup is the parent of CBG, which is the parent of CGW, and CGW is the parent of the div I want to hide. How can I u ...