Adjusting the ng-bootstrap carousel to fit within a div inside an ng-bootstrap modal

I have been struggling to correctly adjust the CSS properties in order to make a ng-bootstrap carousel image fit into a specific space (div) within a custom ng-bootstrap modal. Take a look at this modified StackBlitz code.

In the provided example, the image is extending beyond the designated space (height) of the modal and the col-8 where it is positioned.

How can I ensure that the carousel adjusts to the size of its parent col-8 so that it does not overlap with the modal's dimensions?

UPDATE

For those who are unable to identify the issue, you can view the live application here

Despite numerous attempts, I have only managed to reach this point. The carousel-inner and its child elements are not adapting to the dimensions of their parent div, which is ngb-carousel.carousel-modal. The image below illustrates this issue

https://i.sstatic.net/x8ZN7.gif

As depicted in the image above, I am unable to align carousel-inner with the size of its parent ngb-carousel.carousel-modal, which already conforms to the modal's height. Despite setting them to max-height:100% for responsiveness, the carousel always exceeds the height of the carousel-modal.

htmlcssangularbootstrap-4ng-bootstrap

Answer №1

Essentially, the key is to cascade the height of 100% through the hierarchy of tags.

To determine the height of the modal-body, I subtracted the Modal Header Height (69px) from 100%.

.modal-body {
    height: Calc(100% - 69px);
}

ngbd-modal-content, ngb-carousel, .carousel-inner, .modal-body .row {
  height:100%;
}

Check out the code in Stackblitz: https://stackblitz.com/edit/angular-csyyp8-heb7xf?file=styles.css

Answer №2

Set a specific height for the image within a container that also has a fixed height. Then position the caption of the carousel accordingly, as shown below:

img {
    height: 650px; /*adjust for your specific project*/
    width: auto !important;
}

@media only screen and (max-width:767px){
  img { width: 100% !important
   }    
} 

.carousel-caption {
    position: absolute;
    bottom: 20px;
    left: 3%; /*adjust for your specific project*/
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
    max-width: 50%; /*adjust for your specific project*/
}

Experiment with the values until it matches your requirements.

Answer №3

After spending countless hours diving into the intricacies of height, max-height, and how they interact with their parent elements, I have finally found the solution. Check out the updated StackBlitz for more details.

In essence, I adjusted the image size to fit within the parent container by setting fixed heights for both the parent container and the image itself. This allows the image to automatically resize to fit its containing div.

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

Explication of syntax not functioning

Following the instructions provided here but encountering issues, any assistance? <script type="text/javascript" src="sh/src/shCore.js"></script> <script type="text/javascript" src="sh/scripts/shBrushJScript.js"></script> <lin ...

javascripthtmlcsssyntaxhighlighter

How can I incorporate the "onClick()" function within an ajax call, while still utilizing the data returned in the success message?

