Buttons filling up available space, grouping them into a dropdown - javascript

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.

Related

Show/hide div element according to screen size, but allow that to be reversed by clicking a button

I have a site where I want to be able to show or hide a div based on both user input (clicking/tapping a button) and screen size:
a) If the screen width is greater than a certain size, show the div but allow the user to hide it.
b) If the screen with is less than a certain size, hide the div but allow the user to reveal it.
What I'm struggling with is getting these two requirements to interact properly.
I'm using Foundation 5 and jQuery, so both parts of this are possible - Foundation's "show-for-foo-up" handles initial visibility, and there are numerous jQuery functions that allow a div to be toggled between visible and hidden. But what I can't seem to do is find a way to allow a user click to reveal a div that has initially been hidden by Foundation's media query, or a way to do a pure jQuery toggle (ignoring Foundation) that sets the initial visibility according to screen size.
What makes this more complex is that the div contains a form. So I can't simply repeat it in two different divs and toggle between them, as doing that would either mean duplicate element ids or two different forms, both of which aren't possible in this scenario.
Does anyone have any suggestions? I'm open to either a jQuery solution, a Foundation solution or a pure javascript solution, just so long as it works!
Yes, CBroe's comment put me on the right track and my assumption thereafter was correct. All it needs is to use jQuery to alter the class of the div to add or remove the class which uses a media query. Dunno why I didn't think of this before, really.

Force datatables column to take up full width on small screen

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.

Bootstrap Collapsing Table Rows

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.

Bootstrap: Can I Automatically Break Content into Separate Columns by Setting a Max-Height on the Parent?

I am working on creating a horizontal navbar that has dropdowns in Bootstrap. The dropdowns are really long, so I'd like to break the results into three separate columns stacked side-by-side. I don't want my dropdowns to have a height beyond 350px. This would be simple enough if I could just organize the dropdown list items into three separate divs, each with a class col-lg-4 (since this particular navbar style only appears on screens 1200px and above), except that the entire contents of the navbar are loaded dynamically via AJAX and are subject to change.
I can think of some less-than-elegant approaches to this issue, using JavaScript to count the length of the list and then divide that number and wrap said number of elements in separate divs (this would keep the height below 350px almost always), but I can't help but think there must be a better way.
Is there some way I can set the max-height of the dropdown (an ul element), set the width of the li elements inside using class="col-lg-4", and have the overflow content carry over into a new column? I suspect I must be missing something very obvious.

Javascript to auto size NAV menu columns

I am trying to style a NAV menu that is created and fed in dynamically by a SAAS CMS. I want the menu to auto resize into any given number of Columns.
For example:
If the NAV overall width is 960px. I want the menu items to resize in to say 5 equal columns.
Secondly the menu goes two children deep.
So if the top level is parant. this is seen by default on the page. When you hover the Children appear Similar to this site. http://www.laylagrayce.com/ (Ignoring the images in the menu.) I just want it to resize into equal columns.
How can I do this?
You have heard about responsive websdesign? In this case I think its the onlyest solusion.

Categories