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


say have top header of view in application. header row should single row, , contains action items input boxes and/or action buttons. when have, say, 5 action items in header on fhd resolution these doesn't take available horizontal space ok. on smaller screens, ipad (landscape, 1024px width) these action buttons, accumulated, have more width available. generic responsive solution wrap items new row, right? in case can't wrap multiple rows need achieve group action items doesn't have enough space dropdown.

how possibly identify items doesn't have enough space items need put dropdown? javascript solution? there common way solve this?

thanks

the common way solve using css media queries.

for example, css tricks website uses on navbar: https://css-tricks.com/

you can see on desktop sized view there list of links on left hand side of page. if resize page smaller list of links collapses dropdown 'hamburger' style menu in top navbar.

read media queries here https://developer.mozilla.org/en-us/docs/web/css/media_queries/using_media_queries.

media queries allow add conditional rules based on screen size.


Comments

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -