Resize bootstrap columns by dragging them - javascript

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)

Related

Aligning Columns - Flexbox

I'm currently using grid-x from XY grid built from Foundation (Zurb), although when I have a cards layout (as shown below) with grid-padding-x, one can see that the cards come centered (which is great), although I would like to put a sorting bar on top of this, aligning this to the card layout underneath proved to be difficult since the card layout adjusts accordingly.
What I would like to have as shown in the jsfiddle, is a fixed width and height of the cards and automatically centered (as fulfilled by using grid-padding-x) although then I would like to give the same margin to the navigation bar on top to be aligned to the cards (margin-left and margin-right)
Is there an easier way of achieving this? or is there a way to align them together?
JSFiddle: https://jsfiddle.net/7hjjt2Lp/
How am I expecting it to look
Probably the simplest way to achieve what I believe you are attempting is to put the navigation bar inside a .grid-x grid-padding-x as well. This alignment problem is one of the challenges of using a padding-based grid; you have to have everything inside the grid to align properly.
So in this case, you would end up with
<div class="grid-x grid-padding-x">
<div class="cell">
<div class="sort-bar"></div>
</div>
</div>
You can see this in this fiddle: https://jsfiddle.net/7hjjt2Lp/2/
Alternatively, if you use margin instead of padding you don't have the same problem. You could shift to using margin grid and no longer need to nest your sort-bar... for that solution just shift your grid-padding-x to grid-margin-x. See https://jsfiddle.net/uy5euxc8/1/

jQuery UI Splitter/Resizable for unlimited amount of columns

Using jQueryUI Splitter or Resizable functions I want to create a layout that allows an unlimited amount of columns to be added and all columns need to be resizable.
So it is like this fiddle: https://jsfiddle.net/f3gLh3mw/
But in this fiddle the HTML contains out of nested sets instead of inline. Which limits the possibilities as with the above fiddle you can only have equal widths for 2,4,8,16,32 etc columns. Everything in between shows up crooked as you can see in the Fiddle.
When researching this I came on this SO question: jQuery UI and Splitter
If you look at the top answer then it shows a structure like:
<div class="wrap">
<div class="resizable resizable1"></div>
<div class="resizable resizable2"></div>
</div>
Full fiddle: http://jsfiddle.net/8qzTJ/86/
Which is the structure I want but the Javascript is hardcoded for only 2 resizable items.
So here is the question:
How to modify the last fiddle so it works with any amount of .resizable divs.
Or does anyone know of a plugin that can do this.
Thanks everyone for helping!
So far I found this plugin: http://www.bacubacu.com/colresizable/
Which does exactly what is says and is very close to the functionality that I want. Only it is in a table layout and not a div layout.
Working fiddle: http://jsfiddle.net/2h4kLzgj/6/
It is activated by this:
$("#sample2").colResizable({
fixed:true,
liveDrag:true,
gripInnerHtml:"<div class='grip'></div>",
draggingClass:"dragging" });

Polymer - Creating an equally spaced, dynamic horizontal layout

I am using the core-scaffold component to make a list of objects a shown below. My goal is to put 2 items on each row which share the space 50% -50% . However Horizontal layout fails to allocate space with this ratio. How can I achieve equal spacing.
Secondly, when the screen size gets small, I want the horizontal layout to change into a vertical layout so that, as again shown in the picture, items are not compressed. What is a good way to achieve dynamic layout ?
Use the core-media-query element to capture responsive changes:
<core-media-query query="max-width: 600px" queryMatches="{{phoneScreen}}">
</core-media-query>
Use the flex attribute on your columns to get the 50-50 width. Also use the {{phoneScreen}} (set by the core-media-query) to determine if we should use the horizontal layout or not
<div class="row" horizontal?="{{!phoneScreen}}" layout>
<div class="panel" flex>50%</div>
<div class="panel" flex>50%</div>
</div>
Example: http://plnkr.co/edit/WxUFCWFQVMeBgXSLI32M?p=preview
Polymer offers now the app-layout > app-grid helper class.
1.Import the app-grid-style.html which can be found in the app-layout in the bower_components folder.
2.Include include="app-grid-style" in the style section of your custom element.
3.And add the class app-grid to the container which will hold the layout.
A basic example can be found on this Polymer link.
Polymer app-grid documentation

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

Scrollable HTML table with top row and left column frozen

Has anyone been able to implement a scrollable table in HTML where the TOP row and LEFT columns are frozen, but the rest of the table is scrollable? A perfect example of this is:
Google Squared
I tried to reverse engineer the code for the google squared table, but I have been unsuccessful so far.
Note: I need the ability to FREEZE the TOP ROW and the LEFT COLUMN at the same time.
There's a working example at http://ajaxian.com/archives/freeze-pane-functionality that should be easy to duplicate. Be sure to note the comments -- many of the users have made helpful suggestions for improving the script.
Per #Nirk's request, a direct link to the active demo is at http://www.disconova.com/open_source/files/freezepanes.htm.
Go with a basic structure like this-
table
row
column (blank)
column
table (1 row high, column headers)
row
column
table (1 column wide, row headers)
column
div (fixed height & width, overflow auto)
table (actual data)
Set a fixed table-layout and specify column widths in pixels explicitly. You should be able to achieve the same effect.
i have a version of this in use (for a Gantt-chart style display).
it uses 3 tables: 1 for left column (the rows), 1 for top (columns), and then the data.
you need to work hard to get the cells to match sizes with the ones they match up to (
table layout-fixed can help achieve this).
The tables then are placed in some divs; the left and top divs have (as suggested above) height & width and overflow-auto in their css.
You then hook up some javascript to sync the scrolling of the left / top divs with the inner one...
As I recall there was a fair bit of 'curse-and-try-again', but it can be done with minimal js.
hth
If you use jQuery there's a lot of plugins for tables with fixed head.
You need Scrollable (jQuery plugin)
Demo is here

Categories