Hello. Faced the problem of displaying the values ​​of an array of objects in a row. Here is a sample code:

<div id="catBlock"> <div ng-style="catBlock" ng-repeat="cat in list | orderBy: 'id' "> <img width="120px" height="150px" src='{{cat.imgPath}}' title="{{cat.name}}"/> </div> </div> </div> $scope.catBlock = { "display": "inline", "clear": "both", "border": "1px solid #666666", "background": "#555555", "width": "165px", "height": "210px" };

The output is standard in the column enter image description here

What needs to be done in order to display a list in a row, not in a column? Thanks in advance for your reply.

PS / There is an assumption that this cannot be solved with regular CSS and will probably have to be perpetrated with repeat and if.

  • Your problem is not reproduced: plnkr.co/edit/8BVa8SvNnXgQM4ngJAgl Give a minimally reproducible example. - Yaant
  • Very strange. Now I will try to double-check and lay out what would reproduce ... Thank you - Alex
  • Rechecked, by the way, here is plnkr.co/edit/RjSy6R9ncpzduu2OK3oB (there are a couple of comments). And what is most surprising is that everything works great. and the output goes in a row, only if you put the value of display: block then in a column. Well, and in my code, then display: inline !!! and I can’t find where exactly the display: block overlaps, there is an assumption that this is an automatic extra class ng-scope that appears after compilation. So I also strictly prescribed display: inline to him. By the way, the project in Java, SpringBoot, Angular. - Alex
  • And that’s all on Liby’s server, Tomcat-8.5.3, like this: `<dependency> <groupId> org.webjars </ groupId> <artifactId> angularjs </ artifactId> <version> 1.4.8 </ version> </ dependency> ` - Alex
  • In general, I found the problem. It turned out to be in the CSS style settings. After I killed all my own styles, the output went as I wanted - in a row. it remains the case for small rewrite CSS. Although, to begin with, I will still look in which block it was blocked ... PS / thanks for the quick response ... - Alex

1 answer 1

In general, I found the problem. It turned out to be in the CSS style settings. After I killed all my own styles, the output went as I wanted - in a row . it remains the case for small rewrite CSS. Although for starters, I will still look in which block it was blocked ...