Achieving compatibility between angular-bootstrap modal and angular-1.3

Wondering if anyone has managed to successfully use angular-bootstrap modals with angular-1.3.x?

I've had no issues with my modals on angular-1.2.x, but as soon as I upgraded to angular-1.3.11, the modals stopped showing up.

When I click the button to open the modal, the scrollbars disappear and it seems like the modal is there without being visible. When hovering over where the modal should be, the mouse cursor changes indicating that it's present (there are draggable elements inside). Clicking the area where the modal should be makes it appear normally.

In other words, the modal exists but remains invisible in angular-1.3.11 until interacted with. After clicking it, everything functions as expected.

I prefer using angular-1.3.x due to the bind-once feature they've introduced.

Seems like a potential styling issue to me. Not sure why the update to angular would cause this difference. Reverting back to 1.2.x shows the modals properly again.

I am aware that angular-bootstrap doesn't officially support angular-1.3.x yet, but since the basic functionality still works, it feels like a feasible fix. Just unable to pinpoint how to resolve it. Any guidance would be greatly appreciated.

cssangularjsmodal-dialogangular-ui-bootstrapangular-bootstrap

Answer №1

$modal has been successfully integrated with angular-1.3.x (specifically tested with version 1.3.11) by customizing the bootstrap css settings for opacity and transforms. The following adjustments were made to make it function properly:

.modal.fade {
  opacity: 1;
}

.modal.fade .modal-dialog, .modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

Hopefully, this workaround proves helpful to those attempting to use angular-bootstrap-0.12.0 in combination with angular-1.3.x.

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

Exploring the Power of JQuery Load and CSS styling

Currently, I am dynamically loading text into a div. However, I am encountering an issue where the content below this div is constantly shifting depending on the loaded text. Is there a way to restrict the space allocated to the div with the dynamic conte ...

jquerycssajax

What is the best way to send data via the HTTP POST method in AngularJS?

I have a situation where I am using the same HTTP method in different controllers as shown below: Service: var method="sampleMethod" HotalStatisticService.GetReservations = function (data) { return $http({ method: 'POST' ...

angularjs

Resetting CSS animations in Vue is a simple process that can be achieved

Here is a sample list: var v = new Vue({ 'el' : '#app', 'data' : { 'list' : [1,2,3,4,5,6,7,8,9,10] }, methods: { activateClass($event){ $event.target.classList.remove('animate'); ...

cssvue.js

Increase ng-grid row height dynamically based on content without any external plugins or reliance on jQuery

I came across a similar question on this topic at Angular ng-grid row height However, none of the solutions provided there meet my requirements. If I use CSS to fix the issue, it impacts the page's responsiveness and disrupts ng-grid's header fu ...

javascriptcssangularjsng-gridrow-height

The Clash of Backdrop Modals and Dropdown Menus

Looking for a solution to ensure that the datetimepicker stays in place when a user scrolls, even after opening the Modal backdrop with the "Open" button? The challenge lies in maintaining the position fixed for the modal while preventing the datetimepic ...

htmlcssdrop-down-menubootstrap-modaldatetimepicker

Struggling to populate a nested array in a dropdown using AngularJS

I am currently working on populating JSON data into a dropdown list, specifically focusing on main category, sub category and sub sub category. Successfully managed to populate the main category and sub category, but facing challenges with populating subsu ...

javascriptangularjs

Adjust the CSS to give <a> elements the appearance of plain text

Is it possible to style an anchor tag to appear identical to plain text? Consider the following scenario: <p> Here is some text and here is a <a class='no-link' href="http://www.example.com" >link</a></p> I have atte ...

htmlcss

Tips for arranging two jumbotrons with proper spacing in Bootstrap without stacking them vertically while using the mr-1 class

My issue involves two jumbotrons, each with a col-md-6 class, positioned nicely next to each other. Currently, they are contained within a modal, but for the sake of example, I have created a fiddle without the modal to showcase the same behavior. If I app ...

jquerycssbootstrap-4

Jquery deactivates the CSS hover effect

Having a dilemma with linked photos on my website. I have set their opacity to 0.45 by default, but want them to change to full opacity (1) when hovered over or clicked. I've implemented a JQuery function that resets the rest of the photos back to 0.4 ...

javascriptjqueryhtmlcss

AngularJS: Unable to preserve the data

I'm currently working on an issue with saving updated functions using angularJS. I've managed to edit the data and update it on the database side, but the changes aren't reflecting on the frontend side unless I logout and login again. I need ...

javascriptangularjs

Tips for arranging content below a stationary header

I have a question about placing two divs below the header and making it fixed. I am experiencing an issue where my divs are not visible because they are going inside the fixed element. Can someone offer some assistance on how to solve this problem without ...

htmlcssbootstrap-4

What's causing this unexpected wrapping issue?

I must be overlooking something simple. Could someone please review this page and explain why the BYOB section is appearing on the right, rather than directly below the American section? Thank you in advance. ...

htmlcss

Unable to apply Login Form Css to HTML

Creating a Login Form <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Login Form</title> <link rel = "stylesheet" type="text/css" href="{{ ...

htmlcssflask

Applying FAB (Material UI) to span across 2 columns in a CSS Grid: A step-by-step guide

Is there a way to make the zero button larger than the other buttons in its row by spanning 2 columns? I would like it to be an oversized oval shape. Appreciate any assistance you can provide. import "./styles.css"; import Button from '@mui/materia ...

cssreactjsmaterial-ui

implementing a sidebar menu using AngularJS

I am currently working with bootstrap and AngularJS to create a sidebar menu. Here is the code I have for it: <ul class="nav navbar-nav"> <li><a href="#"><span class="glyphicon glyphicon-send"></span> Link</a& ...

htmlcssangularjstwitter-bootstraptwitter-bootstrap-3

What is causing the TypeError when trying to set a property on undefined in AngularJS?

I've taken on the challenge of building a microblog app to learn more about angularJS. One thing that's really getting me is trying to understand the differences between service, factory, and provider. After some research, I decided to go with s ...

javascriptweb-applicationsangularjs

Unable to inject basic service into component

Despite all my efforts, I am struggling to inject a simple service into an Angular2 component. Everything is transpiling correctly, but I keep encountering this error: EXCEPTION: TypeError: Cannot read property 'getSurveyItem' of undefined Even ...

angularjsangulartypescript

Exploring nested objects within Stylus

My build script compiles my stylus code and includes some data. stylus(stylFile) .set('filename', 'index.css') .define('data', require('./data.json')) .render(...) The data.json file contains groups with nes ...

javascriptcssjsonnode.jsstylus

Updating the background image of a React app according to each component

After researching extensively and attempting various solutions, I am still struggling to make my app function correctly. My goal is to display a different background image depending on which component is being rendered on the screen. The app is built using ...

cssreactjsmaterial-uibackground-image

Two interdependent select fields

I am currently working on creating two select fields where, upon selecting an option in the first field, some options in the second field should be hidden. I have almost achieved this, but my script is unable to locate certain options in the first select f ...

javascriptjqueryhtmlcssselect