Solved

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

Posted on 2008-06-25
3
5,532 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

ScreenConnect 6.0 Free Trial

Discover new time-saving features in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
To remove highlight from a "a href" 5 30
Remove third quote mark from widget 6 23
DataTables + iCheck + pagination Issue 2 19
C# LINQ ForEach() question 6 28
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

770 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