1

I have a really weird behavoir on all the browsers and I hope someone can explain this to me. 

<div style="margin-top:5px">
    <button translate="clear" ng-click="xyz.clear()" class="btn btn-default"></button>                
    <button ng-repeat="operation in xyz.operations" class="btn btn-default">{{operation.name}}</button>
</div>

enter image description here

In a div I have a button, and another button element having an ng-repeat on it. The first 'static' button and the first button rendered by ng-repeat have some spacing I would not expect. I have not found any information about why there is space in between the buttons but its consitent on all the browser I have been testing, so I guess there must be a reason in conjunction with Angular's ng-repeat.

Here is what Chrome shows on the Dev-Tools Elements:

enter image description here

There seems not to be any CSS selector that matches on the element's position. When I reorder them in the DOM using the Dev-Tools, the weird behavior persists:

enter image description here

The computed box for the element is the very same for all the buttons, here is how this looks like: enter image description here

chris1069603
  • 433
  • 5
  • 15
  • `ng-repeat="operation in xyz.operations class="btn btn-default"` is just a typo, right? It is `ng-repeat="operation in xyz.operations" class="btn btn-default"` in reality, right? Asking just to be sure :) – Szabolcs Dézsi Feb 13 '16 at 18:56
  • Yes it is, thanks for spotting. Happend when cleaning out the stuff for the web. Will correct it. – chris1069603 Feb 13 '16 at 18:59

1 Answers1

1

This problem pretty much has nothing to do with how ng-repeat works. The button element has display inline block by default (MDN)

To fight the space between the buttons, simply give them a margin left of negative 5px

This CSS-tricks topic is worth a read, and heres a demo of your problem and the fix for it

#fix button{
  display: inline;
  margin-right: -5px;
}
<div id="problem">
  <button>clear</button>
  <button>clear</button>
  <button>clear</button>
</div>

<div id="fix">
  <button>clear</button>
  <button>clear</button>
  <button>clear</button>
</div>
realappie
  • 4,656
  • 2
  • 29
  • 38
  • actually you pointed me to the right direction. Thank you. The problem is that I had only space between one button and the others! But the hint with the inline-block helped me. I think I will just go for the flexbox solution. – chris1069603 Feb 13 '16 at 19:13
  • I'm more than happy to have been able to help @chris1069603, if your problem is solved make sure to mark this question as answered! – realappie Feb 13 '16 at 19:15