Aligning angular bootstrap modal window in the center vertically

Is there a way to vertically center a modal window on the screen, regardless of the size of the content being displayed? I'm currently using an image as a modal window in my page, and while I was able to align it horizontally, I'm struggling to get it centered vertically. Any suggestions or examples of how this can be achieved?

I tried following this example: modal window demo plunker

However, the actual content of my modal window looks like this:

<script type="text/ng-template" id="myModalContent.html">
        <div>
             <img class= "attachmentImage" src={{items}} />
        </div>
</script>

Should I make changes in bootstrap.min.css or ui-bootstrap-tpls-0.13.0.js, or is it better to handle this with my own stylesheet?

Thank you for your assistance. Please let me know if more information is needed.

cssangularjstwitter-bootstrapbootstrap-modalangular-bootstrap

Answer №1

I have a different viewpoint from 1Bladesforhire's response because I believe that when the height of the modal container exceeds the viewport height, it creates an accessibility challenge at the top. This issue often arises when centering taller child elements within parent containers using the vertical centering method with absolute.

For me, the most effective approach to vertically centering a Bootstrap modal involves:

.modal-dialog {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  min-height: calc(100vh - 60px);
}
@media (max-width: 767px) {
  .modal-dialog {
    min-height: calc(100vh - 20px);
  }
}

/* The above CSS is essential for centering. The following code centers the modal trigger button */

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Even when the height of .modal-content is set to 300vh, it remains fully accessible and centered within the viewport:

.modal-dialog {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  min-height: calc(100vh - 60px);
}
@media (max-width: 767px) {
  .modal-dialog {
    min-height: calc(100vh - 20px);
  }
}

/* The above CSS is necessary for centering. The code below centers the modal trigger button */

