The PopOver positioning set to match the linked button

tutorials
1

Hey! I’m not sure if the forums was the best place for this question, so please correct me if I’m doing anything wrong.

So I want to have my popover fixed in the center of the screen. Here is my styling code I’m using to do so.

.popover {
position: fixed;
top: 50%;
left: 50%;
margin-top: -125px;
margin-left: -100px;
height: 250px;
width: 200px;
}

The only problem with this is, the position of the popover is always 25 pixels below the button used to show it. And it is centered below it as well, so it can’t be moved left or right, or up and down. I tried to change the CSS in the ionic.css file, but I was met with the same result. Is there any file or css I can change to override this?

2

Can you create a working example and I’ll make it work. Template can be found here.

Just search for a text: Simple template

3

I can’t get the code I’m using to work in Plunker. Is the ionic framework any different?

4

It shouldn’t be. Forget about plnkr.co then, you can also create it in Codepen, here’s some official Ionic examples, use any one of them: http://codepen.io/ionic/public-list/

5

Nevermind I got it to work. Sorry. Does this link work fine? Example

6

It’s working just fine.

Here’s your working example: http://plnkr.co/edit/rvYcFwsALS1pLKExWGJY?p=preview

Don’t be afraid of !important keyword, it’s your best friend :smile:

1 Like
7

Thank you so much! It’s working much better. :smile:
I’ll be sure to keep !important in mind.