I've got a big table that displays a lot of data.
On Destop it looks quite ok, but on mobile it just cuts of the data and I am not able to access what is on the table, like this:
Desktop Version of Table
Mobile Version of Table
Is there any way to make Tables accessible on Mobile? Or is the only way to just keep the data on a couple of rows only? And separate the columns on different cards?
(And yes, I know that this is not the best use for a card, I am still experimenting with mdl).
Thank you a lot.
If this is not late you can use this trick to make it responsive
https://css-tricks.com/responsive-data-tables/
Related
I have a web-app with the front end using materializecss.com framework. It has quite a few data tables throughout. My tables are using css from materialize and I really like the styling. The tables have between 5-8 columns and on mobile you first have to zoom in and then scroll over.
What I'm not sure about is what the best approach is to making this mobile friendly; I've been searching around for code that converts tables into cards and have found some for bootstrap cards but not for materialize. I don't want to hide columns.
I've tried my hand at a few solutions using media query's like: #media only screen and (max-width: 992px)... but I think materialize is overriding them because they are not working. I've tried to mark them !important or search through and modify the materialize css file but it is not working.
How bad would it be to create separate card elements and hide either the table or cards depending on screen size? It's mostly text data and links that are loading so I don't think it would significantly increase data transfer amount.
I'm not a pro at html/css/sass and even worse at javascript so any advice is greatly appreciated!
Adjusting your website in relation to the screen size is called responsive
Try looking for that in your research.
Using materialize gives you the option to the option to define a rowand within that you can make columns and define their size. You can even define the size relative to the screen size.
Try looking into this: https://materializecss.com/grid.html
Materialize also has its own (responsive) table and collection structure that might be helpfull to you.
Also it might be helpfull to use % in your css instead of fixed px
If you this doe not solve your case, try looking into flexbox and overflow.
I hope I understood your problem correctly otherwise some code of yours would be really helpfull :)
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 :-)
Im using datatables in my site for most of the tables. I have done but the design is not so good even in responsive view. if i use div instead of table then datatable will work or not.. If anybody had the solution share me thanks in advance
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.
I've started using squirrel and generally like it. But one thing that bugs me is that it doesn't seem to remember when I've rearranged how a table looks in the Content tab. If I'm looking at a table or view and reorder and resize the columns in a way that makes it easier for me to read, then I switch briefly to another table and then switch back, all my tweaks to how the columns look are gone. Is there a way to cause squirrel to keep/remember how I rearrange things?
Column order should never matter in a database, but I see why you might want this. As far as I know the only way to do this is drop the table and recreate with correct order.