We Keep Coding

How to start a new row in Angular 2 templat

I'm working on Angular 2 now. In my template I'm using the following to show the data I get from the APIs
<div class="blocks">
<div router-active class="block" *ngFor="let item of items">
<div class="inblock">
<p class="title">{{ item.name }}:</p>
</div>
</div>
</div>
Everything is working fine but if one of the div height was higher than the others it would look something like the image below
I want to have a nice row with three divs only and after three you start a new block, I know how to do it normally but I can't figure out how to do it with Angular 2!
UPDATE : I don't want a fixed height because the content can be as long as the user wants! so adding a fixed height with CSS will not solve the issue

You will find a solution using css. Take this code:
.block {
float: left;
width: 150px;
margin: 10px;
border: 3px solid #73AD21;
}
.block:nth-child(3n+4){
border: 1px solid red;
clear: both;
}
The above code is using float to make the blocks inline. Using nth-child you can tell it to clear each 3rd block.

Why don't you create a 'css' associated to your template and pass it to styleUrls property. In that CSS you can defile a class and set the div properties whatever you like and pass that class name to the elements.

Change slider for horizontal scroll?

i've done a horizontal picture gallery from the here: How do I allow horizontal scrolling only for a row of images and show overflow, without horizontally scrolling the rest of the page?
and i was wondering if there is anyway to change the slider at the bottom to something like a nano slider? Something like this:
I'd really appreciate some help

Use overflow-x: auto; on your container (section in your example)
<section>
<div class="pic-container">
<div class="pic-row">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
<img src="6.jpg">
</div>
</div>
</section>​
CSS:
body {
overflow: hidden;
}
section {
/* The width of your document, I suppose */
width:600px;
margin: 0 auto;
white-space:nowrap;
overflow-x: auto;
}
.pic-container {
/* As large as it needs to be */
width: 1500px;
}​

If i understand correctly, you want to change the styling for the scroll bar. If I'm correct, that isn't difficult. you should use Webkit Scrollbars for this. Here's a pretty good article on it.
you would probably want something like this:
::-webkit-scrollbar-track:horizontal {
height: 3px;
background: gray;
}
::-webkit-scrollbar:horozontal {
background: white;
}
I'm not completely sure about it, thought. It's been a while since I've needed to style scroll bars.
note: since this is webkit it won't work in firefox (or maybe explorer, not sure) as far as I know, the only way to do this would be with javascript.

Parallax scrolling tutorial for background image

After spending days trying to figure out why I can't seem to get parallax scrolling working for one picture on a website I'm working on, I'm finally posting here. So I have this code so far:
HTML:
<div class="intro">
[a bunch of stuff here]
</div>
CSS:
.intro {
background: url(../images/IMG_100.png) 50% 0 fixed;
background-position: center;
margin: 0 auto;
width: 100%;
box-shadow: 0 0 50px rgba(0,0,0,0.8);
padding: 100px 0;
}
I've pretty much tried all the tutorials for a simple parallax scroll effect, but they don't seem to work for my situation as it stands. What seemed most promising to me was to use the skrollr.js plugin - I tried adding the following to my div tag:
<div id="intro" class="intro"
data-bottom="opacity:1;background-position: 0px -50px;"
data-center="opacity:1;background-position: 0px 0px;"
data-top="opacity:1;background-position: 0px 50px;">
I then initialized skrollr at the end of my html:
<script type="text/javascript" src="js/skrollr.js"></script>
<script>
window.onload = function() {
skrollr.init();
}
</script>
...doesn't work. I'm fairly new to this, so any help would be greatly appreciated!

I think that the id of your main div should be equal to skrollr-body and not intro.
1st EDIT
Actually, I see there are situations where the main id doesn't need to be named scrollr-body. Maybe this tutorial could help you achieve different effects since I couldn't find any official documentation.
Check the fiddle of your snippet from the question.
2nd EDIT
I changed your html code to this
<section id="skrollr-body">
<div class="intro"
data-bottom="opacity:1;background-position: 0px -50px;"
data-center="opacity:1;background-position: 0px 0px;"
data-top="opacity:1;background-position: 0px 50px;">
<h1>Content in here</h1>
<p>first big text block</p>
<p>second huge text block</p>
</div>
</section>
I also changed the background attribute of the .info class to this
background: url('bg-image.jpg') no-repeat fixed center;
but feel free to experiment with values. Check the working fiddle

Can't align vertically a .swf file to the middle

I inserted a .swf file to my page inside a div, and I tried to make it vertically aligned to the middle of this div, but it didn't work, only horizontally but that's not what I want.
I tried to place this file in another div inside the main div and change the alignment of this div as well.
Any suggestions?

Here is a good way I use to center elements horizontally and vertically:
<div style="position:fixed; top:0; left:0; width:100%; height:100%;">
<div style="height:100%; display:table; margin:0 auto;">
<div style="vertical-align:middle; display:table-cell;">
<div><p>This is a fully-centered div!</p></div>
</div>
</div>
</div>

Hmm... its kinda hard to answer without a code snippet.
Here is an article for creating wrappers around Flash content: http://livedocs.adobe.com/flex/3/html/help.html?content=wrapper_13.html
Scroll down to the table, where they start talking about "align" or just do a page search for the word "align" to see what they have to say.
Here is also a quick idea, I have noooo idea whether or not it works, just food for thought:
div.SWFContainer object, div.SWFContainer embed {
display: inline-block;
margin: auto 0px auto 0px;
width: auto;
vertical-align: middle;
}

Have column extend to bottom of browser with an empty header

<div id="content">
<div id="header">
</div>
<div id="main-content">
</div>
</div>
html, body{height:100%;margin: 0px; padding: 0px; background-color: black;}
div#content{width:600px; margin: 0 auto; height:100%;}
div#header{width:600px; height:200px;}
div#main-content{width:600px; height:100%; background-color: white;}
As you can see, adding a header pushes everything down. I want main-content to extend to the end of the browser.
I think i worked around this issue before by creating a header with an image similar to my background in order to fake the appearance, however my background i'll be using is much too complicated.
Are there any methods to do this? possibly a working javascript fix?

You can make your main-content div positioned absolutely and then specify its top and bottom attributes. I've setup a jsfiddle here: http://jsfiddle.net/wrn8Y/1/
div#main-content{
position: absolute;
top: 200px;
width:600px;
bottom: 0px;
background-color: white;
}
Note that the top attribute is set to the bottom of your header, and the bottom is set to zero to hit the bottom of the page. If you wanted to have a footer you could change the bottom attribute to accommodate the footer.
Also you can do this with javascript, I generally use JQuery so here is some JQuery code that gets it done:
$('div#main-content').height($(document).height() - $('div#header').height());
This javascript (Jquery) will work with relatively positioned divs and the only css you would need to change is to remove the "height: 100%" on the "div#main-content" style.