I have a Kendo UI panelbar on a website I'm developing, with a large number of panels (dynamic, but it can be up to 12). On mobile devices, I've found that clicking a panel bar to expand or collapse it will also cause the page to jump to the top. Since the panels are a bit further down the page, we're finding this to be really annoying. It does not happen on a desktop screen though, even if I shrink the window down to about a mobile size (it does happen when I use Chrome's mobile emulation setting, however). Is there a way that I can prevent this from happening?
EDIT: This behavior only occurs with panels that have a Kendo Grid within them, which is most of them; it does NOT occur with panels that just have text.
Related
I have buttons on the bottom of the screen that is covered up by the TestCafe footer when I stop for client-side debugging (t.debug). When I select "Unlock Page" I can interact with my app except for any widgets under the footer. My app has a button toolbar at the bottom which makes the manual interactive mode pretty useless.
NOTE: I can tab to the buttons in the toolbar and hit enter, but this is not a workaround my QA department finds acceptable from an efficiency standpoint.
Is there any way to make the footer disappear or to make the web page act as if its viewport ends above the footer?
Currently, there's no way to hide the footer or move the page content above it. We are aware of this limitation and will work on improving this behavior in the context of this thread:
Allow access to elements under the status panel in debug mode
I am fond of the type of side navigation menu that is common in mobile apps. An example is: http://www.jqueryscript.net/menu/jQuery-Animated-Side-Navigation-Menu-Plugin-Sidebar.html
Which works also for web pages. However, the vast majority of my page is in KendoUI, and I don't want to load another framework just for that.
Is there a combination of tricks with Kendo (draw control for example) that I could use to get the same effect?
Alternatively, I am all wet. I just want a quick way to have a "pop-up" of settings that are only occasionally used, and most of the time save the screen real-estate. So maybe just a button and a pop-up window is the correct approach?
Any advice?
I'm developing for Windows 8 (WInRT) and have problem with settings charm. Settings popup is based on Microsoft SDK settings charm. Settings panel is Popup. Content is wrapped by ScrollViewer -> Grid -> StackPanel. In StackPanel I have input fields. when I trying to fill last of them on screen keyboard overlaying it and I cant see field and cant scroll to it. Is there any way to see it and to scroll to it automatically?
Seems like the popups on Windows 8 suffer from the same problem as they did on Windows Phone in that when you put a TextBox on one of them - it does not get pushed up together with all the other content as it does when it is not in a popup.
My solution to that would be to not use popup for input fields and instead go for a layout that you can manage yourself.
By default the app has a Frame control at its visual root. You can modify it for example by putting your own UserControl in there (I usually call it AppShell) which has the Frame used by all pages, you can have a layer for popups, log in screens, the extended splash screen etc.
To solve your problem you would need to put your charm's UI inside of such layer instead of in a popup. Then the build-in mechanism that pushes all the UI up when the on-screen keyboard would otherwise obstruct the view of your TextBox should just start working again.
*EDIT
A simpler solution might be to make sure your settings panel popup is parented in your visual tree - e.g. by adding it as a child element to a root grid of your app or page. It turns out that in that case its content does get pushed up when the OSK shows up.
Take a look at this post
It's a popup wrapper (turns user controls into popups) that takes care of the keyboard appearing and adjusts the size of the popup (and thus the user control) accordingly.
If I limit WebBrowser's height, and content is longer, scrollbar is created inside the WebBrowser (effectively, HTML page is long), similar to IE in WP7. This scrollbar behaves the way I want to - after swift swipe it continues to scroll, slowing down.
But if I place a div with a scrollbar in the WebBrowser content, this scrollbar behaves like regular HTML scrollbar, it does not keep scrolling after user stops touching the display.
Is there a way to make this work too ?
Thanks
No, not easily. The WP7 IE9 browser control supports the overflow:scroll CSS property that allows the user to scroll content within the current page. It is worth noting that most Android and iPhone browsers do not support this, although it has been added in iOS5. None of these browser support inertia scrolling for overflow:scroll, WP7 included.
The only way to get inertia scrolling for overflow content is to do it yourself using JavaScript. For WebKit browsers there is a popular library, iScroll, that provides this functionality. However, it does not work for WP7 (due to lack of CSS3 3D transforms that are used to push the scrolling content onto a different layer for hardware acceleration) - so you will need to write your own implementation. Good luck!
I am developing an application for WP7 platform (actually WP7.1 sdk). I have a page with an image and couple textboxes in a Grid encapsulated in scrollviwer, that supports both portrait and landscape orientation. I am facing some odd behaviors that rised my two questions:
Is there a solution or at least explanation why in Portrait mode when I focus on any textbox and SIP comes up I cannot scroll through the page in the rest of viewable area? When I try to scroll it with SIP up it always bounces back to the focused textbox so to select another textbox I have to tap elswere to hide the SIP and select another textbox. (its annoying and user unfriendly) In a landscape mode though, I can scroll through the page easily (without bouncing) and select whatever I want with SIP up. I think it has to do something with a fact that in portrait mode without sip you can see all elements and in landscape you have to scroll down to see some textboxes. But if I look into some system apps I see similar pages and it doesnt bounce to focused textbox with the keyboard up, so I dunno what am I doing wrong.
Is there any workaround to correctly position dropdown from autocompletebox control from toolkit while it is declared inside of scrollviewer? Its position is always messed up, most of the time I tried to solve this it showed up over the textbox itself hiding it.
Thanks for your time.
I already did some research but didnt solve anything :-/
Could you please try my solution ?
https://siphelper.codeplex.com/
I would recommend you to read Alex's article on the subject. I think it should answer your problem just fine.
Not really. And you shouldn't have a AutoCompleteBox in a ScrollViewer.