I am trying to add a scrollable grid to a mobile web site I am currently working on. I've tried using the jQuery Scrollable Table Plugin written by farinspace, which works fine in IE8 but doesn't work at all in Opera Mobile for Windows. I've also tried using the Telerik MVC Grid extension, and that also will not give me a scrollable grid.
So, before I give up on the idea and switch to using a paging grid, has anyone ever got anything like this working on Opera Mobile?
I actually gave up on this, as I don't think it would have worked very well at all. Just not a very nice user experience.
What I've gone with is to display the table in it's entirety with no scrolling or paging enabled. So, I am relying purely on the scrolling capability of the browser.
It seems to work really nicely on my blackberry and I think will be nice to use on a touch smart phone too, as the user can just swipe their thumb/finger to scroll down and check the list. Then just swipe back to the top of the list to press the relevant button.
Actually, thinking about it, i might provide a "back to top" link under the grid :)
Related
I am looking for a user friendly way to:
Indicate a table is too wide, and thus scrollable, even when the bottom scrollbar is not visible yet
Allow the user to scroll this table easily, also on mobile
It does not need IE support :)
I found this jquery plugin, which seems to handle that fine:
https://www.jqueryscript.net/table/Mobile-friendly-Scrollable-Table-Plugin-For-jQuery-ScrolTable.html
I would prefer a pure CSS or TS/angular solution, as I would rather not incorporate jQuery when not needed.
Are there any, more modern alternatives? Is there a standard UX approach that I missed?
I don't know if this is a real issue since I am seeing it mostly when using an emulator, but it seems to be reproducible, and I noticed it on a friend's Android device. URL is:
Link To Page
On some devices, particular iPad Retina emulator, when you click on the hamburger it moves the body of the page to the right as expected, but the side menu area is completely blank, despite the fact that there are elements there and you can click on them, they just are not showing up, so they are being rendered but the whole sidebar is just blank (see picture)
I did discover a useful feature on the developer menu with Safari that I was not aware of. You can go to Develop -> Simulator and use the inspector for the page that is loaded in your simulator. Quite a nice feature, but still not able to quite figure out what the issue is.
It is using a Joomla! template and looking at the source seems like it could use a lot of tweaking because there are a ton of .css and .js resources, some of which probably are not needed and some which probably conflict with one another, some which are not needed on the front end, etc.
Help appreciated.
This kind of a fix:
body.jsn-menu-mobile-push-left {
margin-left: 0px;
}
but not ideal. It shows the menu in this case but it doesn't slide out the body to the right. That is a little strange since when the margin-left is set to 0px it doesn't display.
So I have a website with a menu-bar at the top with a sub menu that appears when you hover.
Under the menu, I have a large video playing embedded with the HTML5 <video> tag. However, on safari on ipad, i can not click the links that are hovering above the video, despite me having given them an appropriate z-index.
Can anyone help me out here? :(
edit: here's a jsfiddle: http://jsfiddle.net/7t6c00vn/
The issue seems only to happen on ipad.
The video takes precedence over any other material. Check Putting Video on Canvas on developer.apple.com.
So far as I can see the only solution seems to be to hide the video. Check
A Solution for Overlaid Elements on Video
I would also love to know if there is any other / better solution to this because I'm also in the process of building something using HTML5 and video that needs interaction.
It turns out that it's a sort-of-bug that was fixed with an update for the system. I don't think this problem has a definite answer yet, but I will choose FrankHe's answer as it actually provides some real suggestions and material for the problem.
But yea, things seem to work after the iOS update, so to any end users experiencing overlay problems with Video elements, update your systems! :)
Unfortunately, this also means I no longer have an un-updated device to test on.
I'm facing a problem I can't figure out how to solve. I'm almost sure this is a Chrome bug since in other browsers it works like a charm but I want to be sure. On my website, developed using a mobile first and responsive design approach, I have a menu that uses the Left Nav Flyout pattern. On Tablets and desktops, I show it full width.
When I load the website on my smartphone (specifically an Android device) using Chrome in Portrait mode, once I rotate the device (passing in Landscape mode) and start to scroll the page, as soon as I reach the menu position, the latter magically disappears. What is really strange is that if you try to click the space that now is completely white, you can see that the links are actually there. I tried to use the inspector to find the problem but didn't succeed.
So, wow can I solve the problem? Anyone else had this issue before? If you know it's a bug, I'm glad to add a temporary workaround as well.
I didn't find a real solution but a reasonable workaround. Of course, I still hope that someone will explain what's the cause of this issue and how to solve it.
In the meantime, I found that the problem occurs because the menu, 240px wide, is completely out of the viewport. In fact, as soon as I changed the margin-left to 239.5px the menu didn't disappear anymore.
Right now I'm using a full page layout and p:layoutUnits and page composition in my webapp. I have a fixed header with a menubar, and a content layoutunit, and that's all. It was easy to set up, but in IE (7) when I navigate to a new page the whole page reloads (visibly), the header is cleared then loaded, and - even more annoyingly - the menubar is displayed for a second with all the menuitems visible.
In other browsers this effect is not really visible, sadly, IE 7 is my target.
Now I'm thinking about saying goodbye to p:layoutUnits and implementing the layout with simple css magic and fixed div for the header - would it improve display in IE? Is there anything else I can do to make it faster and smoother? I'd like it to look like the header is not changing at all, only the content.
How about using iframe? Would it allow bookmarkable URLs?
I see this is an old question, but I'll throw in a new answer anyway...
PrimeFaces 3.0 <p:dataTable> supports in-table scrolling. You set a fixed height and width for the data table on your page and within that box the data table is rendered with a scrollbar. The column headers and footers stay put and you just scroll the rows. They just cleaned up some format bugs in their nightly snapshot builds that make the <p:dataTable> look great in IE 7. Might be worth a second look at PrimeFaces for those who (like me) have to support older IE browsers.
LINK: PrimeFaces 3.0 Showcase (scrollable data table)
I've finally decided to say goodbye to p:layout. I have a long table that's two or three times the size of the screen. If I put it in a scrollable layoutUnit then the scrolling is so slow that it is really annoying (tested in IE, Firefox and Chrome - equally slow). Perhaps this widget was not intended for this kind of use (displaying scrollable, long content), but now it is clear that I'll have to do a proper CSS design and stay with raw DIVs.
Nevertheless it was great for quickly putting together an application GUI that can be shown to customers.
For those struggling with layouts, follow BalusC and use simple divs/css and JSF 2.0 Templating. I started with PrimeFaces layouts and could never get it to work with complicated designs.
http://www.mkyong.com/jsf2/jsf-2-templating-with-facelets-example/