Develop Reference

How to make elements stay in place even if the if directive removes the given element from the middle of consecutive elements

I need to style rows like in picture.
The problem is I want to have fixed elements no matter if previous or next element will disappear. Also the whole table is resizable and buttons should overlap text if text will be too long
<div class="someRow">
<div class="someText"></div>
<div class="buttonsContainer">
<div *ngIf="someExpression1" class="button1"></div>
<div *ngIf="someExpression2" class="button2"></div>
<div *ngIf="someExpression3" class="button3"></div>
<div class="button4"></div>
</div>
</div>

<div class="buttonsContainer">
<div class="row">
<div class="col-4">
<div *ngIf="someExpression1" class="button1"></div>
</div>
<div class="col-4">
<div *ngIf="someExpression2" class="button2"></div>
</div>
<div class="col-4">
<div *ngIf="someExpression3" class="button3"></div>
</div>
</div>

Bootstrap responsive gallery with match height for images

Im trying and trying too build something i think simple but right know i dont know how to do it ;) Honestly i mad it few months ago but i lost files and i don have any idea how to build it right now
So, im using Bootstrap to build gallery i have 2 different sizes of images long and short ones
Long ones are 1920x1200, short 1200x1200px
im trying to build it in grid like
<div class="row">
<div class="col-md-6">
<img src="yourImg" />
</div>
<div class="col-md-3">
<img src="yourImg" />
</div>
<div class="col-md-3">
<img src="yourImg" />
</div>
<div class="col-md-6">
<img src="yourImg" />
</div>
<div class="col-md-6">
<img src="yourImg" />
</div>
<div class="col-md-3">
<img src="yourImg" />
</div>
<div class="col-md-3">
<img src="yourImg" />
</div>
<div class="col-md-3">
<img src="yourImg" />
</div>
<div class="col-md-3">
<img src="yourImg" />
</div>
</div>
Of course it should look like in my preview img
and of course img should be in the center of each column.
I tried to use JS for match heigh and it works fine but of course image is out of the parent div and i cant fix it. I cant use background-image beacuse JS is not reading the size of div.
Any ideas ? How to build it ? The best thing is that i build it ...... and right now i can build it again !
Thank you very very much !

If you want the image to match the containing div's size you should add this code to the CSS:
img {
max-width: 100%;
max-height: 100%;
}
you can also save the original ratio by using this instead:
img {
max-width: 100%;
height: auto;
}

First of all, the structure of the html is wrong,
each row has 12 columns, you have put all the columns of each row into one row.
The code should be like this:
<div class="row">
<div class="col-md-6">
<img>
</div>
<div class="col-md-3">
<img>
</div>
<div class="col-md-3">
<img>
</div>
</div>
<div class="row">
<div class="col-md-6">
<img>
</div>
<div class="col-md-6">
<img>
</div>
</div>
<div class="row">
<div class="col-md-3">
<img>
</div>
<div class="col-md-3">
<img>
</div>
<div class="col-md-3">
<img>
</div>
<div class="col-md-3">
<img>
</div>
</div>
Like this, the images should be organized more or less as you want

how to get a single item returned when a div is clicked in aurelia

i have a div that when you click it,it opens a modal. as follows
<div if.bind="Members.length" click.delegate="GetProfiles($event.target)">
<div repeat.for="category of Types(Members)">
<div class="row">
<div class="col s3">
<div class="card blue-grey darken-1">
<div class="rotate-text-90-negative truncate">
${category.name}
</div>
</div>
</div>
</div>
</div>
</div>
so when the page loads and i have 3 category names displayed for example
Stationary
Office Equipment
Cleaning supplies
now when i click on Stationary i want it to open the "GetProfiles($event.target)" modal i have which it does as follows
<div md-modal="
in-duration: 1000;
out-duration: 1000;
dismissible:false;
"
md-modal.ref="GetProfile">
<div class="modal-content">
<div>
<div >
<md-input label="First Name" readonly.bind="false"></md-input>
</div>
</div>
</div>
</div>
i have the following on my type script page
async GetCrewProfiles(Members) {
this.GetProfile.open();
console.log(Members);
}
but now when i log the members out it comes back with all the members array as follows:
0:{Name:"Stationary" Id:"12365" active:true stock:"50"}
1:{Name:"Office Equipment" Id:"1278365" active:true stock:"0"}
2:{Name:"Cleaning supplies" Id:"12395" active:true stock:"5"}
how do i create an event that only returns the Member that i clicked on, so if i clicked on Stationary i only want to get the information for that and not return everything
i tried this
GetProfiles($event.target) and GetProfiles(Members)
but i cant figure out how to add a click event for a selected item

Have you tried moving your click.delegate function inside the repeat.for div?
I suggest you to move your click.delegate inside the repeat.for div. Something like this:
<div if.bind="Members.length">
<div repeat.for="category of Types(Members)">
<div class="row">
<div class="col s3">
<div class="card blue-grey darken-1">
<div click.delegate="GetProfiles($event.target)"
class="rotate-text-90-negative truncate"> ${category.name}
</div>
</div>
</div>
</div>
</div>
</div>

AngularJS - trying to get background color to change with ng-switch and ng-click

This is my first question - and it is really just more of a frustration. I've went through about 12 different stack overflow questions that are similar and have copied their code and I still can't get the bloody background color to change on click. So I assume I'm missing something.
https://codepen.io/Dawsraki/pen/XRGBLW
<html ng-app="app">
<head>
<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
</head>
<body ng-controller="SwitchController" ng-style="myStyle">
<div ng-switch="slider.page" class="screen" >
<div id="record_player" ng-switch-when="1">
<span><</span>
<div class="rectangle">
<div class="circle1">
<div class="circle3">
</div>
</div>
<div class="handle">
<div class="circle1">
</div>
<div class="hand">
</div>
<div class="arm">
</div>
</div>
<div class="toggles">
<div class="left_dash"></div>
<div class="right_dash"></div>
</div>
</div>
<h1>Listen to Music</h1>
<span>></span>
</div>
<div id="cassette" ng-switch-when="2">
<span><</span>
<div class="rectangle">
<div class="circle1">
</div>
<div class="line1">
</div>
<div class="line2">
</div>
<div class="line3">
</div>
<div class="line4">
</div>
<div class="circle2">
</div>
</div>
<h1>Share it with friends</h1>
<span>></span>
</div>
</div>
</div>
</body>
</html>
Here is my code pen - I want the background color to change when I click on the arrow and I have seen so many simple solutions but they just arn't working and I've no idea why. If anyone wants to help an AngularJS noob out there will be much love and biscuits <3 (DISCLAIMER: biscuits will not be provided)

This problem is due to ng-switch, as it creates its own scope.
Use $parent.myStyle={background:'red'}" in your anchor tag to fix this

How do I prevent two divs from jumping around my webpage when it first loads?

Thanks for trying to help! I'm having an issue with the following code when the page initially loads. The div class 'highlights', which contains the divs 'box' and 'box-2', jumps around the page when loading. I suspect is has something to do with the social media buttons running javascript above the divs but cannot figure out how to get everything to stay still. Here is a link to the site. Thank you all for helping!!
<div class="buttons">
<div class="fb-share-button" data-href="http://www.powerrankingsguru.com/MLB/2015-MLB- power-rankings/week-18.html" data-layout="button_count">
</div>
<div class="twitter-button">Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)) {js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div class="g-plus" data-action="share" data-annotation="bubble" data- href="http://www.powerrankingsguru.com/MLB/2015-MLB-power-rankings/week-18.html"> </div>
</div>
<div class="highlights">
<div class="box">
<div class="box-header"><p>What to Watch</p></div>
<div class="box-content">
<div class="game-details">
</div>
<div class="game-overview">
<div class="away-team">
<div class="away-team-logo">
<img src="../../Images/MLB/Los_Angeles_Dodgers_75px.gif">
</div>
<div class="record">
<h6>Dodgers</h6>
<h6 class="lighter">(60-45)</h6>
</div>
</div>
<div class="home-team">
<div class="home-team-logo">
<img src="../../Images/MLB/Pittsburgh_Pirates_75px.gif">
</div>
<div class="record">
<h6>Pirates</h6>
<h6 class="lighter">(61-43)</h6>
</div>
</div>
<div class="symbol">#</div>
</div>
</div>
<div class="date">
<h4><span class="left">Fri Aug 7th - Sun Aug 9th</span></h4>
</div>
</div>
<div class="box2">
<div class="box2-header"><p>Biggest Movers</p></div>
<div class="rise">
<div class="rise-up"><img src=../../Images/arrowGW.gif></div>
<div class="rise-number"><p>5</p></div>
<div class="rise-team"><img src="../../Images/MLB/Toronto_Blue_Jays_75px.gif"></div>
</div>
<div class="fall">
<div class="fall-down"><img src=../../Images/arrowRW.gif></div>
<div class="fall-number"><p>5</p></div>
<div class="fall-team"><img src="../../Images/MLB/Atlanta_Braves_75px.gif"></div>
</div>
</div>
</div>

If you're okay with using javascript you could hide your container box with display: hidden and then in a javascript onload function you would set the display back to block.
Div:
<div id="highlightDiv" class="highlights" style="display: hidden">
...
</div>
onload:
window.onload = function() {
document.getElementById("highlightDiv").style.display = "block";
}