After successfully making an Ajax call, I would like to implement an on-click function while still utilizing the original data retrieved. $.ajax({ URL: ......, type: 'GET', success: function (res) { var Ob ...

javascriptjqueryhtmlajaxweb

Validating group radio buttons that have been checked

I possess: <div class="group"> <input type="radio" name="myradio" value="1">a <input type="radio" name="myradio" value="2">b </div> <div class="group"> <input type="radio" name="two" value="3">a <input ty ...

javascriptjqueryhtml

Accessing a service instance within the $rootScope.$on function in Angular

I'm looking for a way to access the service instance variable inside the $rootScope in the following code. myapp.service('myservice',function($rootScope) { this.var = false; $rootScope.$on('channel',function(e,msg) { v ...

javascripthtmlangularjs

What is the best way to include an image in a bootstrap carousel?

Can anyone help me troubleshoot my issue with fitting an image into the bootstrap carousel? I've tried adjusting the CSS, but it's not working. Any advice or suggestions would be greatly appreciated! Here is a screenshot for reference: https://i ...

htmlcsstwitter-bootstrap

Upgrade your project from Angular 5 to Angular 9 using webpack

I want to share my experience, not ask a question! To upgrade dependencies in package.json: -Update all Angular dependencies to version 9 -Add these dependencies: "@angular-devkit/build-angular": "^0.900.4", "@angular-builders/cu ...

javascriptangulartypescriptwebpack

Trouble with Selecting an un-ordered list menu item in Selenium Java's side bar navigation

Exploring a different approach to selecting a menu item in the sidebar navigation within an iframe. After switching to the iframe, I am attempting to choose a specific item from the side menu to display its respective navigational items for selection. Thes ...

javahtmlselenium

What is the process of integrating an API key into Apollo-Angular in order to retrieve information from the MongoDB Realm GraphQL API?

I have been utilizing the MongoDB realm GraphQL API to retrieve data, while also using Apollo-Angular. However, in order to access the data through the GraphQL API, an API key is required. I have successfully tested this by using Postman and including the ...

angularmongodbgraphqlapollo-clientapollo-angular

The number entered will be incorporated into the API URL key value by passing the variable from page.html to services.ts

Recently diving into the world of Ionic, Angular, and Typescript, I've had a burning question. Can the number inputted be added to the API URL as one of the key values? I came across this helpful guide, specifically focusing on key event filtering (wi ...

jsonangulartypescriptapiionic-framework

I am looking to incorporate serial numbers into two distinct loops within an Angular application

I need help adding a serial number using two separate ngFor loops. Here is the code: <table> <tr> <th>Sr</th> <th>Name</th> </tr> <ng-container #atvalue> <tr *ngFor="let item of items; l ...

angular

How can a method be called from a sibling component in Angular when it is bound through the <router-outlet>?

In my current project, I have implemented an application that utilizes HTTP calls to retrieve data from an API endpoint and then displays it on the screen. This app serves as a basic ToDo list where users can add items, view all items, delete items, and pe ...

javascriptangularapiangular-changedetection

When a link is clicked, it quickly blinks or flashes on the screen

https://i.sstatic.net/cCFmX.gif <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2"> <%= link_to 'FARDIN KHANJANI', root_path, class: 'navbar-brand logo' %> </div> Upon viewing the gif I include ...

htmlcsshyperlinktwitter-bootstrap-4bootstrap-4

Provide solely the specified content range

While working with Node.js, my goal is to develop a video server that can serve a specific portion of a larger media file. Thanks to this gist, I have successfully created a video server and integrated it with an HTML5 video player using: <video contr ...

javascripthtmlnode.jsvideoheader

What are the differences in using ng-controller versus data-ng-controller?

When working with Angularjs, how do I determine whether to use data-ng-controller or ng-controller? In terms of current best practices for good software design, when is it appropriate to use each one? The information cited suggests that data-ng-controlle ...

javascripthtmlangularjsng-controller

What is the best way to align an inline list in the center so that it is responsive across all

Here is the CSS code provided: .wrapper{ display: inline; line-height: 2em; width: 100%; height: 100%; min-width: 1000px; min-height: 1000px; text-align: center; } ul{ list-style: none; } li{ list-style: none; } .craftb ...

htmlcss

Get rid of the rollover effect on the <a> tag when hovering over an image

I have a snippet of code that is fully functional. <div class="user-pic round-pic"> <a href="<?php echo $userLoggedIn; ?>"><img src="<?php echo $user['profile_pic']; ?>"></a> </div> The issue lies in i ...

phpcsshtml

Tips on showcasing Javascript filter outcomes after at least 2 characters have been entered

Currently, I have implemented a filter search box that displays results as soon as a single letter is inputted. However, due to the large amount of data that needs to be filtered through, I would like the search to only show results when a minimum of two l ...

javascripthtmlcsssearchfilter

Bootstrap Dropdown Functionality Malfunctioning

Here is a simple piece of HTML code that I have created: <!doctype html> <html> <head> <meta charset="utf-8"> <title>.:Home Page:. The Indian Sentinel</title> <link rel="stylesheet" href=" ...

javascriptjqueryhtmlcsstwitter-bootstrap

Encountering difficulty in presenting detailed information using a .json file

My photo gallery app functions perfectly when fetching data from jsonplaceholder.typicode.com. However, when I use my own local data, it breaks whenever I try to click on a photo to view its details. How is it possible for the photos to display correctly b ...

angular

The width property in Bootstrap is not functioning properly in .NET Core 6

I've exhausted all my options, including documentation and the last 10 stack overflow answers, but nothing seems to be working. I even tried using: <meta name="viewport" content="width=device-width, initial-scale=1"> I attem ...

htmlcssasp.net.netmodel-view-controller