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

jquery: dynamic ID parent selector, childrens fit to parent

this is my first question!
I'm working on a healthcare app and the code is very dynamic, sometimes I have 1 column and sometimes I've 4 so I'm using an incremental Id selector (i)
Inside this container I've divs that can be 1 to 4...
if there are only one the height might be 100%, if it is three 33%.. and so on..
What I need is to fit the content div to his parent container (i).
The problem is that I need and specific function for each column
It cant be solved by CSS because my clients are in a very old version of IE
<div id="column-1"><!--"1" is dynamic -->
<div id="row-1"></div>
<div id="row-2"></div>
<div id="row-3"></div>
<!-- number of rows is dynamic -->
</div>
PS: tomorrow I'll edit with the real code, and sorry for my english ;)

Fix the DOM height and then use 'overflow-y' CSS property to get scroller, if your
list grows.
column-1 {
height: 110px;
overflow-y: overflow;
}

Putting numbers along border of a clickable grid in html

I have a clickable grid in which the cells toggle colour on clicking. I need to put some numbers along the borders of the grid. What is the best way to include that?
Final result should look like
4
1 5 3
1,2 [][][]
1,4,5 [][][]
1,3 [][][]
Here is my JSfiddle without the surrounding numbers.

Would using the existing table cells work as in https://jsfiddle.net/z9shwh0q/ If not you could create another table next to it and place these tables in a few wrappers.
<div class="top-key"
TOP KEY ETC
</div>
<div class="left-key">
TABLE FOR LEFT KEY ETC
</div>
<div class="clickable-table">
CURRENT TABLE
</div>
Then you would us CSS to postion these

I would define extra row / column which would be styled differently, and added distinct class (so you can avoid attaching listeners to these), pretty much like #Aly Sebastien outlined.
Then have your custom numbers in them.
If you want to create even smaller footprint, you could attach :before pseudos with content, and position them via css on the edges (see Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery)

Complex html layout with div

I want to do some kind of naval battle game in HTML5/Javascript using drag and drop on a grid (composed of div elements). The starting point is a div with 20 * 20 identical cells.
I have to perform some complex layout like in the image below and this layout may be dynamically modified by Javascript (e.g. when a ship is moved).
I know how to perform merged row cells but I cannot find out how to merge columns (like in the example below).
Is it possible with divs or would you recommend a table?
_______________________
|__|__|__|__|__|__| |__|
|__|__|__|__|__|__|__|__|
|__|__|_____|__| |__|
|__|__|__|__|__|_____|__|
|__|__|__|__|__|__|__|__|
Sorry for not posting a nicer image but my reputation is too low to post images.

To be simple use a table, you have the rowspan and colspan properties. But for ease of maintenance, I recommend not using a table, and designing a div layout similar to how Bootstrap implements div based table layouts. http://getbootstrap.com/css/#tables
If your design has to be responsive, you do not want to use table, td, tr elements, you will need to come up with a div based layout.
Other table layout libraries/techniques: http://www.sitepoint.com/responsive-data-tables-comprehensive-list-solutions/

I would use a grid with div's. An place the boats on top of the grid with an image and store boat info as class properties on a per cell basis.

combination of bootstrap with jquery should be possible, for example:
<div class="container">
<div class="row">
<div class="col-xs-3 shipSize3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-6 shipSize6"></div>
</div>
</div>
then you would be able to just change class with jquery(.removeClass(),.addClass()):
if (shipSize3 === 'killed'){
$('div').removeClass('shipSize3');
} else {}

It is possible, here is the code.
Screenshot:

Col in table colgroup is getting hidden

I'm trying to develop a fixed header table.It is a kind of widget, where use will be allowed to set width to columns whichever he wants.
Scenario:
Table(width is set to 500px) has four columns where if we don't specify width at col tag level,all columns are optimized to total table width like this:
If we specify width to 2 columns at col level whose total width is less than table width, then table looks like as follow:
But, if width of the 2 columns are greater than table width, then remaining columns are getting hidden, though table wrapper(<div class="v-grid-content">) has overflow:auto.Scrolling is enabled but only two fields are shown:
I am not getting what is wrong, can somebody help. Here is the jsfiddle.
I tried to keep min-width to col,but that didn't work.
Do we need to set width to every col??

Do we need to set width to every col?
No, you don't. You can set a width to some – any other column widths will get computed by the browser as usual. (Taking into account the widest content of that column and the overall table width.)