Unwanted horizontal browser scroll bar displayed using IE8 - silverlight-3.0

I have a situation with our silverlight 3 application where the initial load of the main application page shows the browsers horizontal scroll bar.
The width and height of the silverlight control are such that I should get a vertical scroll bar (which I do) and no horizontal scroll bar.
We have a BrowserScrollHelper class that is being used to transfer the silverlight controls size to the containing HTML element on PageLoad and PageResize, as per discussions raised in this post http://forums.silverlight.net/forums/p/26996/442817.aspx.
If I then maximise/restore the browser window, the horizontal scroll bar disappears. It's only the initial page load that doesn't seem to be able to determine the initial requirement state of the horizontal scroll bar.
I know I can use the CSS property overflow-x: hidden to remove the scroll bar but this is just masking the problem. Besides, at the moment the application doesn't need to scroll horizontally but I can't guarantee that this will always be the case.
Constraints to be noted. IE8 is browser of choice, screen resolution is locked in at 1024x768.

I have seen random extra pieces of display being generated by the browser (IE 8) and have not been able to track it down.
Specifically a strip 8 pixels high at the screen bottom was causing the vertical scrollbar to appear (although the SL object was at 100% and not other elements were present).
In the end I changed the overflow property to hidden. It is perfectly valid to use that hidden option in any CSS browser (i.e. anything that runs SL), so do not worry too much about it being "bad".
I would however also be interested in any other answers that help track the actual cause of these glitches.

Managed to work out what was happening with the scroll bars.
The code in our BrowserScrollHelper that we were using to communicate the silverlight control's size back to the browser was using this code:
double clientWidth = BrowserScreenInformation.ClientWidth;
double clientHeight = BrowserScreenInformation.ClientHeight;
double width = Math.Max( clientWidth, this.MinWidth );
double height = Math.Max( clientHeight, this.MinHeight );
htmlElement.SetStyleAttribute( "height", height.ToString( ) );
htmlElement.SetStyleAttribute( "width", width.ToString( ) );
While this code snippet looks OK on the surface it was only doing part of the job. The key was in realising that setting the height may affect the width and vice-versa, and we were only running through this code once on application startup.
The resolution was to follow the pattern of either:
Set Height, Set Width, Set Height
OR
Set Width, Set Height, Set Width
This ensured that a single pass through the code would correctly communicate the silverlight control's size back to the browser giving it a chance to get the vertical and horizontal scroll bars correct.
The working code looks like this:
double clientHeight = BrowserScreenInformation.ClientHeight;
double height = Math.Max( clientHeight, this.MinHeight );
htmlElement.SetStyleAttribute( "height", height.ToString( ) );
double clientWidth = BrowserScreenInformation.ClientWidth;
double width = Math.Max( clientWidth, this.MinWidth );
htmlElement.SetStyleAttribute( "width", width.ToString( ) );
clientHeight = BrowserScreenInformation.ClientHeight;
height = Math.Max( clientHeight, this.MinHeight );
htmlElement.SetStyleAttribute( "height", height.ToString( ) );
In our case the end user is mostly likely to launch the browser maximised and leave it in that configuration for the entire session and not perform any resizing of the browser window.

Related

Awesome WM: Ignore wibox geometry

I've been tweaking my rc.lua for a while now, and, in favor of a cleaner look, thought of having the wibox as not visible by default.
I already have the means to toggle the visibility, and set it to not visible by default.
The problem is with the layouts and the window padding.
All layouts (except for floating) respect the wibox geometry when I toggle it's visibility. My idea was having it appear on top of the windows, but when I toggle, all windows resize to make space for the box.
I already tried setting the wibox type to different values, and making it floating.
There's no code on the layout's source that explicitly describes that behavior (to my knowledge, at least), so I think it must be a property of the wibox.
Any ideas?
Thanks in advance for your help.
Try unsetting its struts: w:struts{ left = 0, right = 0, bottom = 0, top = 0 }
Only top = 0 should be required (assuming your wibox is at the top), but it doesn't hurt to reset other sides as well. :-)
Struts are a concept introduced by EWMH. It allows a window to reserve some space at the edge of the screen. When creating a wibox, awful.wibox sets e.g. the top strut to the height of the wibox (assuming you have a wibox with position = "top"). This then causes the C code to subtract this value from the available workarea of the screen.

Can I set the width of UIWebBrowserView?

I have a UIWebView on iPad and its frame is CGRect(0, 0, 540, 620).
When it opens a page it appears like this.
The web content is large than my frame. (web content in blue border)
I found the view in blue border is UIWebBrowserView.
So, can I set the UIWebBrowserView's width via my web view?
Or, is there other ways to make my web page content to fit my web view size?
You either need to zoom out the content (using the scrollView property of UIWebView) or set an appropriate meta tag with a correct viewport, so that the content appears in the correct size.

Fitting jQuery mobile dialog to height and width of page, especially during orientation change

Is it possible to fit a jQuery mobile dialog to the height and width of a page, especially during orientation change on a tablet? I've tried wrapping a div inside the dialog and setting its height and width to percentages, but that has not worked for some reason. Setting that div to a static width and height works fine, but then looks bad on orientation change.

Blank band when setting height of div less than the height of the screen

I am working with phonegap for a new project recently. In my app, I want to keep the status bar, and the rest of the app don't scroll. I can't deactivate the touch since I need it for a div which should be scrollable. This scrollable div is only a part of the app.
I have tried to set the body's and the root div's height to 548px. But this does not prevent the app from scrolling, and I get a white bande for the area outside the height that I have defined.
Here is a screenshot.
Any idea on how I could define the height of the root div in order that its height corresponds to exactly the rest height of the screen (that is to say, 568px-20px=548px, on iphone 5) so it doesn't scroll.
Thanks in advance!

jQuery UI issues with tables in dialogs

I have a jQuery UI dialog to which I applied a padding, and inside the dialog I have a long table. I then configure the dialog to be of limited height in order to have a scrollbar.
It seems that whenever a nowrap is applied to the table cells, the padding to the right of the table is covered by the scrollbar. If I remove the nowrap, it works fine.
Here is an editable example:
http://jsbin.com/okolap/4/edit
It seems that it only happens when you set the dialog's width to auto.
One workaround is to set the table's width to 100% and reset the dialog's width to a fixed length. The length needs to add a padding equal or larger than the width of the scroll bar. For example:
var newWidth = $('.Dialog').width() + 50;
$('.Dialog').width(newWidth);
See this in action: http://jsbin.com/okolap/10/.

Resources