CODEWITHSUNDEEP
javascriptcssangularjstwitter-bootstrap
Kristian Vitozev
Kristian Vitozev

Reputation: 5971

Display all items in one row, but preserve last item space?

Take a look at the following picture:

enter image description here

I have the following code, and now I want to display all items (circles) always (depends on screen size) in one row, but the last item should be always in place (on desktop, tablet, mobile).

<body ng-controller="MainCtrl">
  <button class="btn-select-user" ng-repeat="item in items | limitTo: limit as result">
    <span>
      <img ng-class="{}" ng-src="https://graph.facebook.com/4/picture?height=46&amp;type=square&amp;width=46" width="40" height="40" src="https://graph.facebook.com/4/picture?height=46&amp;type=square&amp;width=46">
    </span>
  </button>
  <span class="badge pull-right" ng-click="limit = items.length" ng-hide="limit == items.length">Show all</span>
</body>

Any suggestions?

Upvotes: 0

Views: 76

Answers (3)

Kyle
Kyle

Reputation: 5557

You can do this with a custom directive. Working plunker: http://plnkr.co/edit/4m3xU5JQqL4R5YPrYIdC?p=preview

<span ng-repeat="item in items | limitTo:numDisplay">
  <span class="huge" ng-class="{'last':$last}">{{item}}</span>
</span>

You'll need to add this directive to the body tag:

<body resizable>

The directive:

app.directive("resizable", ["$window", function($window){
  return function($scope) {
    $scope.initializeWindowSize = function() {
      //do the screen width check
      if($window.innerWidth < 641)
        $scope.numDisplay = 3;
      else if($window.innerWidth > 640 && $window.innerWidth < 800)
        $scope.numDisplay = 5;
      else
        $scope.numDisplay = 10;

      //check console see if it's correct
      console.log($window.innerWidth, $scope.numDisplay);

      //return the inner width
      return $scope.windowWidth = $window.innerWidth;
    };

    $scope.initializeWindowSize();

    return angular.element($window).bind('resize', function() {
      $scope.initializeWindowSize();
      return $scope.$apply(); //run digest
    });
  };
}])

Upvotes: 2

Kyle Krzeski
Kyle Krzeski

Reputation: 6527

Right now you're outputting 10 circles + 1 circle that is a solid color on the end. For usability sake, I would stick to a fixed number of circles and change the dimensions of those circles depending on the screen size.

Upvotes: 0

Jakob
Jakob

Reputation: 3546

You could add new parent div for buttons with fixed height and overflow so they are hidden until div is bigger or resized.

Something like this:

.buttons {
  width: calc(100% - 40px);
  height: 40px;
  overflow: hidden;
  float: left;
}

Here is example of it http://plnkr.co/edit/LGYdQszYtxtMXB7fxpDs?p=preview

Then on click of that last circle you just remove fixed height.

Upvotes: 1

Related Questions