Ok button of ionicPopup is not aligned properly

ionic-v1
1

I’m using a very basic ionicPopup to show alert message with only ‘ok’ button, and notice that the button is not align properly. This is the code:

var showAlert = function(msg, title) {

 var alertPopup = $ionicPopup.alert({
   template: 'hello world',
   okText: 'ok'
 });
 alertPopup.then(function(res) {
   
 });

};
and this is how it looks like:

2

looks strange and i dont have this kind of problem.
do you have a codepen so we can find the problem?

3

no… but as far as I can tell the code I posted is the only relevant one…

5

sorry, I can’t reply properly. I noticed that I have the following css in my index.html:

 <link href="css/bootstrap/3.1.1/bootstrap.min.css" rel="stylesheet">

once I commented the popup looks ok. Not sure why I added it originally and if it’s really needed.

6

another update: I added this css for angularjs typeahead component, apparently it’s not fully compatible with Ionic.

7

sorry was not accurate i mean css :smiley:
its possible that 3th party css do not work well with ionic

as far im trying just to use ionic css + my customisation

8

yes. I’ll try to do the same. thanks.

9

If you really need Bootstrap include it before Ionics CSS, then make sure that popup.button’s properties have ! important set.

10

Thanks. Adding the following css solved the problem:

 .popup div.row {
  	margin-left: 0px;
 }
1 Like
12

This worked for me! thanks!