Pop-ups drops off screen

-- HikaShop version -- : 2.2.1
-- Joomla version -- : 3.1.5
-- PHP version -- : 5.3.27
-- Browser(s) name and version -- : Firefox 23.0.1
-- Error-message(debug-mod must be tuned on) -- : Error_message

Hi.

Pop-ups drops off screen. Eg in Order status change like this:



And in css editing pop-up.



Joomla bug?

When turning on mootools in pop-up mode it shows correctly. But when inherit or bootstrap mode is on it drops the pop-up down off screen after about 1 second.

I need to have bootstrap mode on. So what to do?

I have not made any changes to the css or anything else in the administrator area. Worked fine untill the latest upgrades in joomla and hika.

Regards

/Mathias

Hi,

I think that it's because your display is zoomed in. Reset the zoom of your browser to 100% and the popups should display properly centered.

Strange, I have 100% zoom in the settings.

When setting the zoom to 90% it looks like this:




And when I turn it back to 100% zoom. It looks like this.



As I mentioned before, when pop-up mode is mootols it shows correct. But in bootstrap mode the pop-up is pushed down off-screen.

I have also performed the same test with Chrome and Opera and get the same result.

/Mathias

Hi,

It's maybe your template which don't support very well the bootstrap popup.
With 90% it seems to be working fine.

I am also having this same exact problem. I don't know where to look on the template to fix it. I am using the protostar(front end) and isis (backend) templates, out of the box.

Besides zooming out to 90%, did anyone come up with a solution?

-- HikaShop version -- : 2.2.1
-- Joomla version -- : 3.1.5
-- PHP version -- : 5.3.27
-- Browser(s) name and version -- : Firefox 23.0.1

I also have the Isis template. I tried this fix and got everything working now.

In the hikashop Back end css file: Change the div.modal.fade.in top value from 50% to 10%. That did it for me.

Like this:

@media only screen and (max-width: 1280px) {
div.modal.fade.in{
width: 960px !important;
margin-left: -480px !important;
top : 10% !important;
left: 50% !important;
}
}
@media only screen and (max-width: 960px) {
div.modal.fade.in{
width: 800px !important;
margin-left: -400px !important;
top : 10% !important;
left: 50% !important;
}
}
@media only screen and (max-width: 800px) {
div.modal.fade.in{
width: 640px !important;
margin-left: -320px !important;
top : 10% !important;
left: 50% !important;
}


Regards

Mathias

Thanks for sharing your solution Mathias