[Resolve] Problem with IonicPopup size

ionic-v1
1

Hi!
I have a custom ionicPopUp and I try to change the height and the width of it, but it doesn’t work. Can you help me?

myPopup:

var myPopup = $ionicPopup.show({
      templateUrl: "product-popup.html",
      scope: $scope,
      buttons: [
        { text: 'Fermer',
          type: 'button-bleu'
        }
      ]
    });
 };

The HTML template:

<script id="product-popup.html" type="text/ng-template">
                <table class="popup-produit-item">
                    <tr><td colspan='2'><img src='img/shop/{{item.image}}.jpg' class="fullsize"/></td></tr>
                    <tr><th>Produit</th></tr><tr><td>{{item.title}}</td></tr>
                    <tr><th>Caractéristiques</th></tr><tr><td>{{item.feature}}</td></tr>
                    <tr><th>Format</th></tr><tr><td>{{item.format}})</td></tr>
                    <tr><th>Impression</th></tr><tr><td>{{item.print}}</td></tr>
                </table>
            </script>

The CSS:

.popup{
width: 600px;
height: 450px;
}

The height is working fine but the width is never modify (I’ve tried several value).

2

The width is set here

.popup-container .popup {
    width: 250px
}

So you can override it using !important:

.popup{
    width: 600px !important;
    height: 450px;
}
2 Likes
3

Hi!
Finally, I change the width directly in .popup-container .popup.
Thank you for your answer, I wouldn’t think it was so simple! :wink:

1 Like