IonicModal modal is showing only black dropdown but not html markup

ionic-v1
1

Hi There

Im trying to implement ionic modal just according to the examples but its not working

more correctly when i click the button i see the black drop down and the modal object in the console is well defined, but i dont see my modal html

what am i doing wrong?

btw i tried with the exact copy paste code of the documentation

2

So i’ve tried to look into the modal object and compare it with fresh ionic project

i’ve noticed that it has en $el element and that in the fresh project it had value of JQlite[1] and in my other project (the non working) it had other value , this was caused by my main project loading jquery as dependency

i removed that dependency (jQuery) and the value of $el is now the same yet i still don’t see the modal html.

i expanded the $el element and its first property is a div with value modal-backdrop.hide

where as the proper working modal has a property of modal-backdrop (without the hide)

i think this might be the problem…

3

found the problem
link href=“css/bootstrap.min.css” rel="stylesheet"
ootstrap.min.css
im importing it because i need a calendar widget
upon removing it ionic own css setting worked

4

I also get this issue, remove this css worked. But if I must use that css , how can i do it?
(from China. Apologize my English level :weary: )

5

I had the same problem.

The .modal class in bootstrap.css sets the element on display:hidden;

So if you don’t need the modal-styles of bootstrap, simply customize your bootstrap file at Customize at getbootstrap.com and uncheck “Modals”.

That’s the way i managed to use bootstraps pagination styles and display beautiful modals of Ionic.

Regards

2 Likes
6

Nice solution DeeMo

This is exactly what I want… :slight_smile: