issue with long terms & conditions

[spencer321]

My terms and conditions are quite long (5,094) characters with spaces. I probably will need them to be longer as I add new products. At any rate, when a buyer clicks to read the terms and conditions the screen comes up and they are unable to scroll down to click the I agree button. this is with 1024 x 768 resolution.

[spencer321]

i figured it out. i just had to modify the css for the modal styles. i set the modal to be a fixed height and width and then set the overflow to auto.

[keats76]

I just ran into this myself ... the AC staff should take note as this would be a good addition to the core styles. Thanks for the fix spencer321!

--Mike

[gio50000]

I'm having difficulties with modal popup (see screen shot attachment below).

I applied the changes mentioned by spencer321 to the .modalBackground class but nothing.

Any other ideas?

Code: Select all

/******************************************************************************************/
/* begin styles for modal popup dialogs                                                   */
/******************************************************************************************/
/* background for main page when modal popup is visible */
.modalBackground { background-color:Gray; filter:alpha(opacity=70); opacity:0.7; }
.modalPopup { background-color:#fff; border-width:3px; border-style:solid; border-color:Gray; padding:3px; width:650px;overflow:auto;height:650px;z-index:2; }
.modalPopupHeader {
    cursor:move; background-color:#DDDDDD; border:solid 1px Gray; color:Black; margin:-3px; padding:6px; font-weight:bold; }
.modalPopupText { padding:10px; }
.modalPopupScroller {}
/* style for the click to view price popup */
.pricePopup {
    background-color:#E3EFFF; border-width:3px; border-style:solid; border-color:Gray; padding:3px; width:300px;
    position:absolute; left:50%; margin-left:-150px; z-index:99; }

/* style for header of modal popup dialog */
.pricePopupHeader{
    background-color:#DDDDDD; border:solid 1px Gray; color:Black; margin:-3px; padding:6px; font-weight:bold; }
.pricePopup span.fieldHeader { display:block;float:left;width:135px;text-align:right;margin-right:6px; }
.pricePopup span.fieldValue { display:block;float:left; }

[mazhar]

You browser may be using the cashed version of CSS, try clearing its cache and then give another try.

[gio50000]

@mazhar - No luck with deleting browser cache.

While looking at the code with Firebug I notice several inline CSS styles (see below) . All of them are causing the issue. Any ideas how this happen because they are not in the code of external CSS file?

Code: Select all

<div id="ctl00_wpm_CheckoutPage_ctl01_ModalPopupExtender_foregroundElement" style="position: absolute; z-index: 100001; left: 621.5px; top: 999.5px;">
<div id="ctl00_wpm_CheckoutPage_ctl01_TCDialog" class="modalPopup" style="z-index: 2; position: relative;">
<div id="ctl00_wpm_CheckoutPage_ctl01_TCDialogHeader" class="modalPopupHeader">
<div>
<p>Terms and Conditions:</p>
</div>
</div>
<div class="modalPopupText">
<div class="modalPopupScroller">
</div>
</div>
</div>
<div id="ctl00_wpm_CheckoutPage_ctl01_TCDialog_DropShadow" style="background-color: black; position: absolute; left: 5px; top: 5px; width: 662px; height: 662px; visibility: visible; z-index: 1;"/>
</div>
<div id="ctl00_wpm_CheckoutPage_ctl01_ModalPopupExtender_backgroundElement" class="modalBackground" style="position: fixed; left: 0px; top: 0px; z-index: 10000; width: 1905px; height: 1683px;"/>