"Yatay Dosya Görünümü İkonlu | Horizontal Media View With Icons"
Bootstrap 2.3.2 Snippet by mesutcakir

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl"> <div class="horizontal-medias"> <button class="btn btn-default newBtn clearfix"> <i class="fa fa-plus fa-2x pull-left"></i> </button> <button ng-repeat="btn in buttons" class="btn btn-default"> <i class="fa fa-file-word-o fa-2x"></i> <div class="flex-group"> <span>Uzun Dosya Adı 1<br>10 KB</span> </div> </button> </div> </div> <script> angular.module("app",[]) .controller("ctrl",function($scope){ $scope.buttons = [ {name:"Dosya Adı 1",class:"fa-file-word-o"}, {name:"Dosya Adı 1",class:"fa-file-word-o"}, {name:"Çok Çok Uzun Dosya Adı 1",class:"fa-file-archive-o"}, {name:"Çok Çok Uzun Dosya Adı 1",class:"fa-file-pdf-o"}, {name:"Çok Çok Uzun Dosya Adı 1",class:"fa-file-movie-o"}, {name:"Çok Çok Uzun Dosya Adı 1",class:"fa-file-powerpoint-o"}, {name:"Çok Çok Uzun Dosya Adı 1",class:"fa-file-audio-o"}, {name:"Çok Çok Uzun Dosya Adı 1",class:"fa-file-image-o"} ] }) </script>
.horizontal-medias{ overflow:auto;height:80px;white-space: nowrap; border:1px solid #f3f3f3; } .horizontal-medias button{ height:50px; max-height:50px; min-height:50px; display: inline-flex; } .horizontal-medias button i{ margin-top:5px; margin-right:7px; } .horizontal-medias button i, .horizontal-medias button div.flex-group{ display: inline-flex; text-align:left; } .horizontal-medias button:not(.newBtn){ width:220px; max-width:220px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .horizontal-medias::-webkit-scrollbar { width: 1em; height:9px; } .horizontal-medias::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); } .horizontal-medias::-webkit-scrollbar-thumb { background-color: #ccc; outline: 1px solid slategrey; }

Related: See More


Questions / Comments: