Aligning Columns - Flexbox - javascript

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/

Related

How to drop max-height/overflow properties when Bootstrap column layout changes

I have two col elements in a single Bootstrap row/container. The left side one is a fixed size, containing a static table. The right side one contains a table, like the left, but is dynamically generated based on data retrieved when the page is loaded.
So, of course the right table can be taller than the left one. I've got the right table's max-height property set to the left table's height, and overflow-y: scroll, figured out in JavaScript. This looks and works great on desktop.
Code gist for reference, HTML:
<div class="container">
<div class="row">
<div class="col">
<table id="tblLegend">...</table>
</div>
<div class="col">
<table id="tblStops">...</table>
</div>
</div>
</div>
JavaScript:
$(document).ready(function() {
var mxHt = $("#tblLegend").css("height");
$("#tblStops").css("max-height", mxHt)
.css("overflow-y", "scroll");
});
However, I'd like to be able to remove the max-height (and subsequently, the overflow-y) property from the tblStops element if the page is displaying in a mobile format, or is resized to a mobile screen's size. In this case, the two tables would be stacked on top of one another vertically, and there would be no need for a separate scroll pane for mobile devices. (Not to mention that an internal scroll pane on mobile is irritating and difficult to control sometimes).
Is there a relatively easy way to do this without resorting to window.size or window.resize events? I just don't like the idea of having to check for hardcoded screen/window dimensions.
You can detect the screen size in JavaScript. As you are using JQuery:
if ($(window).width() < 700) {
$("#tblStops").css("max-height", "auto")
.css("overflow-y", "auto");
}
Auto value will add or remove scroll according to the requirement in overflow. In height minimum height will be applied for content.
NOTE: Might not work with Iphone's.
EDIT: width() will return value based on browsers and for iphone width 700 might not work.

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)

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

Automatically collapsing vertical spacing between posts in grid theme

I'm trying to make a custom grid-based theme for my wordpress site. One thing I want to do is make it so that the vertical spacing between posts in the same column is automatically collapsed, so that there is no empty space between them even if the posts are different heights.
For example, on this site the grid is collapsing how I want it to. However, on this site, the posts are arranged in horiztonally aligned rows and there are spaces between each row.
Is there a name for the technique that is used to make posts arrange themselves as in the first example site? I'm at least looking for a term that I could Google for to learn how to do it ... but even better would be a code sample that would show how to make a grid that auto-arranges in this manner.
Thanks!
This is known as a dynamic grid or perhaps Pinterest-like grid. It was popularized by Pinterest.
Essentially, you cannot do this with CSS and HTML alone. This type of grid needs to be handled with some Javascript or server-side processing. I would suggest going with Javascript and checking out one of the many jQuery plugins which do exactly what you want (note that the first site you linked to uses a plugin for their layout):
http://masonry.desandro.com/ (what the first site you linked to uses)
http://www.wookmark.com/jquery-plugin
http://www.inwebson.com/jquery/blocksit-js-dynamic-grid-layout-jquery-plugin/
http://yconst.com/web/freetile/
Any of these should do the trick.
Masonry has you set the container width and spacing between blocks using CSS. You specify the width of columns you want in Javascript. The calculation of the block width and spacing will determine how many columns there are in the container.
Wookmark and BlocksIt have similar configuration options. They let you specify the container width and then the block width. Between that and the offset (distance between blocks) you could have it arranged such that you end up with 3 columns of the same width.
Freetile out of the box doesn't support same-width columns (one of its features), however you would be able to accomplish the same thing with a little CSS and/or modifying the plugin directly.
The main part here is getting one of these plugins set up and working. Once that is in place, you'd only need to adjust your CSS to your liking. Each of these plugins provide working examples as well as code samples and documentation. A simple implementation of Masonry would look like this:
HTML:
<div id="grid-container">
<div class="post">...</div>
<div class="post">...</div>
<div class="post">...</div>
<div class="post">...</div>
<div class="post">...</div>
</div>
CSS:
#grid-container {
width: 940px; //width of your container
}
.post {
margin: 10px; //spacing between each block/post
}
Javascript:
$('#grid-container').masonry({
itemSelector: '.post', //selector for each block
columnWidth: 300 //width of your columns
});
Each block post will be 300px wide with 10px of margin all around. You'll end up with 3 columns, each column with 10px of margin between them.
Each of the plugins listed is licensed in such a way that it's free for personal/commercial use (see each plugin for their respective licensing), so no worries there.

Categories