I have recently built a new Vaadin widgetset for our web application. The new widgetset is based on some new addons but especially on vaadin 6.8.12.
When I deploy the ear file and start the application the right vertical scrollbar that belongs to the web browser (not a java panel or layout) is missing. The scrollbar is actually there but you are forced to drag the browser window far to the right in order to make it visible. Even though it is visible you can not scroll down as much as you need to view the lower content of the page.
This is a problem in Chrome, Firefox and Opera but for some reason Interner explorer seems to handle it just fine.
So what I want is that the browser scrollbar should be visible regardless of the size of the window.
Any ideas?
The height of a layout must be undefined for the vertical scrollbar to show up. If you set it to 100%, any content off the bottom of your browser window / tab will be hidden.
If that's not enough, please add some code to see how you made your main window layout.
Related
a normal program, when mouse click and drag windows topbar to the top of screen, this program will auto fullscreen in windows 7+ system
but when I use electron without the frame, and use electron-drag package to control move it, then, what can I do, to let it auto fullscreen when drag to top, and drag left side cover left screen, drag right side...
thanks
electron-drag hasn't been updated for 2 years.
Why not just use electrons built in drag-able style <div style="-webkit-app-region: drag"> I Built a quick app, and added the style to a div, worked fine.
https://electronjs.org/docs/api/frameless-window#draggable-region
Note: -webkit-app-region: drag is known to have problems while the developer tools are open.
See this GitHub issue for more information including a workaround.
EDIT:
create a quick gist showing how to mimic the snapping of a frameless window without using the draggable style. https://gist.github.com/flapjack17/44a9fdd504b832714c24f899a11c0b42
I'm attempting to embed a WebView into a BorderPane as it's middle component. My app starts initially in an unmaximized mode. If I maximize the application, the webview will resize accordingly, but the html & css content will not fill the whole area (it is centered in the WebView). How would I go on fixing this? I've tried to call impl_reapplyCss() and friends, but nothing seems to help.
I created a mobile version of my website, testing along the way on my Nexus 5. After testing on iOS 7 (on an iPhone4 and iPhone5S), seems like scrolling on the side menu is broken.
Here's a live demo (no links work, and you'll see a huge CSS & JS file, since it's for the whole app): http://www.altertecnia.com/menu/
Click on the top left icon, and the menu is displayed. Now, on desktop and Android, I can scroll the whole page (including the menu) just fine, and click on the right side of the menu to close it. But on iOS7, when I try to do that, only the background (content of the page) scrolls, not the menu.
Any ideas what could be causing this?
This is not a question about JQM panels scrolling independently of the page, though that is an issue I've had trouble with and almost overcome, this is about making the panel scroll smoothly and ignore the device browser's edge event (or whatever the correct term is, I'll explain below).
Basically, I'm trying to replicate the menu on Google's mobile site, which naturally isn't using JQM like us common folk. I've got it pretty close, but the scrolling animation is very rigid. I need it be momentum-based rather than fixed to your finger.
Also, when you reach the top or bottom of the menu, it's considered the extremes of the document so the browser moves the whole document up or down to indicate the edge of the page. Instead, the page should never move while the panel is open and the menu should take on this behaviour within the panel.
Since I've set the panel height to 100%, this forces the address bar on iOS Safari to come down when the menu is open. This seems to be exactly what happens on Google, but if there's a way around this I'd love to hear it.
Finally, one downside of the way I've emulated independent scrolling is to just set the content wrap as fixed when the panel is open. However, this means the page always scrolls to the top when the panel opens. Any alternatives for this would be appreciated. I suppose I could just set the page top as scrollTop or something.
To summarise:
Panel menu needs to scroll smoothly (momentum rather than direct touch)
Elastic edge on menu rather than window
iOS Safari address bar interfering with height
Page fixed at top when panel open
If any of my descriptions don't make sense, just visit google.com on your phone and check out their menu.
ScrollFix seems to have solved all my issues.
PLEASE NOTE: This is not a "use two fingers to scroll" problem. Whether it is one finger, or two, or three, or the whole hand, for some reason our iframe does not scroll on an iPad. :)
Here is the scenario:
In our web application, which is built using EXT-GWT, we have a few windows that open as (maximized) pop-ups and present some forms to the users. These forms, which are most of the times external, are rendered in an iFrame and some of the forms have their content collapsed at the initial load - the user can choose to expand any section of the form, fill it in and submit. Now everything works fine except the scrolling in iPad. After the iframe's content is loaded and collapsed (collapsing is done using JS on the client side, basically, the content loads as expanded by default and then is collapsed by JS) iPad just fails to provide scolling to the iframe. Even after the content of the iframe is expanded the iframe does not get any scrolling.
As of now, we have solved this problem by increasing the height (using JavaScript) of the EXT-GWT window to the size of the expanded iframe body content. This makes the whole window scrollable, instead of just the iframe within the window. While it works, the window becomes way to big, so I was wondering if there is any better way for us to provide scrolling to the iframe.
Thanks for the help,
Nitin
For iOS devices you need set overflow: auto; or the scrolling won't work. For my web apps I used fancybox to display iframes modally and once I change the overflow setting in the css file the two finger scroll worked perfectly on the iPad.
After trying (almost) everything, I have come to the conclusion that increasing the GWT window height to the iframe.body.height is the only solution for getting the window/iframe to scroll on iPad. Hopefully, this will help someone in future.
I´m pretty new to GWT, but for me it worked like this:
The parent-div of the iframe has a class in my case, x-component.
I made an entry to my css file like this:
.x-component{-webkit-overflow-scrolling: touch; overflow:auto;}
It works as well if I set these entries not to the class, but to the div-element itself.
Hope that helps