Mosaic layout with angular material - css

I'm wodering if it's possible to make a mozaic layout with angular material. What I want to do is to display section differently depending on section count. For example if I have 3 sections to dispay it would be something like
Section1 Section2 Section3
for 4 sections it would be like
Section1 Section2
Section3 Section4
I couldn't find any examples for this. Thanks

You can do this by defining the flex directive on each of the elements as defined in the layout documentation for Angular Material.
To achieve the layout defined in the question, you could use the directives in this manner:
<div layout="row" layout-sm="column">
<div flex>Section 1</div>
<div flex>Section 2</div>
</div>
<div layout="row" layout-sm="column">
<div flex>Section 3</div>
<div flex>Section 4</div>
</div>

Related

Bootstrap 4 div padding issue

I am using this structure but
<div class="row">
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
</div>
For some reason the has as much padding as it would take to "match" the next div in the horizontal row. For example, if the first div is text, then the second is text, and the third is an image...the first two divs "grow" to be the size of the third. I thought with this Bootstrap 4 it was supposed to be flexible? Thanks.
Bootstrap 4 utilizes flexbox (display: flex) for a lot of it's layout, including it's cards. That is the reason that all the cards grow in accordance to it's siblings. You can learn more about flexboxes here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
and
https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/
You're using col-sm-4 which will make all the columns be the same size which may be what you're referring to as the first two divs grow. If you mean something else, I would look into how Bootstrap 4 works with flexbox which may also help you understand how the columns act in Bootstrap 4
Sometimes the images can push out the divs. Set a style to the image to be width: 100% and see if that makes any difference
Ok this works. Thanks everyone above for your help, I took many things from it to get the answer. It turns out if I'm reading this correctly flex itself won't allow for "three columns with shrunken divs" so one div can be bigger than the others but they all shrink to their own respective sizes around their content. So I used Masonry. I just included the .js in my head section as a script reference then added the below. If you aren't using .NET (meaning you're using PHP) just erase out the itemtemplate and repeater stuff...the code is the same for you.
<div class="row" style="display:flex;" data-masonry='{ "gutter": 0, "itemSelector": ".col-4" }'>
<asp:repeater id="ItemsList" runat="server">
<div class="card">

Angular Material center layout

im getting my feet wet with Angular Material.
I have referred to the documentation on angular material website and i am trying to accomplish the foll:
the second tag, that is, the 'name of the master' shld appear in the middle. whereas the position of ngmasters is all right.
this is how im trying to implement this functionality to no avail:
<md-toolbar>
<div class="md-toolbar-tools">
<p><strong>ngMasters</strong></p>
<div layout="row" layout-align="center center">
<p>Name of the Master</p>
</div>
</div>
</md-toolbar>
any help or direction wld be appreciated. thank you.
You'll need to apply the flex attribute to the <div> so it takes up available space within the <md-toolbar>:
<md-toolbar>
<div class="md-toolbar-tools">
<p><strong>ngMasters</strong></p>
<div flex="" layout="row" layout-align="center center">
<p>Name of the Master</p>
</div>
</div>
</md-toolbar>

Bootstrap: positioning div block under col-xs-8 + col-xs-4 is not as expected

I'm using Bootstrap 3.0 and my question is:
can this block
<div class="under col-xs-12">fdf</div>
be placed in the code the way as it is shown here
<div class="row">
<div class="col-xs-8">aaa</div>
<div class="col-xs-4">bbb</div>
<div class="under col-xs-12">fdf</div>
</div>
so that the text fdf is under aaa and bbb
I think it anyway should be under, as col-xs-8 + col-xs-4 cover the whole width, however I'm confused as
div.under{
border:1px solid black;
}
wraps not just one block fdf, but the whole content including aaa and bbb.
You may take a look here:
jsFiddle
So, what's the proper way, from Bootstrap prospective, to make that black border wrap only the second line fdf?
The aaa and bbb columns are floated, so you need to add clear:both; to your under class.
jsFiddle example
Bootstrap way of doing this
This is a similar answer as one posted by j08691, But you are using Bootstrap so we will look at the Bootstrap way of doing this
Bootstrap has provided its own built-in class clearfix for this
pupose(to clear the float)
see this: http://jsfiddle.net/DTcHh/4487/
<div class="row">
<div class="col-xs-8">aaa</div>
<div class="col-xs-4">bbb</div>
<div class='clearfix'></div>
<div class="under col-xs-12 ">fdf</div>
</div>
It seems the "Bootstrap way" is to make a nested row. See how they did it here under "Nested Scaffolding": http://getbootstrap.com/2.3.2/scaffolding.html.
<div class="row">
<div class="col-xs-8">aaa</div>
<div class="col-xs-4">bbb</div>
<div class = "row">
<div class="under col-xs-12">fdf</div>
</div>
</div>
And what about creating an other row?
<div class="row">
<div class="col-xs-8">aaa</div>
<div class="col-xs-4">bbb</div>
</div>
<div class="row">
<div class="under col-xs-12">fdf</div>
</div>