.modal-content {
  height: 300vh;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Answer №2

If you're using Angular Bootstrap, you may already have access to this feature. Give it a try to see if it resolves your issue.

For more information, refer to:

Check out the code in component.ts and component.html below:

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

constructor(private modalService: NgbModal) { }

open(content: any, account_no: string) {
    this.modalService.open(content, { centered: true, size: 'xl' });
}
<ng-template #content let-c="close" let-d="dismiss">
    <div class="modal-header">
        <h4 class="modal-title" id="modal-basic-title">Modal Title</h4>
        <button type="button" class="btn-close" aria-label="Close" (click)="d('Cross click')"></button>
    </div>
    <div class="modal-body">
        Content Area
        </div>
</ng-template>

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

What is the correct way to customize colors for specific components in Material-ui?

Struggling with theming in Material-UI, particularly when it comes to customizing element colors. Some elements default to 'theme.palette.main.dark' and I want to override this behavior. For example, the TextField and SpeedDial components automa ...

javascriptcssreactjsmaterial-ui

There appears to be a malfunction with certain hyperlinks on the table

There seems to be an issue with the four links in the third column, first, second, third, and fourth rows (Order Form PDF, Rental App PDF, Married Rental PDF, and Consent Form PDF) as they are not functioning properly. Below is the provided code snippet: ...

htmlcss

Is there a way to dynamically adjust @keyframes properties through JavaScript?

I am looking to dynamically change the top value of the keyframes based on a JavaScript variable x. While I have experience changing CSS with JavaScript, this particular challenge has me stumped. Code: var x = Math.floor((Math.random() * 1080) + 1); ...

javascripthtmlcss

CSS for Page Header with Scroll-Over Content

Having trouble creating a "collapsing header" design where the page content scrolls over the banner image. I've tried adjusting z-index and positioning properties in CSS, but can't achieve the desired effect. Any help or guidance would be greatly ...

csssquarespace

Extract the input value from the bootstrap-datepicker using JavaScript

I'm working on a Ruby-on-Rails project and I want to include a string from the bootstrap datepicker into a hidden field. However, I am unsure of how to reference an input class in this process. Below is the structure of my form: <%= simple_form_f ...

javascriptjqueryruby-on-railstwitter-bootstrapdatepicker

Is a Bootstrap 3 Calendar Available?

I am attempting to design a calendar using Bootstrap 3.3.7 that features consistent square dates, similar to this example: It is important to me that each date is displayed in a square format. Here is what I have come up with so far: I am getting close ...

phphtmlcsstwitter-bootstrap

The HTML unit is unable to locate the form for unknown reasons. My suspicion is that it could be due to the presence of Angular

Struggling with using HTMLunit to login and upload a file. Successfully logged in but unable to locate the form, despite it being present on the HTML page. Here is the JAVA CODE snippet: public static void main(String[] args) { WebClient webClient = ...

javascriptjavahtmlangularjshtmlunit

Tips for implementing styling in a material table within a reactjs application

Is there a different way to set the display property to inline-block since cellStyle doesn't seem to recognize it? How can I adjust the width of a specific column, let's say with the name title, without affecting the width of all other co ...

cssreactjsmaterial-uimaterial-table

Having trouble embedding Hangouts button in HTML template using script tags

When I include a Hangouts button on my index page, it is visible and functional as expected: <body ng-app="sampleApp" ng-controller="MainCtrl"> <div class="row"> <div class="col-md-12 m-body"> <div class="m ...

javascripthtmlangularjsgoogle-hangouts

Utilizing Bootstrap 4: The Use of an anchor tag in a button element

I am facing a situation where I have an icon represented by the HTML code <a>, which acts as a link redirecting to a different page. This <a> is nested inside a collapsible button, meaning that clicking on the icon expands the menu before actua ...

htmlcssbootstrap-4

Transitioning from the login screen to the main page in Ionic with the help of Angular

My code is running smoothly, but I encountered an issue when clicking the login button. It changes the state as depicted in the image, altering the URL but failing to open the subsequent page. Can anyone provide guidance on how to redirect to the next page ...

javascriptangularjsionic-frameworkionic-view

"Enhabling tablesorter pagination to ensure that buttons always stay in sync with

I am experiencing an issue with the pagination buttons staying at the bottom of my page, even when there are only 2 entries left on the last page. Check out my table here: Is there a way to make the pagination buttons dynamically move to the top based on ...

javascriptjquerycsstablesorter

Tips for rotating individual letters within a sentence on popular web browsers, including Chrome

Can you make a sentence appear with each individual letter rotating and getting larger? This is my approach: I decided to split the sentence into separate span elements, one for each letter. Then I used CSS transform -webkit-transform to animate the lette ...

javascriptcssgoogle-chromed3.js

Tips for organizing unordered list items into columns, with the text aligned at the top

I typically utilize the following method to arrange my list items into columns: ul.col-list > li {width: 30%; display: inline-block;} However, I have encountered an issue where if the text within a list item overflows onto the next line, it pushes dow ...

css

Optimizing Static File Caching in Yii

Having a frustrating issue with Yii where my local development environment caches CSS and JS files. Despite making changes to the file, the edits do not reflect in the output and sometimes causes corruption leading to broken functionality. This problem see ...

javascriptphpcssyiifrontend

Tips for choosing the right element in CSS

Can someone help me with this issue? https://i.stack.imgur.com/pBu1w.png I've tried setting a CSS selector, but it doesn't seem to be working as expected. What could be causing the selector to not work properly? Any suggestions on how I can f ...

css

Data saved in AngularJS local storage disappears when a new page is uploaded

I have been working on a page containing FAQs, utilizing angular localstorage for data storage. After uploading all the files to a server for sharing, I noticed that the data gets lost and then reappears. The initial upload erases the data since it is my f ...

angularjsangular-local-storage

I am attempting to create basic animations using css, but I'm having some trouble

Currently, I am attempting to add animation to a css div without including the top property in the original div style. I omitted it because I wanted to delay the animation, so I placed it within the @keyframes property. However, the element disappears afte ...

htmlcssreactjsanimation

Creating a responsive design in HTML and CSS to organize images into two columns that stack

<html> <head> <style> .container { position: relative; width: 50%; } .image { opacity: 1; display: block; width: 100%; height: auto; transition: .5s ease; backface-visibility: hidden; } .middle { transition: .5s ea ...

htmlcssimageresponsive-designbootstrap-4

Entwine words around an immovable partition

Is it possible to create an HTML element that remains fixed in place even as the content on the webpage changes, with everything else adjusting around it? I am looking to add a continuous line that spans across a dynamic webpage. No matter how much conten ...

javascriptjqueryhtmlcss