I made some experiments with WP8 (Lumia 920) HTML5 app and stumbled into an interesesting behaviour. I tried to create multi-resolution handler for graphics, but it didn't quite work as intended when I assumed the resolution would be 1280x768 (WXGA, landscape orientation). After debugging I noticed that screen.width&height returned correct values, but window.innerWidth&Height returned 1024 and 614.
More info:
-The graphics DID fill the screen, even though window.innerWidth&Height values are strange (1024x614)
-WebBrowser controls Vertical and Horizontal alignment is set to "Stretch". (I did try with "Center", but it didn't work at all. I only got blank screen.)
-I tried to set my main div's width to 1280 and height to 768 with CSS. Didn't change the behaviour. Though, part of the div's contents were off the screen.
-I tried to set WebBrowser controls Width & Height properties to 1280/768
-I implemented the ResolutionHelper class which confirms that the App.Current.Host.Content.ScaleFactor is indeed matching WXGA. Well, obviously it should match, because screen.width & screen.height returns correct values... (ResolutionHelper is described here: http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj206974(v=vs.105).aspx )
and finally, XAML definition for my app (I tried with and without the Grid control):
<phone:PhoneApplicationPage
x:Class="HTML5App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Landscape" Orientation="Landscape"
shell:SystemTray.IsVisible="False">
<Grid x:Name="LayoutRoot" Background="Transparent">
<phone:WebBrowser x:Name="Browser"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Loaded="Browser_Loaded"
NavigationFailed="Browser_NavigationFailed"
/>
</Grid>
</phone:PhoneApplicationPage>
And the HTML... (note that I did try to set my #wrapper div's width and height as 1280 / 768)
<!DOCTYPE html>
<html style="-ms-touch-action: none">
<head>
<title>X</title>
<style type="text/css">
html,body {background-color: #333;color: #fff;font-family: helvetica, arial, sans-serif;margin: 0;padding: 0;font-size: 12pt;}
#wrapper {width:100%;}
#content {width:80%;margin:0 auto;text-align: center;}
#content button {width:100%;height:45px;border:1px solid #fff;color:#fff;background:#000;margin-bottom:15px;}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<h1>My title</h1>
<button>Btn 1</button>
<button>Btn 2</button>
<button>Btn 3</button>
<button>Btn 4</button>
</div>
</div>
</body>
</html>
Sorry if I missed something important information here, just ask for more if needed :)
So the question is: what is the logic behind these strange window.innerWidth and window.innerHeight values?
Oh well, I managed to fix the issue with CSS definition:
#-ms-viewport{height:device-height}
#-ms-viewport{width:device-width}
but added...
#viewport{height:device-height}
#viewport{width:device-width}
... just to make sure it will work. So the thing is that my phone (and probably most of the other phones) failed with viewport (visible screen area) scaling. This CSS definition makes the browser's viewport to be same size as the device's screen.
Summary: I guess the phone is not that smart after all, YYEAAAHHH! :)
Related
I'm trying to create a mail signature in html format and paste it to Thunderbird.
I've noticed when I display it in browser (Chrome, Firefox, IE, any, 100% zoom) - it is larger in size than in Photoshop (100% zoom).
My HTML code (all three samples are displayed in the same size):
<html>
<body>
<img src="test_image.jpg"></img>
<br><br>
<img src="test_image.jpg" width="400" height="191"></img>
<br><br>
<img src="test_image.jpg" style="width:400px;height:191px;"></img>
</body>
</html>
Test image: http://protein.nmr.ru/fish/pics/test_image.jpg
Comparison: http://protein.nmr.ru/fish/pics/comparison.jpg
Signature HTML file: http://protein.nmr.ru/fish/pics/signature.html
What am I doing wrong? I've tried also different dpi settings with the same result.. How to display it as in Photoshop?
<img src="http://protein.nmr.ru/fish/pics/test_image.jpg" alt="Mountain View">
<img src="http://protein.nmr.ru/fish/pics/test_image.jpg" width="auto" height="auto">
<img src="http://protein.nmr.ru/fish/pics/test_image.jpg" style="width:400px;height:191px;">
Using the word auto should display the picture with its native resolution, so try using that attribute and see what happens. The funny thing is that I got all three of them to be the same size too. I used the chrome inspect tool to see the dimensions of the picture and it was 400px X 191 px, which would explain why the second and third elements would show the same thing. I'm guessing that the first element also shows the default resolution of the picture.
I have a Windows Phone 8 application (please note that it's not 8.1) and I have the following struggle.
I have a page containing a StackPanel. Within the StackPanel there are several objects like buttons, textboxes and a LongListSelector.
The LongListSelector is bound to an ItemsSource. Because it can contain a lot of items I had to set the MaxHeight (otherwise it exceeds the limit of 2000px of vertical screen space)
However when scrolling the page down I stumble upon the LongListSelector. I can than scroll the LongListSelector too, which is fine. But when I scroll to the end of the LongListSelector it won't 'snap' to the StackPanel so it just leaves the page there and doesn't continue with scrolling to StackPanel.
A short code example:
<StackPanel>
<Button />
<TextBlock />
<TextBox />
<Button />
<LongListSelector>
This contains a bunch of items
<LongListSelector/>
<TextBox />
</StackPanel>
So what happends is.. I can scroll the complete page to the LongListSelector. I can scroll the LongListSelector. But when I'm at the end of the LongListSelector.. It wont continu scrolling the page.
So I never see the last TextBox (in this example that is)
I've also tried replacing the LongListSelector with a ListBox but that doesn't make any difference.
Hope that someone can help me out here.
From your Question what I understood is that the total height by summing up your UI Elements is more than the Page Height. If you put a ScrollViewer Tag at the start and End of StackPanel. It will work just fine. In ListBox and LongListSelector it is implied.
<ScrollViewer>
<StackPanel>
<Button />
<TextBlock />
<TextBox />
<Button />
<LongListSelector>
This contains a bunch of items
<LongListSelector/>
<TextBox />
</StackPanel>
</ScrollViewer>
So... Any bright ideas how we can enable Horizontal content stretching on the GroupHeader template of a Grouped ListView in Win RT - phone?
I'm all ears!
I've added a demo application so you can try it out - please do before posting your answer!
Code can be found here https://github.com/Depechie/ListView-HorizontalStretch-RT81
I added 2 pages, MainPage has the problem of not having Horizontal stretching.
MainPage2 has a fix for Horizontal stretching, but because of that fix, the JumpList ( zoomed out view ) is not working anymore.
You can navigate from MainPage to MainPage2 through the appbar button.
Here the 2 visuals
Your fix is overly complicated and deprecated. What you need for your group header style is as simple as the following:
<Style x:Key="FixedHeaderContainerStyle"
TargetType="ListViewBaseHeaderItem">
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
</Style>
And apply it to your ListView like so (old ContainerStyle is deprecated and replaced with HeaderContainerStyle):
<GroupStyle HidesIfEmpty="True"
HeaderTemplate="{StaticResource AddrBookGroupHeaderTemplate}"
HeaderContainerStyle="{StaticResource FixedHeaderContainerStyle}" />
BUT the header fix wasn't the reason why your ZoomedOutView stopped working. The issue is because you added the following to MainPage2:
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
VirtualizingStackPanel breaks this and the new and improved panel (that includes virtualization is ItemsStackPanel, which is also the default now so omit this altogether.
If I understand the problem, add Width="{Binding ElementName=LayoutRoot, Path=ActualWidth}" to your MobileAppsGroupHeaderBorder on MainPage. That'll render as full width like MainPage2 but the jump list functionality is maintained as normal.
I hope this isn't too vague of a question, but I feel like I'm running into a brick wall, so I'd really appreciate any and all feedback.
In a nutshell, what I'm trying to do is create a simple webpage, wherein the content is maintained by someone else (who has very little coding knowledge). My thought was to set up a page with a big frame in the middle, and to have tabs up top that would change the content in the frame. (This way, the person who maintains the page will only need to worry about the individual pages that are displayed in the frame; they'll never have to make changes to the main webpage itself.) So far, I've gotten this to mostly work pretty well.
The problem I'm having is with the height of the frame. More accurately, I'm having a problem with the div it's inside of. I'd like it to be adjustable - based on the height of the content it's pulling in - but I can only seem to set the height manually. The reason I want it adjustable is because the content it's pulling in for each tab is going to vary.
Thank you in advance for any suggestions you may have... even if it's to tell me to try another solution altogether. My main goal here is to create something that can be maintained by someone who doesn't really know any html. I figured using a frame would be perfect, since they could update that piece in Word, but there may be some other method I'm not thinking of. I'm open to all suggestions.
*edit: Here's some sample code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Indexfiles\style.css" />
</head>
<body>
<div id="wrapper" style="text-align: center;">
<div id="menubar" style="display: inline-block;text-align: center;">
<a href="Indexfiles/iframe1.htm" target="Mainframe"><div id="tab"><h6>Tab 1
</h6></div></a><a href="Indexfiles/iframe2.htm" target="Mainframe"><div id="tab"><h6>Tab 2
</h6></div></a><a href="Indexfiles/iframe3.htm" target="Mainframe"><div id="tab"><h6>Tab 3
</h6></div></a><a href="Indexfiles/iframe4.htm" target="Mainframe"><div id="tab"><h6>Tab 4
</h6></div></a><a href="Indexfiles/iframe5.htm" target="Mainframe"><div id="tab"><h6>Tab 5
</h6></div></a><a href="Indexfiles/iframe6.htm" target="Mainframe"><div id="tab"><h6>Tab 6
</h6></div></a>
</div><br />
<div id="maincontent">
<iframe src="Indexfiles/iframe1.htm" width="100%" scrolling="no" frameborder="0" name="Mainframe"></iframe>
</div>
</div>
</body>
</html>
If you use iframe you can dynamically adjust the size of the iframe to fit the content using javascript as follows:
var iframe = document.getElementById(iFrameId);
iframe.width = iframe.contentWindow.document.body.offsetWidth;
iframe.height = iframe.contentWindow.document.body.offsetHeight;
Edit:
You can try to see if this will work:
<script>
function resizeIFrame() {
var iframe = document.getElementById("MainFrame");
iframe.width = iframe.contentWindow.document.body.offsetWidth;
iframe.height = iframe.contentWindow.document.body.offsetHeight;
}
</script>
<div id="maincontent">
<iframe id="MainFrame" onload="resizeIFrame();" src="Indexfiles/iframe1.htm" width="100%" scrolling="no" frameborder="0" name="Mainframe"></iframe>
</div>
This is what my iframe*.htm files looks like as an example:
<!DOCTYPE html>
<html>
<head>
<title>iframe</title>
<style type="text/css">
body {
padding:0px;
margin:0px;
box-sizing: border-box;
-moz-box-sizing: border-box;
float:left;
border:1px solid rgb(200,200,200);
}
</style>
</head>
<body>
<div style="float:left; width:160px; height:500px;">Frame</div>
</body>
</html>
Important: when testing this you must run these files through a web server and have the files in the same domain otherwise your browser will block the request due to security issues.
If you have Chrome installed you will see the following error message when you view the javascript console:
As long as the div has an id, it's height can be updated in an included css file.
your_page.html:
<link rel="stylesheet" href="your_style.css" />
<div id="your_frame">
[Frame Contents]
</div>
your_style.css:
#your_frame{
height: 40px // Just tell your developers to change this number (they'll never have to open the html file). Also, if you have google chrome, you can fiddle with this number in the Developer tools.
}
Depending on the scenario, you can use javascript to set the height more intelligently.
EDIT:
Here's an approach that requires even less maintenance:
The div inside of your html page:
<div id="your_frame">
<div id="your_contents">
Contents Go Here
<br>
<br> More Contents
<br> Even more contents
</div>
</div>
The css:
#your_frame{
border-style:solid; # <-- using a solid border so you can play with these code chunks in JSfiddle.net
#height:100px; # <-- omit the height (let the div auto-size/auto-wrap the contents)
}
#your_contents {
#height:100px; # <-- omit the height (let the div auto-size/auto-wrap the contents)
margin-top:10px; # <-- I think what you're really after is the margin adjustments
margin-bottom:10px;
margin-left:10px;
}
By default a div will automatically extend to the height of its parent container. Changes in this behavior often relate the the position property of its children. For instance if all of a divs children are absolutely positioned the height of the div will be at its default height. I don't have an example of what you are doing so I can only guess at the cause of your issue.
Alternatively, if you are open to alternatives. The scenario that you present is typically solved by the use of Content Management Systems. You would just need to customize the look and feel for your purposes.
http://en.wikipedia.org/wiki/Web_content_management_system
This question was previously posted on Primefaces forum where I din't receive any answer.
I'm trying Primefaces 3.1 because I would need the overlay panel functionality.
Unfortunately in my Internet explorer 8 (ie8) the following very simple overlay panel is never displayed, while it works quite fine on Firefox 5.x.
Some points in the html code which seem directly related to the Ie8 problem are the following:
- the page doesn't need a vertical scrollabar (if the page has one the overlay panel is shown)
- the overlayPanel height is fixed.
<h:body>
<div style="height: 300px"></div>
<h:form>
<p:commandLink id="showAllUserList" value="Utenti online" />
<p:overlayPanel for="showAllUserList" my="right bottom" at="right top" dynamic="true"
style="width: 300px; height: 500px; border: 1px solid red; overflow-y: scroll" >
He who rules the skies rules the ground
<br/>
Monti kicks ass
</p:overlayPanel>
</h:form>
</h:body>
If I don't find a workaround soon I would have to implement something myself.
Thanks
Filippo
Put the following Javascript code before closing the h:body Tag.
<script type="text/javascript">
if ( $.browser.msie) {
if(parseInt($.browser.version, 10) === 8){
var overlayPan = $("div.ui-overlaypanel");
$(overlayPan).css('position','fixed');
}
}
</script>
You might try setting appendToBody to true for the overlay panel. This can help in some situations, though to be honest I think your page is simple enough that it wouldn't make a difference.
Check your styles for overflow:hidden (also of the child elements of .ui-overlaypanel), play around giving them overflow:visible - in combination with a fixed size (as you already have) I was able to solve the problem.