Buttons filling up available space, grouping them into a dropdown

181
August 15, 2017, at 7:39 PM

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

Answer 1

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.

READ ALSO
How to Permanently Disable a button using Javascript in asp.net?

How to Permanently Disable a button using Javascript in asp.net?

I've created a countdown timer using javascript in aspnet

394
Is using several '.filter' calls on a big array bad for performance in Javascript?

Is using several '.filter' calls on a big array bad for performance in Javascript?

I wrote this piece of code to filter an array of wordsI wrote a filter function for every type of word I want to filter out and apply them sequentially to the array:

244
Access list of data in the Master Page code behind to front end of the same master page using Javascript

Access list of data in the Master Page code behind to front end of the same master page using Javascript

I'm loading some of data to a list called "TransactionNames" in the code behind of the master page (TestMasterMaster)

268
AngularJS - Ng-model becomes null after changing view

AngularJS - Ng-model becomes null after changing view

So I have a page called Personal Info page with assigned ng-models

248