Develop Reference

Dynamic column arrangement in bootstrap grid (bootstrap+vanilla js)

I am creating a grid (so something with rows and columns with buttons in the cells) and a slider that should alter the number of columns.
The number of rows is virtually unlimited and, since the grid layout in bootstrap is implemented with a flexbox i should either swap column classes or redraw everything every onchange event.
is there another way in bootstrap or do i need to create a grid layout from scratch and alter the column layout each time?

i managed to do that by adding a counter of elements inside a row and whenever i reach the desired element number i append a new row and start adding elements to the last row
like so
if(indexofrow%element.getColNumber()==0){
indexofrow++;
document.getElementById("canvas").insertAdjacentHTML("beforeend","<div class='row flex-nowrap'/></div>");
drawSingleButton(i,element,arrayOfLayers);
}else{
drawSingleButton(i,element,arrayOfLayers);
indexofrow++;
}
it's probably a cheap workaround but for my case it works

Wrap column text according to the table width antd

I have used Antd Table to display some data. It has 2 columns and the second column can contain some long paragraphs. The issue is that Antd Table is not wrapping the text which is going outside the width of the table like in last row of the below image.
So can anyone help me in wrapping the text if it is greater than the table width.

Align table rows of two tables

So I have two tables horizontally next to each other. Everything is aligned initially. However, when the element inside one cell of the left table increases in size, it wraps and increases the cell height. How can I align two tables even with the left cell height increased?
Here is the image of what it looks like:
Without wrapping:
With wrapping:

IMHO you have two options.
Use single table so that entire row will have same height. Or
Use div instead of table because div has overflow option. Refer this link
Update after comment:
If you can use jquery, you could do it on page load. Refer this fiddler
Note: height attributes for both table's row and class name. Un-comment jquery line number 3 and execute.

Data grid table in div (no fixed width)

I have a data grid table (div based) that not in table format. I have done it in div based format with fixed width cell.
My problem
If I have add the column in the grid table, it will adjust like table format.
How can I do it?
Above table I need to add the column but it's all fixed width cell, if I add extra column the
table collapses.

This is possible without table.
Just see below the link.
http://jsfiddle.net/anglimass/BkwgY/2/

jqgrid custom row colors

How can I set the background-color of an entire row (not just cell) using the custom formatter?

The custom formatters are used for formatting the cell's data (= text). As far as I know they don't know about the actual cell (meaning a jquery object) but only of it's value.
But usually jqGrid assigns IDs to all rows so setting the background color if you know the rows ID should be only a matter of setting the background color of all td child elements of this row.
$(rowid).children("td").css('background-color', "#5E5E5E");