Hi
I have a popup on this page which shows instructions to customers. it is activated by clicking on text which is displayed instead of the price on any item with zero price.
The issue is that the popup works on all parts of the site except the product page
http://shopability.ie/index.php?dispatch=products.view&product_id=10383
The popup is obscured behind other elements, I know this is being caused by css overflow values of the other elements but if I change any of them the popup becomes visible but my layout breaks.
Could someone help me to fix while keeping the product layout as it is.
Alan
Please add into [color=#ff0000]design/themes/basic_clone/css/addons/my_changes/mystyles.css[/color] file:#tygh_container .notification-container {
margin: 0;
padding: 0;
position: fixed;
right: 10px;
top: 5px;
width: 600px;
z-index: 9999;
}
I hope that helps,
—
Valentin
[color=#808080][size=2]part of hungryweb.net[/size][/color]
As suggested by Vali, the CSS provided will fix the annoying cookie legislation positioning.
To fix the pop-up issue…at present, add to your mystyles.css
.prices-container .ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.ui-draggable {
left: 0px !important;
}
Not a very elegant solution, but it does the trick. Also changing the page to use a 4-grid and 12-grid instead of 4-8-4 with the last grid column empty will likely also fix the problem.
Hi Guys
Thank you for your responses, but none of them worked.
The only way I can get the popup to show in the product layout is the changer the overflow value in the below in the base.css
If I change visible hidden to visible. the popup shows with not issues.
The only problem is that the custom message moves left to below the image. This subsequently pushes
the add to cart button of the visible screen.
I could live with the text moved but if I could move the add to cart button up the layout.
product-info {
overflow: hidden;
position: relative;
Alan
PS anyone else having issue being notified of responses left on the forum I have followed a few topics and receive only the odd email. maybe one in every ten responses.
Using Firebug, after JS has executed, the CSS I mentioned does work for me. However, the “left” value is set dynamically.
You may have better luck by asking on stackoverflow - loads of guys there are CSS experts and will provide a solution in minutes.
I read all the lines now 
, i was thinking of that cookie low you are talking about
Please add into [color=#ff0000]design/themes/basic_clone/css/addons/my_changes/mystyles.css[/color] file:```php
.product-main-info .product-info{ overflow: visible }
<br />
You need right column on this page? (product details page)[quote name=‘Vali’ timestamp=‘1386005021’ post=‘172751’]
I read all the lines now , i was thinking of that cookie low you are talking about
Please add into [color=#ff0000]design/themes/basic_clone/css/addons/my_changes/mystyles.css[/color] file:```php
.product-main-info .product-info{ overflow: visible }
<br />
You need right column on this page? (product details page)<br />
[/quote]<br />
Thanks Vali<br />
I am just not much on css and the bit I was missing was <br />
.product-main-info before .product-info <br />
making the overflow visible does move my layout left and down below the image. but I can live with this as I moved the add to cart button up so it is showing on no scroll.<br />
<br />
Alan[quote name='StellarBytes' timestamp='1386003640' post='172748']
Using Firebug, after JS has executed, the CSS I mentioned does work for me. However, the “left” value is set dynamically.
You may have better luck by asking on stackoverflow - loads of guys there are CSS experts and will provide a solution in minutes.
[/quote]
Thanks StellarBytes
I will pose the css question of the layout moving left on stackoverflow, I have been able to solve slightly by moving my add to cart button up the layout to make it visible on no scroll.
Alan
A simple solution can be also to hook dialog outside of product-info but the link [color=#ff0000]Click here for information on purchasing this product [/color]remain in the same place, in this case the dialog will be visible and the css style[color=#ff0000] .product-main-info .product-info{ overflow: visible } [/color]can be removed and the old structure will remain as before