I'm looking recommendations for something similar to a table of four columns that would collapse into a dropdown on mobile devices. My original code is a bootstrap table but the table at it's smallest size is still too big for mobile devices. I'm thinking I could collapse into a drop down because really all that needs to be seen on mobile devices is the first row which contains a clickable link to an expanded detail view.
The simplest approach may be to use two different controls - a table for bigger screens and a dropdown for smaller screens - and include both in your page.
Then hide the control that is not required based on the screen size. Since you're using Bootstrap already, look into its responsive utilities. You will find predefined CSS classes like .hidden-sm or .hidden-lg that help you with that.
Related
BACKGROUND: I have a jQuery datatable on my website that I want to look, act, and feel like a table on desktop sizes. When it hits a small screen size (as definied by Foundation - 39.9375em), I want to hide the header and footer (which I already basically figured out) and have the first column take up the full width of the page and force all the other columns to a child row. The other columns just have buttons/links that take you to other pages having to do with the name of the row. Things like settings, status, etc.
QUESTION: How do I force the column to take up the full width?
WHAT I'VE ALREADY TRIED: I tried setting white-space: nowrap, but then it just responsive hides the whole column and then I'm left with literally just the control thing. So it's like an accordion. I tried to look up how to force the other columns to be hidden responsively, but I couldn't find anything and I can't think of any way to do it myself.
Thanks in advance!
After some playing around, I found a solution on this page of the datatables documentation: https://datatables.net/extensions/responsive/classes. For all of the columns except the title column, I simply put className: 'min-tablet-l'. That way, as soon as we hit landscape tablet size, the columns are automatically thrown into the child row and the control turns up that lets me show/hide it is shown too.
Say I have a top header of a view in the application. This header row should be single row, and contains action items like input boxes and/or action buttons. When I have, so to say, 5 action items in the header then on FHD resolution these doesn't take up the available horizontal space which is OK. Then on smaller screens, like an iPad (landscape, 1024px width) these action buttons, accumulated, have more width then the available. The generic responsive solution would be to wrap some items into a new row, right? Now in my case I can't wrap into multiple rows but what I need to achieve is to group those action items which doesn't have enough space into a dropdown.
How could I possibly identify which items doesn't have enough space so that which items I need to put into the dropdown? Is javascript the only solution? Is there a common way to solve this?
Thanks
The most common way to solve this would be using CSS media queries.
For example, the CSS tricks website uses this on their navbar: https://css-tricks.com/
You can see that on a desktop sized view there is a list of links on the left hand side of the page. But if you resize the page to be smaller this list of links collapses into a dropdown 'hamburger' style menu in the top navbar.
Read about media queries here https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries.
Media queries basically allow you to add conditional rules based on screen size.
I am currently developing a page for mobile.
It requires a form that divides into two columns in landscape mode. Above the form I would like to place two divs where both have different heights.
I would like to adjust each column's y-position according to those divs.
Can I use CSS3-columns in this scenario?
The technologies I can use are HTML, SASS, JQuery Mobile and Javascript.
I am looking for Javascript / Jquery Table Plugin, which should have following functionalities included in it.
Fixed Header of table (Header Lock with Elements Scrollable)
Few Columns Locked while scrolling (say first two columns)
Drag and drop with column
Column Resizing (like Excel)
Column Priority Change in Responsive views (e.g Table Saw Like Plugin)
Horizontal Scroll on column exceeding on than current views
Sorting
I have group of plugin's which gave me these individual options separately. I am looking combination of it.
If anyone have any good reference link, then please suggest.
Regards,
Sopo
I have a table that have important information in left column and in the top row, therefore these should always be visible, I then want to have Pages in the bottem for horizontal "scrolling" and a normal scroll for vertical scrolling.
Is there a Jquery script that supports this?
It would look something like this
If your requirement is to display basic data then you could use one of the Jquery plugins available for this purpose like Datatables. They are very flexible and you could do most of the basic things using one of their extra's.
If your requirement is more than just displaying data. It has complex edits, custom features for each column and stuff then your better of with a custom implementation. We've build such a table which has integrated autopopulates, calendar and other completely custom features by having a div float beside the table and using Jquery to control the scroll. The header and the frozen column on the left are usually separate tables/divs themselves and are just aligned as per the table using Jquery. They work quite well for IE 8+ and other browsers.
Does this work? (I used CSS, not jQuery, sorry)
http://jsfiddle.net/mAnQp/
Update: added pages
http://jsfiddle.net/mAnQp/3/