I am using "GWTP" not "GWT", there no RootLayoutPanel to add TabLayoutPanel into it.
In Eclipse, i can generate MyPresenter, MyView & MyUiBinder.ui.xml files automatically.
So, in MyUiBinder.ui.xml, i have
<g:TabLayoutPanel ui:field="mainTabPanel" barUnit="PX" barHeight="60" width="100%" height="100%">
<g:tab>
<g:header>Welcome</g:header>
<g:HTMLPanel height="100%" > Some more stuffs here
</g:HTMLPanel>
</g:tab>
</g:TabLayoutPanel>
However, after ran, it only shows the Header of the Tab, I can't see any contents of HTMLPanel. But when set height="600px" for TabLayoutPanel then i can see, i don't want fixed height. I wants height of TabLayoutPanel to 100%.
So how to use TabLayoutPanel properly in UiBinder in GWTP?
Short answer: you will need height="600px"
Long answer: See GWT TabLayoutPanel do not renders the graph content
Related
I have an SVG of the US states, and need anchor links to scroll to the state info on the page below. The anchors work fine on desktop and android, but not on IOS. The state changes to to hover color when clicked and does not link, and the hover color remains.
I found some suggestions to use xlink:href, but that is depreciated. I did try it to see if it worked and it did not. I have also tried some suggestions providing jquery code, but it did not work and also stopped the links from working on desktop.
The SVG is set up with hrefs wrapping each path like this:
<svg viewbox="0 0 959 593"> <a href="#ak"> <path id="AK" ...">
<title>Alaska</title></path></a>
(I've removed the long string of code for the path)
Here is the link to the page with the map. The anchor links work on desktop and android and not IOS:
https://www.automatictrap.com/pages/trappable-species
I have never posted here before, so I apologize if this is not enough info.
This has been resolved. Some of the anchor links on iPhone only seem to work when "a id" is used, and the links from the SVG only work when "a name" is used.
So I have an iFrame displaying a Facebook page and I am trying to enable the native 'bounce' type scrolling however can't get anything to work.
I have tried this:
iframe {
overflow-y: scroll !important;
-webkit-overflow-scrolling: touch !important;
}
But have had no luck so far - tested on both simulator and real iOS device.
Any ideas?
I faced the same problem when our team built epub3 reader app on iOS.
Followed EpubJS v0.3 example, we could handle the problem.
Here is an example:
<div style="width:320px;height:570px;-webkit-overflow-scrolling:touch;overflow-y:scroll;">
<iframe scrolling="no" src="..." style="width:320px;height:8071px;"></iframe>
</div>
Note: you have to calculate iFrame height and set the CSS style (ex: 8071px). Using javascript, you can use
iframe.contentDocument.body.scrollHeight
You may ask me why we have to set height style. Followed some suggestions does not help us to handle handle dynamic content problem (you can see the problem here). By setting height, we can dynamically add or remove highlight texts of users.
Hope that helps,
This would be my approach...
Step 1. Increasing the size of the iframe until the scrollbars dissappear, like this: http://davidjbradshaw.github.io/iframe-resizer/
Step 2. Use David Walsh his trick with a parent div that scrolls the iframe: https://davidwalsh.name/scroll-iframes-ios
But I think it will fail, because of the lack of authentication for cross domain iFrames.
UPDATE: What if you would enlarge the iframe based on the scroll position of the parent div? So parent div scrolls 100px and you make the iframe 100px larger... (given the fact that the iframe has infinite height and assuming its scrollbar is hidden)
I'm developing a Cordova project, building the user interface with jQuery Mobile (first project using any of them), and I'm having problems adding a logo image to the header.
Since it makes the header bigger than default, the header overlaps the content in the main div as in this capture:
If I navigate to other page and return to this one, then everything looks like it should:
I've read that when jQuery Mobile initializes the page, the header image is not loaded and the header is much smaller, so I've tried
this is my html for the image:
<div data-role="header" data-id="header" data-position="fixed">
<h1>
<img src="img/flycosette_logo-88cb7efa9f6acfcaf246f8523e87805d.png" alt="FlyCosette"/>
</h1>
</div><!-- /header -->
And this my css in a custom file called after jQM files:
.ui-header img {
width: 100%;
}
I've tried the approach in the quoted link:
$(window).on('load', function () {
$(this).trigger('resize');
});
but it doesn't work for me.
I've also tried placing the image inside a div, instead <h1>, and setting the code for it instead of the image, playing with several properties, but it doesn't solve the problem and the image size does not display as well as in the screencaptures...
So, any idea on how to fix it?
When you get back to the page, JQM internally triggers an event called upateLayout which probably also adapts the content positioning relative to the header. Try triggering this yourself by doing something like:
$([your_page]).trigger("updatLayout");
See if this works. Maybe you need to call it on the header or content instead of the page.
After refactoring my code, I've been trying all different solutions once again, and it turns out that the initial solution:
$(window).on('load', function () {
$(this).trigger('resize');
});
from the post: https://stackoverflow.com/a/11110607/3708095
is what finally solved my problem.
I'm calling the script with that code after the </body> tag, below all the html (not sure about how was it being called before), and now is working.
Sorry for the inconveniences.
Is there any way to completely remove the header in the Windows Phone 7 control toolkit ListPicker? E.g., setting the header height size = 0 or something similar?
In my app I want to remove the header in order to reduce the space taken up by the list picker. I'm going to have the default selected item in the list picker with a descriptive text instead (along with a valid value of course). I've solved that part.
Thanks in advance for any help!
Download the source from here:
http://silverlight.codeplex.com/SourceControl/changeset/changes/71382
Open up ListPickerPage.xaml (Microsoft.Phone.Controls.Toolkit -> ListPicker)
Find this section of code:
<!-- Header Title -->
<TextBlock
x:Name="HeaderTitle"
Grid.Row="0"
FontFamily="{StaticResource PhoneFontFamilySemiBold}"
FontSize="{StaticResource PhoneFontSizeMedium}"
Foreground="{StaticResource PhoneForegroundBrush}" Visibility="Collapsed"
Margin="24 12 12 12">
<TextBlock.Projection>
<PlaneProjection RotationX="-90"/>
</TextBlock.Projection>
</TextBlock>
Note that the Visibility is now set to Collapsed
Then, below it, find the ListBox code
<!-- List of Items -->
<ListBox
x:Name="Picker"
Grid.Row="1"
ItemsSource="{Binding}"
Opacity="0"
toolkit:TiltEffect.IsTiltEnabled="True"
Margin="24 -24 0 0"
Tap="OnPickerTapped"/>
</Grid>
Note that I changed the margin here to -24.
Mess with it till you find the look that you need. Make sure you have your app use the DLL that is created when you build the Silverlight Toolkit project.
There could be a better way. For example, you could create your own PickerPageUri .
But, I'm not entirely sure that modifying the UI in this way to achieve another 40px of space is really worth breaking the WP7 paradigm. But whatever, your choice.
I've a question.
I wrote a small app in Dreamweaver CS 5.5, to export it using Phonegap's SKD to an iOS app.
But the problem is: How can I prevent the user from moving the screen up and down when he slides with his fingers? I read on the Phonegap wiki that it is possible with DIV tags. But that won't work for me, because I use an index.html who reffers to frames. I don't use the the body. How can I prevent the user from slide the screen up and down?
index.html:
<html>
<frameset cols="625,*" border=0 framespacing=0 frameborder="0">
<frame src="frames/navbar.htm" scrolling=auto name="main">
<frame src="frames/blank.htm" scrolling=auto>
</frameset>
</frameset>
</frameset>
</html>
Have you checked out this helpful web page?
http://wiki.phonegap.com/w/page/16494815/Preventing-Scrolling-on-iPhone-Phonegap-Applications
You may want to check out iScroll http://cubiq.org/iscroll if you want the content under it to be scrollable with momentum.
Also disabling "touchmove" events will prevent any kind of movement from the user.
document.addEventListener('touchmove',function(event){event.preventDefault()});
iOS 5 gave us support for fixed elements and -webkit-overflow-scrolling: touch; but those don't give the best effect and can sometimes not work as expected.