Dealing with ng-repeat and button alignment across Chrome, Edge, and Firefox

Question

Dealing with ng-repeat and button alignment across Chrome, Edge, and Firefox

Can someone help me understand this strange behavior I am experiencing across all browsers?

<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>

https://i.stack.imgur.com/vVnbB.png

I have a button and another button with an ng-repeat inside a div. The spacing between the first 'static' button and the first button from ng-repeat is unexpected. This spacing persists consistently across all tested browsers, leading me to believe that it may be related to Angular's ng-repeat.

Inspecting the elements in Chrome Dev-Tools shows:

https://i.stack.imgur.com/aAVTq.png

No CSS selectors seem to affect the spacing between the buttons. Even when rearranging them in the DOM using Dev-Tools, the odd behavior remains:

https://i.stack.imgur.com/JOo9L.png

The computed box for the element is identical for all buttons as shown here: https://i.stack.imgur.com/Q0ijh.png

html css angularjs

Answer 1

Answer №1

This issue is not related to the functionality of ng-repeat. The default display property for the button element is inline-block (MDN)

To eliminate the space between the buttons, you can apply a left margin of -5px.

Here is a helpful CSS-Tricks article on this topic. It includes a demo showcasing the problem and its solution.

#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>

Answer 2

This issue is not related to the functionality of ng-repeat. The default display property for the button element is inline-block (MDN)

To eliminate the space between the buttons, you can apply a left margin of -5px.

Here is a helpful CSS-Tricks article on this topic. It includes a demo showcasing the problem and its solution.

#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>

Dealing with ng-repeat and button alignment across Chrome, Edge, and Firefox

Answer №1

Similar questions

What is the best way to activate an onchange function when using a <select> element?

Splitting JavaScript files in the "dist" folder based on their source folders can be achieved in Angular by using G

Type in "Date" and select a date using your mobile device

Various instances of controllers in Angular.js and JavaScript

Preserving distance between absolute elements

The d3 drag functionality is only active when the axis ticks are selected

How can I convert the left links in my navigation bar to a CSS drop-down menu to make it more responsive on small screens?

Can anyone help me with displaying auto complete HTML files in VScode?

Using Selenium with C# to input text into an HTML <input> tag is not functioning properly

Assess transcluded content prior to template compilation in an AngularJS directive

Protractor and Jasmine fail to fulfill the promise of retrieving a webpage title

Container slide-show fill error

The Scottish flag isn't displaying on my website, but all other Emoji 5 symbols are working perfectly

Trouble arises with AJAX due to DOM traversal errors

What is the best way to link multiple select tags in an HTML document?

Concealing two div elements based on string content

How can I stop a hyperlink from activating Jquery?

What is the process for setting a cookie that allows for reading from the same domain with a different port?

Place a <ul> list in the center

AngularJS ng-repeat not displaying bold fonts in HTML output