We Keep Coding

Resize bootstrap columns by dragging them

My angular application has a container and I am generating dynamic columns (via dynamic components), these columns have bootstrap classes. My columns can be upto 6 max and 1 min. On changing number of columns from 1->6 or 6->1,6->3 etc I update all dynamic column's classes so total sum is always 12.
I am required to resize these columns by dragging from one side and to update adjacent column's classes so total is never exceeds 12. I have searched quite few things like jQuery-ui dragging and other fiddles but not got any good approach either they are very much in jQuery way or none.
Any help would be highly appreciated in form of suggestion,code link,article or any direction.
PS: I have came across this e.g. codepen for bootstrap resizing but it is very jQuery way and I am looking something similar in angular 5.
<div class="container">
<div class="grid">
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
</div>
</div>
</div>
This another example I have came across, that it simply updates it's neighbour columns on dragging e.g. if 3 columns [3,4,5] so on dragging first column it will go to max of [6,1,5] i.e. it will not go further changing to 3rd column [7,1,4]
and my container columns look like

I am answering this question because I just got a work around close to what I want to achieve and helpful to someone in someway, but still it is exact solution of the example that I am following.
This fiddle gave me a general idea, how can be achieved. So I calculated the mouse X-axis on mousedown event on element and mouseup event on document where I get final X-axis, then I calculates the direction (left or right) and updates the corresponding pair of bootstrap classes. e.g. having 3 columns [3,4,5] so on dragging first column towards right direction I updates it too [4,3,5]
But it still lags the smoothness or snapping (after certain x-axis covered then updates the column)

jQuery UI Draggable with Bootstrap layout

jQuery draggable elements goes under the bootstrap styled columns (col-*). For example, I have two .row each divided into 4 columns (with col-md-3). I am trying to get the first row columns to be draggable onto 2nd row droppable columns.
But when I drag 'Drag #' elements, they always go under the 'droppable' elements. I am not able to get drop working with Bootstrap styles.
Can someone explain why this is happening and provide a solution?
Bootply Exmple: http://www.bootply.com/THBX5GJnCn

Is seems that class .ui-draggable-dragging has lower `z-index' property than others
Adding sth like here:
.ui-draggable-dragging {
z-index: 10000!important
}
Here is jsfiddle which works: http://www.bootply.com/P0Okde8ZmV
Code above will fix the problem. Of course my 10000 value & !important are here just to show You solution. It's not so pretty to use !important each time, You can't get the clue of case :)

Padding after JQuery Listview

I am making another JQuery Listview, but this time it will not have a slide out view. It is just simply a list of items.
Here is an example of what I am trying to do: http://jsfiddle.net/jakechasan/kNPN7/3/
However, the padding between table rows is very large. Is there a way to easily reduce this so they are right next to each other (with minimal padding). I am thinking this can be done pretty easily by overriding the default CSS for JQuery Mobile, however, I am unsure which property to override.
Here is an image of the problem:
Problem:
Correct:
Here is some sample code (basic code) so I am unsure where the padding comes from:
<ol data-role="listview">
    <li>Acura</li>
    <li>Audi</li>
    <li>BMW</li>
    <li>Cadillac</li>
    <li>Ferrari</li>
</ol>

I found a number of after each closing </li> tag that was creating the issue.
Remove these and the extra padding dissapears. See updated fiddle

Dynamically generated “floating divs” with even width but not even heights, align issue

I will be very appreciative if anyone has a lead how to solve this:
Problem description:
we have Dynamically generated “floating divs” with even witdh but not even heights.(content based) .
the “Parent container” will have diffrent width parameters to allow 2,3,4 (in attached example 2 columns and 3 )divs to fits it’s width.
divs order is left to right, always by hirarchical order 1,2,3 etc...
How can we achieve this without creating gaps? ( casued by traditional floats method).
Number of divs is dynamically created and not limited...
Solution should be ie8,ie9 compatible
thanks, Jonathan. ![enter image description here][1]
example illustration can be found here:
https://app.box.com/s/6y89dlan1jt8bpjvcgb9

Have you considered using something like Masonry?

Pure CSS solution - Cross Browser (IE6+)
Use a column layout instead of floating.
This Working Fiddle demonstrate a 3 column layout, but you can easily change it to N column.
For a N Column Layout, you'll need to create N containers, each of 100/N width, and fill them accordingly.
You just have to build your dynamic content in the right order. (put the dynamic div in the right column each time).
Here's the basic HTML & CSS for the 3 column layout
<div class="Container">
</div>
<div class="Container">
</div>
<div class="Container">
</div>
.Container {
float: left;
width: 31.33%;
margin: 1%;
}
The script in the fiddle is for the sole purpose of adding dynamic content.
and although the content that I had have a fixed height, it will obviously work with changing heights as well.
BTW: for a 2 column layout, you Don't need this. just make the odd item float left, and the even items float right. Like This

Make column width same for 2 tables

I am trying to implement a table structure in which the header remains fixed when i scroll down. I have used 2 tables for this purpose. The first table has the header values and the second table have the corresponding data(length of data in each column might vary as the data is populated dynamically). The problem is that the header width and data column width are not matching exactly.
I have written some code like shown below to dynamically alter the column width
$('#tdCheckAllBody').width($('#tdCheckAllHead').width());
$('#tdLoginBody').width($('#tdLoginHead').width());
$('#tdStatusBody').width($('#tdStatusHead').width());
$('#tdFNameBody').width($('#tdFNameHead').width());
$('#tdLNameBody').width($('#tdLNameHead').width());
$('#tdCompBody').width($('#tdCompHead').width());
But it doesnt seem to work properly. Any help appreciated.

Use this method
$(window).scroll(function(){
$("#id of the table header").offset({top:$("#id of the control which u placed the scrolling").scrollTop()});
});

Created a working fiddle for this:
http://jsfiddle.net/terjeto/dx7H5/
Offcourse if your case is different, you might need to tweak a litle. In my opinion the problematic areas are if the table use dynamic or % width and coping with the "auto" scrollbar which takes up approx 18px, and offcourse if the table needs horizontal scrollbars it complicates things a litle needing the onscroll event.
Could it be that your exmple is not accurate because of lacking reset-css code?
I use this: http://developer.yahoo.com/yui/reset/