Solved

Vertical scroll bar not displayed.  Cuts off silverlight app to the height of web browser.

Posted on 2008-06-25
3
5,529 Views
Last Modified: 2013-11-12
I have a 800 x 825 pixel silverlight app that I'm displaying from within a html web page.  Everything looks fine when I view the app from the web browser of my desktop PC where I have a big monitor, however when I view it from the web browser on my laptop the application is cut off vertically as the window of my laptop web browser is only about 800 pixels tall.  What I would have expected is that I would have had a vertical scroll bar on the side of the browser.  You can actually view the page in question at www.silverlightwebapps.com.

Below is a snippet from the page.  I tried adding "overflow: scroll" to the style section to see if that would make the scroll bars appear but it didn't.

    <style type="text/css">
    html, body {
          height: 1000px;
          overflow: scroll;
    }
    body {
          padding: 0;
          margin: 0;
    }
    #silverlightControlHost {
          height: 1000px;
          width:800px;
          overflow:scroll;
          
    }
    </style>

...later within the body section I have the silverlight object tag
<div id="silverlightControlHost">
<object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" width="100%" height="1000px">

0
Comment
Question by:mdobbles
3 Comments
 
LVL 1

Expert Comment

by:kkretsch
ID: 21873566
Just to be shure it isn't a silverlight problem:
Did you try to use an image of the same dimension instead of the whole object tag?
If that doesn't scroll like you would like it is a simple css/html problem. In that case I would reduce all the redundant height attributes but leave the height on the image tag. SO it should scroll by itself.
0
 
LVL 8

Expert Comment

by:adler77
ID: 21889584
The Silverlight animation is way off the top and left for me, but I do have two separate scrollbars. Try setting the dimensions only in the silverlightControlHost div (set it exactly to the dimensions of the app, 800x825. For the Silverlight params, use 100% for height and width.
0
 

Accepted Solution

by:
mdobbles earned 0 total points
ID: 21926137
It turns out the problem was that whenever you build an application in ExpressionBlend the default.html file is overwritten by ExpressionBlend, so all the things I changed actually we're not really changed.  The key was to create a new web project in Visual Studio 2008 and include the ExpressionBlend project as a subproject of the VS2008 web project.  That way you can manage both the website part of the project and the Silverlight part.  I'm going to put a tutorial on this topic at my website SilverlightWebApps.com here shortly.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Element alignment and word wrapping 9 60
razorCMS: Change Menu Font 4 47
HTML CSS 7 38
Autoprefixer and text editors 1 24
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

914 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now