Blueprint nested containers

I am having a Fluid Grid System container nested into another container.
<div class="fluid_grid_layout">
<div class="six_column section">
<div class="three column">
<div class="six_column section">
<div class="two column">part</div>
<div class="four column">part</div>
</div>
</div>
<div class="three column">boko</div>
</div>
</div>
How this can be achieved using Blueprint 1.0?
Is it posible to have one container inside another which allows you finer(more granular control) of the nested content?
Aparently this is not possible in Blueprint. I ended up using Fluid Grid System from http://fluid.newgoldleaf.com/.

Dynamic columns/rows

Wondering--does anyone know of any good articles explaining the CSS technique allowing multiple instances of a class to flow down the page relative to the items above it. Not explaining it that well.
Veerle' Pierter's does it on this page: http://veerle.duoh.com/belgiangraphicdesign Although I'm not sure I want to use a technique like her's that requires entering of the height per element via her EE installation.
I made a little graphic of what I am trying to acheive;
The key is I need a robust technique for doing it. Something where the markup could be as simple as;
<div class="box">
Number 1
</div>
<div class="box">
Number 2
</div>
<div class="box">
Number 3
</div>
<div class="box">
Number 4
</div>
<div class="box">
Number 5
</div>
...
Would love any pointers in the right direction.
As the others have pointed out, using only CSS you could group the boxes into columns. Unfortunately this will not look good if your content is dynamic and you don't know the heights of all the boxes (your columns could end up drastically different lengths). If you want to calculate the heights of boxes in order to arrange them nicely, you are going to have to use Javascript. There's certainly nothing wrong with using Javascript - it's the right tool for this job!
As for the implementation, the logic would go something like this: start by adding the first 4 boxes, one at the top of each column. Then keep track of the total height of each column using Javascript's clientHeight property, and for each new box you want to add; simply append it to the end of the shortest column with appendChild().
If you decide to go with jQuery, I can recommend a plugin called jQuery Masonry.
She isn't setting a height for those boxes.
Jquery is dynamically positioning each box and as far as I know that's the only way to achieve that effect with the markup you describe in your post.
If you don't want to use a javascript solution the only way to do it is to have wrapper columns, but that would change your markup dramatically.
<div class="container">
<div class="box">number 1</div>
<div class="box">number 2</div>
<div class="box">number 3</div>
</div>
<div class="container">
<div class="box">number 4</div>
<div class="box">number 5</div>
<div class="box">number 6</div>
</div>
<div class="container">
<div class="box">number 7</div>
<div class="box">number 8</div>
<div class="box">number 9</div>
</div>
She achieves it positioning the boxes absolutely.
But you can achieve it with very simple css, assuming you can control the order by which the items appear.
You have to group them in columns (and not in rows as is usual), but it works like a charm.
Use HTML like this:
<span class="column">
<div class="box">number 1<br />with two lines</div>
<div class="box">number 4</div>
<div class="box">number 7<br />with two lines</div>
</span>
<span class="column">
<div class="box">number 2</div>
<div class="box">number 5<br />with two lines<br />or even three<br />or four!</div>
<div class="box">number 8</div>
</span>
<span class="column">
<div class="box">number 3</div>
<div class="box">number 6</div>
<div class="box">number 9</div>
</span>
And CSS like this:
.column {
clear: left;
width: 25%;
display: inline-block;
vertical-align: top;
}
.box {
border: solid 1px blue;
}
Test it on JSFiddle.net.
Use span for the columns, because IE7 does not accept display: inline-block; for elements that are naturally block elements. (Meh.)

Resources