I am using Angular Material and have been looking at the md-grid-list lately for a design requirement I am trying to solve.
I have a bunch of div's that are children to a container with layout row applied. Each of the child items have set widths\heights and have a toggle button to expand\collapse, which just doubles their sizes on expand and then return to original sizes on collapse.
What I'd like is for the child items to re-order to fill available space (provided that space is big enough) around other items that have been expanded.
Right now the container element for my child items also has layout-wrap applied and so of course as items gets expanded, any children that don't fit horizontally just push down below the previous item.
I have come across md-grid-list but I am not so sure this will provide me with what I am after, as it seems to be more suited for percentage based sizes - or have I got that wrong?
I have seen http://masonry.desandro.com/ where if you resize the window on the homepage, that's the kind of behaviour I am looking for, although I would not want the height\widths to update dynamically.
Can this behaviour be achieved using Angular Material components alone?
I am not sure if I understand you correctly but that is exactly what the grid does?
You just set the column count and width/height ratio. You can also set the height of the rows in pixels. And you can configure it depending on CSS breakpoints.
<md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="4"
md-row-height-gt-md="{{height ? '100px' : '1:1'}}" md-row-height="100px"
md-gutter="12px" md-gutter-gt-sm="8px">
<md-grid-tile class="gray" md-rowspan="2" md-colspan="2" md-colspan-sm="1">
<md-grid-tile-footer>
<h3>#1: (2r x 2c)</h3>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile class="green">
<md-grid-tile-footer>
<h3>#2: (1r x 1c)</h3>
</md-grid-tile-footer>
</md-grid-tile>
As you can see I added a toggle to switch height between ratio and fixed heigth: md-row-height-gt-md="{{height ? '100px' : '1:1'}}".
Everything is animated by default but you can roll your own animations with angular-animate.
http://codepen.io/kuhnroyal/pen/QyxOQo
Related
I have a layout which uses flex to resize its internal components to the window size.
Part of the left column has either some "control buttons" or an "event log" of which visibility can be toggled.
I'd like to animate that show/hide so the log messages div slides out from the right. When the log messages div is hidden, it will slide back towards the right.
The system is using AngularJS (not "Angular").
The majority of examples online show how to animate opacity to fade in and out and the few that show sliding animation use position: relative wrapping position: absolute elements. However, using absolute wrapping relative messes up the flex layout: wrong elements are visible and resizing doesn't work properly.
Any idea on how to achieve that effect?
Here is a fiddle showing the layout.
Thanks!
I'm using angularjs and attempting to create a div that contains four re-sizable containers. I want these containers to resize in such a way that changing the size of a container alters the width of the adjacent container but no other containers in the same parent div.
For example, if I have four containers and I resize the left side of container 2, then I expect container 1 and container 2 to resize with container 3 and 4 to not change. These four containers exist in a row in their parent div with the expectation being that resizing should only occur horizontally. Width of the four divs should never exceed or be less than the total width of the parent container. Additionally, there should be a minimum width on all containers that restricts resizing adjacent elements below their minimum width value.
I have a partial implementation using angular-resizable but move containers are resizing when using this approach. I believe this is due to the flex-box implementation for allowing growing and shrinking of elements to fill the space but have hit a wall as far as making this work as described above.
Pulled and modified code directly from angular-resizable api page to produce this example. https://codepen.io/CodeRequiem/pen/NXVVKB The resizing is exactly as I want it, but the restriction to min-width is not being respected and there are a few issues with elements being pushed outside the parent container on certain resizes.
<div class="row">
<section id="one" resizable r-directions="['right']" r-flex="true">
<p>Schedule part 1</p>
</section>
<section id="two" resizable r-directions="['right']" r-flex="true">
<p>Schedule part 2</p>
</section>
<section id="three" resizable r-directions="['right']" r-flex="true">
<p>Schedule part 3</p>
</section>
<section id="four">
<p>Schedule part 4</p>
</section>
</div>
My solution to this was to switch from angular-resizable to colResizable which give an implementation using tables that will work for my purposes. There is an example on their documentation page that describes exactly what I need. The multiple range slider section shows a great example of this exact case. Hope this can be used for a similar solution for others.
I am currently trying to build a slider on my page. The slider slides between different content, which means each slider has a different div height. This makes it hard to use animations since I need to use position:absolute; for those (to slide left/right). To work around this, I added a parent container with a position:relative; and used this directive to get equal height on my divs. However, the problem I am facing is that it only gets the height of the first visible div. Meaning it will work fine if the div with the highest height is shown first, but otherwise it won't work (since content will come outside of the slider).
How can I adjust this so that the equalizer gets the height of each div, and gets the one with the highest value in height, and uses that instead of the only visible one?
Additional info:
Using ng-show to show the current slide, and css3 animations.
The solution was pretty logical. I'm not that great with directives. But after some researching I saw that this directive had a function called equalize() - meaning I could only call EqualizerState.equalize() once I had added EqualizerState to my dependencies.
<div>
<div style="display:inline-block;">
<div style="display:none"></div>
</div>
</div>
I'm trying to understand this inline-block behaviour. This is a simplified version of a layout issue I ran into with some responsive elements in my header and menu bars. If the intermediate div is anything but inline-block, the entire nested block will have no height (or visibility, I'm not sure). However, if the intermediate div is an inline-block, it appears to display none with the innermost child (it's shaded in Firebug code, so I'm assuming it's hidden), however the the parent div maintains some sort of default height.
The best work-around I've found, which also sheds some light on where the default height is coming from, is to give the outer div a line-height of 0 or 1px. It still shows a 2-3px height which I can live with for my particular design. However, I can imagine cases where this work-around won't work, so it seems a bit like a hack.
I'm interested in understanding why this particular structure is behaving this way. So far, with my tests, it appears to be unique in terms of not collapsing when its children have no display. When understood properly, is it a bug or the logical result of the way the nested displays are interacting? Is there a better way to control it than with line-height? Can it be forced to display no height at all?
I'm not interested in JS solutions, or solutions which suggest work-arounds involving avoiding inline-blocks. Adding CSS to the existing proposed structure is fine. In my mind, the best solution would show no height for the structure with the least consequences for elements displayed inside the structure when display is not set to none. My question is as much theoretical as it is practical.
Is it a bug or the logical result of the way the nested displays are interacting?
Inline elements (inline-block and inline - which both recreate your issue), have white space after them. This has the same effect as a single SPACE U+0020 character, by HTML specifications. This is what causes your parent div to have a height.
Is there a better way to control it than with line-height? Can it be forced to display no height at all?
It depends, really, on what you consider 'better'. You could float the 'middle' element, instead of displaying it inline. (This may require you to clear the floats in the parent element - there is a common fix for this called clearfix)
Here is sample code showing this method in effect:
HTML:
<div class="parent">
<div class="middle">
<div class="final">asdf</div>
</div>
</div>
CSS:
.middle{ float:left; }
.final{ display:none; }
/* Shading to show sizes of divs */
div { border:1px solid; background:rgba(0,0,0,.2); }
/* Clearfix */
.parent:before,
.parent:after {
content: " ";
display: table;
}
.parent:after {
clear: both;
}
Live example: http://jsfiddle.net/16xp2m3L/2/
I'm using the Angular.js 'ng-grid' data grid and am trying to make its behavior responsive. When I resize the screen I'd prefer the grid columns to become stackable automatically as opposed to keeping the grid a fixed width.
I've found a few links mentioning a defunct ngGridLayoutPlugin that all lead to a dead end on GitHub. I've also seen other grids like angular-deckgrid but I'm not interested at this point in changing grids.
Is there anyway to make ng-grid responsive?
I found a solution to this that worked nicely. The native Bootstrap table has a class that can be applied named table-responsive (see: http://getbootstrap.com/css/#tables-responsive). The application to a standard Bootstrap table is to wrap it in this class. The responsive nature is one if the screen gets smaller the table itself will get scroll bars but not the entire page.
You can wrap a ng-grid with this same class and achieve the identical behavior:
<div class="table-responsive">
<div class="gridStyle" ng-grid="gridOptions">
</div>
</div>
If you test this with and without the <div> wrapper containing the table-responsive class you can see the difference between the scrollbars wither being just on the table/grid (responsive), or when not using it, the entire page scrolls (not responsive).