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

Guide to positioning an image absolutely within a div

List of items displayed in alphabetical order using the ng-repeat directive:-

When jQuery fails to detach() due to the presence of an input tag

How can I animate scrolling up or down using jQuery and CSS?

Issue with Bootstrap v3.3.7 panel not collapsing as expected following height adjustment

vue form is returning empty objects rather than the actual input data

Creating a Shopping Cart using Laravel and Angular

Proper Sequence of Bootstrap Header Configuration

Utilizing HTML5 data attributes to store intricate JSON objects and manipulate them using JavaScript

ng-click-outside event triggers when clicking outside, including within child elements

What is the best way to integrate PHP code within CSS?

Sorting data based on column names

Expand Elements to occupy entire width

Utilize Material icons in CSS for a list in Angular 9

Using PHP header function to redirect to a specific form on an HTML page: A step-by-step guide

AngularJS: Render the initial element of the result set array

Unable to change the variable for the quiz

What's the best way to customize the dropdown icon in Bootstrap 5?

Assigning a class to an li element once the page has finished loading

Including hyperlink tags within a CSS file