We Keep Coding

Buttons filling up available space, grouping them into a dropdown

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.

Scrollable table with fixed header and column as well as selective fixed rows

I need a table as shown in the image.
The requirements are:
the header row (very first blurred row) is fixed when we start scrolling down the table
the first column is fixed when we start horizontal scrolling
additionally, as we scroll down, the colspanned rows in black color (I'll call it the row-group heading row) - "Title 1" and "Title 2" - will become fixed, below the header row, when all rows that belong to its group are in view. And when we scroll further down, and when the next group of rows come into view, the previous row-group heading row will go away and in its place (right below the fixed main header row) the row-group heading row that corresponds to the rows in current view will be fixed.
We're building a react app. We checked out: react-sticky-table, and other non-react libraries like: Stickytable and Sticky-kit.
None of them seem to be doing what we want.
Is there a JS (react or non-react and preferably non-jquery) library that does this?
If not, assuming that we get the first-row header and the first column fixed using any of the above mentioned libraries, is there a way to make the row-group heading rows fixed/static based on scrolling?
I also prefer the table be built using <table> group of elems, and not just divs. But it's not a strict requirement.
UPDATE: Just found this plugin that seems to be doing this: http://maslianok.github.io/stickyRows/multiplerows.html. It's great, but keeping this question open for pureJS or react solution.

I have worked on the same UI but it was the mixture of pure javascript and jQuery, however less concerned about the front end library, as most of them fail at certain point of requirement or amount of data.
I suggest go with your own solution I did the same it is acceptable to clients since 5 years.
1. Create a separate tables for your header and content.
2. Give each cloumn exactly same column span width. E.g. ,<colspan width="50px">
3. Place a separate table with one column in LHS.
4. Write a code in javascript which scrolls your LHS table along with your main table.
Apologies as it is hard to give working example.

Fixed header within table when scrolling the table

Problem:
I have a table that is too large to be a liquid style element for mobile. My solution was to make the overflow-x: auto. Works great and is pretty much how spread sheets on mobile apps work. One problem, the table can be confusing to read with the header being within the offset-y portion. I sometimes find myself scrolling back up just to see what column of data I'm looking at.
Question:
Is there a way to keep the table header in a fixed position within the table itself using CSS/JS - jQuery so that when the user is scrolling through the data, the header is always showing just like you would expect it to be in a mobile app? (Numbers for mac also does this). I don't mind using CSS3 since this is for mobile.
Other Things That Have The Same Behavior
Apple Numbers When you scroll down and the headers should be out of view, they stay fixed until you pass up the table.
iPhone Instagram App when scrolling through feed, the user's header stays in view until new post shows up.
iPhone Contacts App When scrolling through All Contacts the letter section you're in stays on top until a new letter shows up.
I just want to make sure you guys know what I'm talking about because I couldn't find anything similar to what I wanted to do. Not sure If I'm typing in the wrong search terms or what. But it's pretty much a hybrid style between float and fixed.

Code drops has an excellent article on making the table headers fixed while scrolling.
The solution is based on JQuery and it works for both, row heading and column heading
Sticky Table Headers & Columns

This is what you're looking for: https://css-tricks.com/persistent-headers/
It's been done many times before.

Multiple Dynamic Columns

I'm trying to create a column-based, blog layout. I want the text to wrap to a new column when it hits the bottom of the page. At it's very simplest form something like, when the column height == the_height_of_the_wrapper then column-count++.
The problem with something like that would be the text would be distributed evenly. Also, that would rely on css columns and I want something a bit more browser-friendly. Are there any existing plugins for this functionality or anywhere I can get some ideas?
If anyone is familiar with any of the text-heavy windows 8 "metro" apps (such as the news one) that's the kind of layout I'm trying to mimic.

As i noticed in comments, you cannot use column-count there. But there is solution, check this one please: Continuing overflowed text in a different div?
Alternatively. You can apply a fixed height (even a percentage will work) to the wrapper the columns will fill appropriately. (example: w3schools.com/css3/tryit.asp?filename=trycss3_column-count). It even seems as though you don't have to specify a fixed column count as it appears to create extra columns as the content dictates.

Dojo(x) Widgets within HTML table do not resize

I have the following page using Dojo 1.3.1 javascript toolkit
Content Pane
HTML table two columns, N rows
Column 1 (left): text
Column 2 (right) Dojo widget (can be any, but mostly Grids, pullodwn, etc)
Problem:
When page loads, it renders Ok (the type of widget and the number per page are determined at runtime, so I cannot manage this with static CSS)
When I add rows to the grid, while it is embedded in the Table cell
<td> grid </td>
the the given row (where the grid is embedded) gets
proportionally taller and
everything below the grid disappears and there is no scroll bars on the Content Pane
to get to the the rows below.
I do not know how to solve it, I have set 100% or auto height and width on
everything around the page. That does not help.
I am wondering if my design approach is wrong and it is unsolveable.
I have read about people telling not to use Tables for layout, but
I do not know at design time the order and the type of controls that I will
be displaying.
How else can this be done?
I think the problem is that when a grid is within a Table cell,
and the grid expands, the cell expands, but the holding content pane is not aware
it so borders do not get redrawn.

You could use CSS for layout -- what is it that tables can do and CSS don't? Or, you could try using another dojo grid instead of that HTML table, depending on what you're after.

Dijit's widgets work like normal nodes as much as possible. But many widgets, especially ones that let the user define what size things are (as you can with column widths in the grid) need to know specific dimensions.
The good news is that with most of these widgets, you can get an instance of the widget, and call widget.resize();