How to remove scrollbars from Modal Box & inside container ?

MikeCombe
MikeCombe used Ask the Experts™
on
I have a modal popover box.
I would like to remove the scrollbars from both the outside modal box AND the inside container (which is an iframe).
Is that possible ?
Is it in the css settings ?

 I would prefer to set my box & container sizes by hard code, rather than the automatic use of scroll bars.

Reference the attached picture for example.

Here's the code:


basic.css
#basic-modal-content {display:none;}
/* Overlay */
#simplemodal-overlay {background-color:#000; cursor:wait;}
/* Container */
#simplemodal-container {height:460px; width:500px; color:#bbb; background-color:#c3cfcd; border:1px solid #444; padding:6px;}
#simplemodal-container .simplemodal-data {padding:8px;}
#simplemodal-container code {background:#141414; color:#bbb; display:block; font-size:36px; margin-bottom:6px; padding:4px 6px 6px;}
#simplemodal-container a {color:White;}
#simplemodal-container a.modalCloseImg {background:url(../img/basic/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
#simplemodal-container h3 {color:#84b8d9;}


default.aspx
<link type='text/css' href='modal/basic/css/basic.css' rel='stylesheet' media='screen' />
<script type='text/javascript' src='modal/basic/js/jquery.js'></script>
<script type='text/javascript' src='modal/basic/js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='modal/basic/js/basic.js'></script>
<script type="text/javascript" language="javascript">
    $(function () {
        $(".basic2").click(function (e) {
            e.preventDefault();
            var link = $(this).attr("href");
            $.modal("<iframe src='" + link + "' width='760px' height='540'></iframe>");
        });

    });
</script>



Hyper-link in default.aspx that activates the modal box popover:
<a href="foo.htm" class="basic"><img src="images/foo.jpg" alt="foo" border="0" /></a>
modal.jpg
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
LZ1
Top Expert 2011

Commented:
If you have a live link, you can show us that way, because honestly we're not 100% sure what element is getting the scrollbars.  

Start here though by giving #simplemodal-container a property of overflow:hidden

Author

Commented:
sure...

www.debikarmann.com

click on the "My Story" RED BUTTON under the picture
LZ1
Top Expert 2011

Commented:
Ok, it looks like it's being added inline to the element.

You may need to modify the javascript in order to fix that
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Thanks for the reply.
Unfortunately, it more of a comment rather that a solution.
LZ1
Top Expert 2011

Commented:
Try this for your on page call

    $(function () {
        $(".basic2").click(function (e) {
            e.preventDefault();
            var link = $(this).attr("href");
            $.modal("<iframe src='" + link + "' scrollbars='no' width='760px' height='540'></iframe>"),
		  	{containerCss:{overflow:hidden}}
			;
        });
    });

Open in new window

thanks.....but that gives me this error....

Microsoft JScript runtime error: 'hidden' is undefined

However...this is interesting.....
adding --> src="[jquery file]" avoids the runtime error, but makes the entire
default.aspx webpage redirect to the 'link'

<script type="text/javascript" language="javascript" src="[jquery file]">
    $(function () {
        $(".basic2").click(function (e) {
            e.preventDefault();
            var link = $(this).attr("href");
            $.modal("<iframe src='" + link + "' scrollbars='no' width='760px' height='540'></iframe>"),
                    {containerCss:{overflow:hidden}}
                  ;
        });
    });
</script>

Author

Commented:
no solution provided

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial