Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="H100" ng-app="AppModule">

  
  
<div class="H100" ng-controller="AppCtrl as appCtrl">


<div class="VBox H100 app-view">
    <header>
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search name" ng-model="search.name">
            <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
        </div>
        <button ng-click="appCtrl.flowColumn = !appCtrl.flowColumn">Column</button>
        <span>{{appCtrl.flowColumn}}</span>
    </header>
    <div class="VBox employee-view">
        <div class="content-wrap">
            <div class="content scroll-y H100" ng-class="{flowColumn: appCtrl.flowColumn}">
                <li ng-click="appCtrl.onSelect(entity)" class="employee repeat-animation"
                    ng-class="{active: appCtrl.isSelected(entity)}"
                    ng-repeat="entity in appCtrl.entities |limitTo: 500 | filter:search track by entity.id">
                    <div class="wrap" set-pos>
                        <h4>{{entity.name}}</h4>
                    </div>
                    <div class="shadow"></div>
                </li>
            </div>
        </div>
    </div>

    <footer>
        
    </footer>
</div>

</div>
</div>
              
            
!

CSS

              
                
.H100{
  height: 100%;
}

@mixin Box {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  margin: 0;
  padding: 0;
  position: relative;
}

.VBox{
  @include Box();
  flex-direction: column;
  background: green;
}



.HBox {
  @include Box();
}


.content-wrap{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.scroll-y{
  overflow-y: scroll;
}

.scroll-x{
  overflow-x: scroll;
}

.space{
  display: flex;
  flex: 1;
}

.align-center{
  align-items: center;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: sans-serif;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.app-view {

  > header, footer {
    height: 50px;
    color: #fff;
    background: #333333;
  }

}

.employee-view {

  .content {
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    position: relative;
    background: #eee;


    &.flowColumn{

      .employee{
        width: 100%;
      }
    }
  }

  .employee-list {
    border-right: solid 1px #ddd;
  }

  .employee {
    list-style: none;
    display: block;
    height: 100px;
    width: 200px;

    .wrap {
      border-bottom: 1px solid #ddd;
      border-right: 1px solid #ddd;
      list-style: none;
      padding: 20px;
      background: #fff;
//      border-radius: 20px;

      width: inherit;
      height: inherit;

      overflow: hidden;
      text-align: center;
      position: absolute;

      &.active {
        background: #428bca;
        color: #fff;
      }
    }

    .shadow {
      height: 100px;
    }
  }

  .employee-edit {
    .content {
      padding: 20px;
    }
  }

}

.repeat-animation {
  -webkit-transition: .5s linear opacity;
  .wrap {
    transition-property: top, left, -webkit-transform;
    transition-duration: .5s;
  }
}

.repeat-animation.ng-leave, {
  opacity: 1;
  .wrap {
    -webkit-transform: scale(1, 1);
  }
}

.repeat-animation.ng-leave.ng-leave-active, {
  opacity: 0;
  .wrap {
    -webkit-transform: scale(.5, .5);
  }
}

.repeat-animation.ng-enter {
  opacity: 0;
  .wrap {
    -webkit-transform: scale(1, 1);
  }
}

.repeat-animation.ng-enter.ng-enter-active {
  transition-delay: .5s;
  opacity: 1;
  .wrap {
    -webkit-transform: scale(.5, .5);
  }
}


    
    
    
              
            
!

JS

              
                
     angular
        .module('AppModule', ['ngAnimate'])
        .controller('AppCtrl', AppCtrl)
        .directive('setPos', setPos);
        

    function setPos($log, $parse, $interval) {

        var elementLists = {};
        var intervalID = $interval(animate, 500);


        function animate() {

            _.forEach(elementLists, function (obj) {

                var target = obj.target;
                var scroll = obj.scroll;
                var targetPos = target.position();
                var currentPos = obj.element.position();

                if (currentPos.top === targetPos.top && currentPos.left === targetPos.left) return;
                var newPos = {top: (targetPos.top) + (scroll.scrollTop()), left: targetPos.left};
//                console.log(obj.element.position(), target.position());

                obj.element.css(newPos);
            });

        }

        function link(scope, element, attrs) {

            var id = scope.$id;
            var obj = {element: element, target: element.parent(), scroll: element.parent().parent()};
            elementLists[id] = obj;

            scope.$on('$destroy', function () {
                delete elementLists[id];
            });

        }

        return {
            restrict: 'A',
            link: link
        };
    }


    function AppCtrl($timeout) {
        console.log('AppCtrl');

        var vm = this;
      
      //this is a hack to trigger the animation on load
      // http://stackoverflow.com/a/20505571/1021888
      $timeout(function(){
            vm.entities = entities;
        },0);
      
      var entities = [
            {
                "id": 1,
                "name": "Kellie Waymire",
                "email": "ola_salo@significant.net",
                "bio": "Plaza directed rescue efforts for two days as airlifts from Quito dropped supplies.",
                "age": -20,
                "avatar": "http://hhhhold.com/s?13060634"
            },
            {
                "id": 2,
                "name": "Olivier Pla",
                "email": "george_cohen@lasso.org",
                "bio": "Surrey is not recorded as ever having been an independent kingdom, but was at least a province that was under the control of different neighbours at different times.",
                "age": -47,
                "avatar": "http://hhhhold.com/s?15408680"
            },
            {
                "id": 3,
                "name": "Havank",
                "email": "rodolfo_neri_vela@toll.com",
                "bio": "The next target of membership growth was 100,000 members in 2004.",
                "age": 74,
                "avatar": "http://hhhhold.com/s?10602120"
            },
            {
                "id": 4,
                "name": "Helmut Lotti",
                "email": "ryan_whitney@by.net",
                "bio": "In order to secure his claim, John of Aviz engaged in politics and intense diplomatic negotiations with both the Holy See and England.",
                "age": -51,
                "avatar": "http://hhhhold.com/s?14693506"
            },
            {
                "id": 5,
                "name": "J. Robert Hooper",
                "email": "gustav_horn@to.net",
                "bio": "It was ruled by Egbert until the early 670s, when a charter shows Wulfhere confirming a grant made to Bishop Eorcenwald by Frithuwold, a sub-king in Surrey, which may have extended north into modern Buckinghamshire.",
                "age": 73,
                "avatar": "http://hhhhold.com/s?9923537"
            },
            {
                "id": 6,
                "name": "Sheila Sherwood",
                "email": "lee_marvin@shaking.net",
                "bio": "Sea Scout training had been started in May 1921 with the assistance of the staff of HMS Tamar.",
                "age": 29,
                "avatar": "http://hhhhold.com/s?6543594"
            },
            {
                "id": 7,
                "name": "Karloff Lagarde",
                "email": "jerzy_giedroyc@victoria.org",
                "bio": "A plague the same year caused Sigehere and his people to recant their Christianity, and according to Bede, Wulfhere sent Jaruman, the bishop of Lichfield, to reconvert the East Saxons.",
                "age": -31,
                "avatar": "http://hhhhold.com/s?498686"
            },
            {
                "id": 8,
                "name": "Dave Wakeling",
                "email": "rayner_heppenstall@days.net",
                "bio": "Nuno Álvares Pereira took the task of choosing the ground for the battle.",
                "age": 88,
                "avatar": "http://hhhhold.com/s?12180735"
            },
            {
                "id": 9,
                "name": "C. Z. Guest",
                "email": "ronnie_arniell@raaf.com",
                "bio": "Later that month, Whittle was charged with conduct to the prejudice of good order and Military Discipline a second time for mutilating his pay book; he was reprimanded by the battalion's commanding officer as a result.",
                "age": 40,
                "avatar": "http://hhhhold.com/s?3675704"
            },
            {
                "id": 10,
                "name": "Nelson Pereira dos Santos",
                "email": "catherine_deneuve@south.xxx",
                "bio": "It is possible that Chad also had authority there as bishop, probably no later than 669.",
                "age": 23,
                "avatar": "http://hhhhold.com/s?3468050"
            },
            {
                "id": 11,
                "name": "André Breton",
                "email": "neil_smith@following.edu",
                "bio": "Earthquakes are common in Ecuador.",
                "age": -94,
                "avatar": "http://hhhhold.com/s?8930966"
            },
            {
                "id": 12,
                "name": "Collins Obuya",
                "email": "christopher_lloyd@the.org",
                "bio": "The importance of bread as a daily staple meant that bakers played a crucial role in any medieval community.",
                "age": -87,
                "avatar": "http://hhhhold.com/s?1664730"
            },
            {
                "id": 13,
                "name": "Hana Mandlíková",
                "email": "alvaro_obregon@settling.edu",
                "bio": "Whether she meant to buy them, as she claimed, and Law refused to undo his pack for such a small transaction, or whether she had no money and was begging for them, as Law's son Abraham claimed, is unclear.",
                "age": -45,
                "avatar": "http://hhhhold.com/s?3517694"
            },
            {
                "id": 14,
                "name": "Jon Foreman",
                "email": "khieu_samphan@a.com",
                "bio": "Despite opposition from members of the royal family, Louise fell in love with John, Marquess of Lorne, the heir to the Duke of Argyll, and Victoria consented to the marriage, which took place on 21 March 1871.",
                "age": 85,
                "avatar": "http://hhhhold.com/s?11650368"
            },
            {
                "id": 15,
                "name": "Takako Fuji",
                "email": "keenan_wynn@region.com",
                "bio": "Bowen returned to Hong Kong after the end of the war, and actively participated in the Movement.",
                "age": 65,
                "avatar": "http://hhhhold.com/s?12896605"
            },
            {
                "id": 16,
                "name": "Vasilios Magginas",
                "email": "laurell_k._hamilton@done.edu",
                "bio": "Fresh milk was overall less common than other dairy products because of the lack of technology to keep it from spoiling.",
                "age": 19,
                "avatar": "http://hhhhold.com/s?3765187"
            },
            {
                "id": 17,
                "name": "Zlatko Sirotić",
                "email": "björn_dreyer@for.xxx",
                "bio": "For his gallantry in two separate actions during this engagement, Whittle was awarded the Victoria Cross.",
                "age": -14,
                "avatar": "http://hhhhold.com/s?2943306"
            },
            {
                "id": 18,
                "name": "Jacob van der Hoeden",
                "email": "géza_kiss@discoverie.com",
                "bio": "Discharged from the navy in 1907, Whittle joined the Australian Army and was posted to the Army Service Corps; he was to serve in this position for three and a half years.",
                "age": -61,
                "avatar": "http://hhhhold.com/s?3677424"
            },
            {
                "id": 19,
                "name": "František Vláčil",
                "email": "björn_gustafsson@as.xxx",
                "bio": "James, the second surviving son of Charles I and Henrietta Maria of France, was born at St.",
                "age": -84,
                "avatar": "http://hhhhold.com/s?11676486"
            },
            {
                "id": 20,
                "name": "Ivan Bunin",
                "email": "prince_pedro_gastão_of_orléans-braganza@the.xxx",
                "bio": "Ælfgar was Earl of Mercia by 1058, and in that year was exiled again.",
                "age": -67,
                "avatar": "http://hhhhold.com/s?11590986"
            },
            {
                "id": 21,
                "name": "Barbara Thomson",
                "email": "timothy_leary@many.net",
                "bio": "George's Chapel on 12 December, with many members of the Royal and Argyll families present.",
                "age": -63,
                "avatar": "http://hhhhold.com/s?3602755"
            },
            {
                "id": 22,
                "name": "Nelson Pereira dos Santos",
                "email": "ștefan_radu@than.org",
                "bio": "2 near Palembang in Sumatra, commanding all Commonwealth air operations emanating from the base.",
                "age": -47,
                "avatar": "http://hhhhold.com/s?7396748"
            },
            {
                "id": 23,
                "name": "Louis Riel",
                "email": "tobymac@with.org",
                "bio": "Following a four-day reprieve away from the frontline, the 12th Battalion relieved the 9th Battalion at Lagnicourt on 14 April.",
                "age": -76,
                "avatar": "http://hhhhold.com/s?11158807"
            },
            {
                "id": 24,
                "name": "Aleks Marić",
                "email": "peter_reading@and.edu",
                "bio": "Since they were fewer than the enemy and had less ground to cover, they attained their final position very early in the afternoon.",
                "age": 91,
                "avatar": "http://hhhhold.com/s?9781022"
            },
            {
                "id": 25,
                "name": "Clinton Davisson",
                "email": "constantin_brâncuşi@techniques.org",
                "bio": "One member of the group scales a tree and chases the lemurs from tree to tree, forcing them down to the ground where the other is easily able to capture them.",
                "age": 53,
                "avatar": "http://hhhhold.com/s?4072366"
            },
            {
                "id": 26,
                "name": "Johann Reinhold Forster",
                "email": "julien_gracq@nuno.edu",
                "bio": "As part of the larger Metro Vancouver region, it is influenced by the policy direction of livability as illustrated in the Livable Region Strategic Plan.",
                "age": -91,
                "avatar": "http://hhhhold.com/s?404882"
            },
            {
                "id": 27,
                "name": "Zac Hanson",
                "email": "leslie_west@a.net",
                "bio": "John Earle wrote Two of the Saxon Chronicles Parallel (1865).",
                "age": 85,
                "avatar": "http://hhhhold.com/s?7613538"
            },
            {
                "id": 28,
                "name": "Ulrike Maier",
                "email": "arsène_wenger@about.edu",
                "bio": "The group was registered with The Boy Scout Association on 1 May 1914.",
                "age": -76,
                "avatar": "http://hhhhold.com/s?2685748"
            },
            {
                "id": 29,
                "name": "Johann Bernoulli",
                "email": "falco@to.org",
                "bio": "When the Castilian royal standard-bearer fell, the already demoralized troops on the rear thought their King was dead and started to flee in panic; in a matter of moments this became a general rout where Juan of Castile himself had to run at full speed to save his life, leaving behind not only common soldiers but also many still dismounted noblemen.",
                "age": 7,
                "avatar": "http://hhhhold.com/s?7615194"
            },
            {
                "id": 30,
                "name": "Eddie Arcaro",
                "email": "leroy@georgica.xxx",
                "bio": "Potts was instructed to write his account by the trial judges, and had completed the work by 16  November 1612, when he submitted it for review.",
                "age": -70,
                "avatar": "http://hhhhold.com/s?4708589"
            },
            {
                "id": 31,
                "name": "Falco",
                "email": "miguel_batista@chapel.net",
                "bio": "Records survive of the baptism of other kings at this time—Cynegils of Wessex was baptized in about 640, for example, and Edwin of Northumbria was converted in the mid 620s.",
                "age": 57,
                "avatar": "http://hhhhold.com/s?14055496"
            },
            {
                "id": 32,
                "name": "Debbie Macomber",
                "email": "vasilios_magginas@with.org",
                "bio": "As stated above this victory assured that John of Aviz was the uncontested King of Portugal and the House of Aviz ascended to the crown of Portugal.",
                "age": -11,
                "avatar": "http://hhhhold.com/s?12444071"
            },
            {
                "id": 33,
                "name": "Hüseyin Kenan Aydın",
                "email": "erik_bergman@which.xxx",
                "bio": "2902 Sjt.",
                "age": 37,
                "avatar": "http://hhhhold.com/s?5873741"
            },
            {
                "id": 34,
                "name": "Kotoōshū Katsunori",
                "email": "carole_eastman@scouts.org",
                "bio": "According to the ideological norm, society consisted of the three estates of the realm: commoners, that is, the working classes—by far the largest group; the clergy, and the nobility.",
                "age": 71,
                "avatar": "http://hhhhold.com/s?13720036"
            },
            {
                "id": 35,
                "name": "Fern Persons",
                "email": "forest_able@priest.com",
                "bio": "Measuring 6.",
                "age": 58,
                "avatar": "http://hhhhold.com/s?4772999"
            },
            {
                "id": 36,
                "name": "Ted Whitten",
                "email": "lou_klein@was.edu",
                "bio": "Advancing uphill with the sun on their backs, squashed between the funnelling Portuguese defensive works and their own advancing rear, and under a heavy rain of English longbowmen's arrows shot from behind the Portuguese line and crossbow quarrels from behind both the Sweethearts' and the Honeysuckle wings on their flanks, the Castilians did their best to win the day.",
                "age": -8,
                "avatar": "http://hhhhold.com/s?6202042"
            },
            {
                "id": 37,
                "name": "Tony Capstick",
                "email": "roxanne_hart@wight.org",
                "bio": "Breeding takes place between April and June, with the nest being constructed on the ground and hidden amongst vegetation in a dry location, often some distance from water.",
                "age": -84,
                "avatar": "http://hhhhold.com/s?9840815"
            },
            {
                "id": 38,
                "name": "Peter Hudson",
                "email": "salvatore_di_vittorio@create.xxx",
                "bio": "These would be contained in small bags which were either steeped in wine or had liquid poured over them to produce hypocras and claré.",
                "age": -92,
                "avatar": "http://hhhhold.com/s?611655"
            },
            {
                "id": 39,
                "name": "Chris Richardson",
                "email": "homer_hickam@country.net",
                "bio": "James worked to build an army in Ireland, but was ultimately defeated at the Battle of the Boyne on 1 July 1690 when William arrived, personally leading an army to defeat James and reassert English control.",
                "age": -83,
                "avatar": "http://hhhhold.com/s?11663307"
            },
            {
                "id": 40,
                "name": "Jon Fishman",
                "email": "geoffrey_de_havilland@operation.com",
                "bio": "Wulfhere's influence among the Lindesfara, whose territory, Lindsey, lay in what is now Lincolnshire, is known from information about episcopal authority.",
                "age": -37,
                "avatar": "http://hhhhold.com/s?11837328"
            },
            {
                "id": 41,
                "name": "Florence Green",
                "email": "alessandro_pistone@the.xxx",
                "bio": "Aqua vitae in its alcoholic forms was highly praised by medieval physicians.",
                "age": -22,
                "avatar": "http://hhhhold.com/s?6503281"
            },
            {
                "id": 42,
                "name": "Enzo Scifo",
                "email": "lynette_fromme@wintjiyas.com",
                "bio": "The chosen location was São Jorge near Aljubarrota, in a small flattened hill surrounded by creeks, with the very small settlement of Chão da Feira (Fair's Ground) at its widest point, still present today.",
                "age": -21,
                "avatar": "http://hhhhold.com/s?5702232"
            },
            {
                "id": 43,
                "name": "Sir Allan Napier MacNab Bt",
                "email": "edmund_dulac@be.com",
                "bio": "e.",
                "age": -42,
                "avatar": "http://hhhhold.com/s?15884310"
            },
            {
                "id": 44,
                "name": "Shivaji",
                "email": "tsuyoshi_nishioka@carriage.com",
                "bio": "In winter, it will utilise a wider range of open habitats, such as sheltered estuaries, brackish marshes and coastal lagoons.",
                "age": 28,
                "avatar": "http://hhhhold.com/s?580156"
            },
            {
                "id": 45,
                "name": "Nishinoumi Kajirō I",
                "email": "martín_cardetti@in.org",
                "bio": "A Gothic oriel window, belonging to the Provost's Lodgings, was added to the Carter Building in 1826.",
                "age": -62,
                "avatar": "http://hhhhold.com/s?14550501"
            },
            {
                "id": 46,
                "name": "Henri Karjalainen",
                "email": "seif_sharif_hamad@the.com",
                "bio": "Like herpestids it has a perianal skin gland inside an anal sac which surrounds the anus like a pocket.",
                "age": 15,
                "avatar": "http://hhhhold.com/s?13024323"
            },
            {
                "id": 47,
                "name": "Anton Müller",
                "email": "richard_mccarty@roads.xxx",
                "bio": "\" However, he observed that James \"concluded the Catholic church to be the sole authoritative voice on earth, and thenceforward ...",
                "age": -66,
                "avatar": "http://hhhhold.com/s?14920539"
            },
            {
                "id": 48,
                "name": "Louis Riel",
                "email": "joan_fontaine@colleges.com",
                "bio": "Enlarging to become the townsite of Granville, with the announcement that the railhead would reach the site it was renamed \"Vancouver\" and incorporated as a city in 1886.",
                "age": -25,
                "avatar": "http://hhhhold.com/s?4608197"
            },
            {
                "id": "3c8194d3-faa2-40bd-8acb-fc1f7ea24fbe",
                "name": "Tim Erfen",
                "email": "dražen_petrović@damaging.org",
                "bio": "The charge against her was the murder of Isabel Nutter, William Nutter's wife.",
                "age": 37,
                "avatar": "http://hhhhold.com/s?13392915"
            },
            {
                "id": "890ff55e-3380-43db-8c11-c62b8334152f",
                "name": "Michael Longley",
                "email": "cristina_fernández_de_kirchner@reported.net",
                "bio": "3 million residents, is the third most populous metropolitan area in the country and the most populous in Western Canada.",
                "age": -54,
                "avatar": "http://hhhhold.com/s?15466058"
            }
        ];
        
    }




              
            
!
999px

Console