We are trying to show a large table (more than 50 columns and 100 rows) using jQM in a web application for iPAD and desktop users.
JQM works fine for us, but in our first possibility (a pure html table in a division), the vertical scroll works fine even having a floating footer, but the table was truncated horizontally, the horizontal scroll is disabled.
Then we tried to use differents experimental scrollviews (JQM Scrollview) but it doesn't work at all if we create the table via DOM.
Any suggestion? Which is the better way to show large tables in JQM? Any tested grid to use with jQM?
EDIT:
We added an example here. http://oterrada.webatu.com/test.html
It's not really documented but could you try:
$('#dataContainer').scrollview();
Try my work-in-progress tableview plugin I did using filaments responsive table patterns
Click on the gear icon far right.
This opens a custom-jqm-select where the user can decide, which columns he wants to be visible. All columns without class "persist" can be toggled this way. There should be enough info in the source code to get you started. A lot is taken from JQM listview (filtering, inset, ...), so you should be able to find your way around if you are familiar with JQM.
The solution is adding $('#dataContainer').scrollview(); after populate the table but be carefully if the division has de data-scroll="true" because if it has it, the scroll doesn't apply correctly.
Related
I am using bootstrap select plugin to generate custom dropdowns in one of my projects but I am stuck in a very critical issue. The dropdown list is big and when dropdown is opened the screen moves/scrolls toward bottom a bit so that first few options can't be seen.
Issue can be seen here in this video:
https://drive.google.com/file/d/1SWQVvfOgO0-iLy0KjIf3sPEANKu8Nkpv/view
And if you want to play around please check here the color filter:
https://www.stylorita.com/new1/outfit-ideas.php
Important: I can not use the max-height or add a scrollbar to it for fixing, I must display it without scrollbar. Please anyone can help?
If I understand you correctly, the solution is for whatever reasons NOT a scrollbar, but you want the first entries of your dropdown list to stay in view, right?
Maybe JS scrollIntoView() may help: If you have the chance to apply a class to your first list entry, you could use scrollIntoView when the list opens (which is normally the case at getting the focus or on click).
You can find a short description of scrollIntoView on this page: https://www.w3schools.com/jsref/met_element_scrollintoview.asp
I have created a Form in Kentico which I want to use on a full page for registration.
The issue I have is that the form is only displaying as one column, there is a lot of space remaining to the right of the form, so ideally I would like the form to sit over 2 columns. BUT, I need it to reformat itself for the screen size.
I have tried Custom and Auto Generated Layouts, but no joy with either, I have also tried adding a table with 2 columns to achieve what I want, this works fine on desktop, but when displaying on mobile, the user is presented with a horizontal scrollbar, so not a great experience.
Please can someone point me in the right direction with this one. Thanks.
What you are trying to achieve can be done with the proper use of CSS or, more often, with the use of some front-end framework to do the work for you.
For example, Bootstrap can do forms very easily - see for yourself.
There are many other frameworks you can use instead of Bootstrap such as Semantic-ui, Foundation or Material to name a few. Take a look here for more examples.
Now, for the integration with Kentico - you will need to use Custom layout and follow the HTML/syntax from the given framework & you will of course need to include the styles/js on your master page. Thats pretty much it :-)
I know there're some threads regarding the following issue but I didn't find anyone that suits me.
I'm trying to create a chrome extension that creates a dynamic table inside a div.
The div fills the whole window and the table is being position at the top right corner. Another important thing - the table is draggable. Till here all is good.
Unfortunately on some sites the tables ui looks a bit different due to css overwritten.
Most of the solutions suggest the use of iframe, now because of the drag-and-drop and that iframe consume all the mouse events I cannot use them.
Any other suggestion would be great!
I saw this question, which is exactly what I need, but the only answer is for a plugin that is years old and no longer updated. Is there any way to achieve this without using a plugin? And if a plugin is the only option, are there any newer ones available?
My specific issue is that sometimes tables are cut off at just the right place, that it looks as if they are complete. I need the scrollbar to be visible so users know there is more information. Also, some charts are interactive, and do not allow scrolling except when using the actual scrollbar (which is difficult when you can't see it).
This might be helpfull.
Webkit Scrollbars
I am trying to put together a simple portfolio site, and have implemented a basic responsive design into the CSS as well (at the very bottom of it), and it behaves just fine - shrinks the 5 columns down to a single column and hides a few elements when I resize the computer browser. But on iPhone/Android browser it doesn't make any difference.
Here is the page in question -> Sample Page
And I can't figure out what the issue is... as in, this should be fairly simple to do, but apparently it's not, and now I'm losing sleep over it... so might as well ask here.
Have you [also] consider the use of viewport meta-tag? Just check This.
I tried loading the site but it seems like your custom js file is not found(404 error).