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

Align cell heights in parallel tables

I have two tables sit next to each other and display data about two items that are being compared. Each item has a name, a category, and then a description - some descriptions (the third column) are very short (one word) and some are very long (multiple sentences). I need to align the two tables so that the row heights match up perfectly. Here's what I have so far:
Notice how the first row in each table doesn't align because of the difference in heights in the row. Ideally I'd love to solve this with CSS and some kind of overflow property combined with min-height, but I'm not sure where to start. Thanks!

You can place the description text (2nd table) inside a "div" in "td" and
make the "div" css: "overflow:auto; max-height:40%"; and make changes to the width of the table data as required for the both tables.

You can use the height property to give each cell in the table a uniform height.
Setting the overflow-wrap property to break-word will break a long word that does not fit inside the cell (like supercalifragilisticexpialidocious) so it fits. You need to style it as an inline-block so the overflow works properly. If all else fails and there is just too much darn text in a table cell, you could set overflow to hidden to make sure that your users can at least see the content without it spilling over everything, but ideally you should set the height to be large enough for your data. If you need an example, let me know and I can post one.

jQuery multiple sortable tables

This question is best read with the fiddle open ;). I've got a tables inside a table. The inside grey tables need to be sorted in there own container. So the grey rows can only be moved in the grey table. But the white rows need to move there grey table with them. So you cannot move a white row or a grey table on there own, they are connected.
Here is my fiddle for what I got right now:
fiddle
options = {
helper: (event, ui) ->
children = ui.children()
view = ui.clone()
view.children().each (index) ->
$(#).width(children.eq(index).width())
return view
}
$('#ccc').find('tbody').sortable(options)
I've been cracking my head on this all day but I cannot figure out how to like a grey table to a white row.

With your current html structure this is quite difficult to achieve.
First of all you need two sortables (one to sort big chunks with white headers and second to sort inside grey tables).
You want to be able to move big tables with small ones inside but as these were all inside sibling elements (tr) it was not really possible (so I've added multiple <tbody>s in there).
Anyway here's the working fiddle: https://jsfiddle.net/9vmvjqm4/5/
You still need to exclude thead from being sortable. I don't like CoffeeScript so I left that (add items : ':not(thead)') to options (or sth like that, there are topics how to do that on stackOverflow).
Also, have a look at this: http://johnny.github.io/jquery-sortable/

dataTable header with rowspan resizes and mess UI

I had been developing a screen which has lots of data as . It is scrolling with dataTable.(Horizontal Scroll). There is a drpdown which should filter values and should show only eligible TDs in scroll part. Below are Screenshots. I am hiding and showing data based on selection of a dropdown.
Have added a class to all tds and rowspan th so that they can be toggled based on selction of dropdown.
It Shows perfect while fetching all the records. But when I hide columns , columns work perfect but header resizes its headings.
Here is what happens on hiding th and td .td remains same , th resizes
I tried a lot but cud not fix it. Can someone plz help

So I got the solution .
U need to get your table object again and redraw it. After reading so many places about this error it seemed dataTable is still to find a fix for hiding columns in scroll part with rowspan added to it.
What I did was adding a class to all th, td of table which needs to be hidden based on any condition , here based on selection. When I was selecting a partical type I added another class to hide the required th and tds. But Th reset sizes ,might be because of scrolls added.
It resets width of entire header leaving your td as it was . So it looks ugly.
oTable.fnDraw();
Just take reference of your table and draw again.

How do I stop dynamic JavaScript tables from moving other elements around when I add rows to the table?

I have an HTML page that has static tables placed in the page because these never change. I have a main table that houses all the elements to keep everything aligned. This is probably what is causing the problem.
I have the main table with 2 tables within it. Each row in the first inner table, called dropDownTable, usually has up to about 10 rows. dropDownTable is in the following format:
td1: text; td2: select element; td3: text (this part is dynamically updated).
The second table, called showDetails, uses the options from the select element in the rows in dropDownTable to query a database (onchange attribute), get some information and then display each element that is found. The response from the database is up to 150 character strings, usually shorter though.The user then clicks an element in the details that updates the third column in the dropDownTable.
I'm not really sure if this is a JavaScript or HTML problem but each time the showDetails table updates, it pushes the bottom of the main table down. There are 2 buttons at the bottom of the main table that move each time the user changes the select in the second column of dropDownTable.
It very aesthetically displeasing.
Any ideas would be greatly appreciated. I have had this problem before but with other elements.

are you adding more content, thus making the table taller?
I cant quite understand what your problem is exactly, but:
td
{
vertical-align: top;
}
will keep everything in the top of its cell, rather than centering to the tallest column.
You shouldnt be using tables for layout, tables are for tabular data. have a read of this
if you want to fix the heght of the table, do:
table
{
height: 400px; /* replace with your heihgt */
}