Encountering an issue with multiple ng-repeat elements displaying div elements as inline-block. A strange gap appears between the elements when transitioning from one ng-repeat to the next, which is visible in the provided image:
A demonstration of this problem can be viewed on thisplunk:
What could be causing this issue and how can it be resolved?
Take a look at this example
If you want to remove the space between inline elements that appear at a line break, there is a helpful hack.
<div class="red" ng-controller="TestCtrl">
<div class="blue number" ng-repeat="number in array1 track by $index">{{number}}</div><!--
--><div class="green number" ng-repeat="number in array2 track by $index">{{number}}</div><!--
--><div class="teal number" ng-repeat="number in array3 track by $index">{{number}}</div>
</div>
To learn more about additional hacks, check out this resource.
The reason for the extra space in your layout is due to how the .number class is styled in your CSS. By adding a float: left property to it, you can eliminate this issue.
.number {
width: 20px;
height: 20px;
display: inline-block;
color: white;
text-align: center;
float: left;
}
For a live example of this fix, check out my updated plunkr here
It may seem strange, but the spaces (crlf, spaces...) between your inline block divs are what creates the spacing.
If you eliminate them, the extra space disappears. (see demo here)
While there isn't a specific explanation for this behavior, my theory is that because the characters are positioned between inline blocks, the browser interprets them as spaces, similar to how it treats block elements as inline elements like spans.
<body ng-app="testRepeat">
<div class="red" ng-controller="TestCtrl">
<div class="blue number" ng-repeat="number in array1 track by $index">{{number}}</div><div class="green number" ng-repeat="number in array2 track by $index">{{number}}</div><div class="teal number" ng-repeat="number in array3 track by $index">{{number}}</div>
</div>
</body>
The issue arises from the presence of spaces between the <div> tags. There are a few solutions provided by other responses. Personally, I prefer the following layout:
<div class="blue number" ng-repeat="number in array1 track by $index">{{number}}</div>
<div class="green number" ng-repeat="number in array2 track by $index">{{number}}</div>
<div class="teal number" ng-repeat="number in array3 track by $index">{{number}}</div>
However, the alternate suggestions are also valid.
To avoid dealing with the HTML formatting issue, an alternative is to set the font size of the container to 0 to eliminate the whitespace.
http://plnkr.co/edit/wXKl61lyiqdONbChYI9o?p=preview
The drawback of this method is that percentage sizes for the fonts within the containers cannot be utilized and must be explicitly defined.
I am experiencing a peculiar issue with the carousel feature on a website built using MaterializeCSS. Sometimes it functions correctly, but other times I encounter the following error: jQuery.Deferred exception: c is undefined s@https://cdnjs.cloudflare.c ...
I came across a simple lightbox code snippet, but it's based on IDs and I plan to use it for more than 20 items. I don't want to manually write out 20 JavaScript lines when there could be a more efficient way to handle it dynamically. My JS skill ...
Currently, I am in the process of integrating the Duda White Label API into a .html page to ensure that it aligns with my custom CSS. To guide me through this task, I am referring to the instructions provided at: After inserting my API key, Password, and ...
While setting up NextJS, I ran into the following issue: D:\Codes\React\Learn>npx create-next-app npm WARN using --force Recommended protections disabled. npm WARN using --force Recommended protections disabled. npm ERR! code E404 npm ERR ...
I've been trying to create a button that will redirect to a new link when clicked, but I've tried multiple options and can't seem to get it to work. var button = document.createElement("button"); button.innerHTML = "$1.00"; divInnerElement ...
I have a div that holds a series of li elements to construct a menu. Adjacent to the container ul, there is another div intended to appear only when an item in the original menu is hovered over. While I grasp the concept of mouseout and mouseover effects ...
I am developing a web application that focuses on searching and displaying movie information. One of my challenges is accessing nested objects like "principals" from the same endpoint that contains the main object "title". Upon fetching the JSON response: ...
Currently, I am developing a React website that includes distinct sections such as contact management and message management. Each of these sections is quite extensive. To navigate to these sections, we use a single dashboard for control. Since separate ...
I am using ng-repeat to display data in a table. The rows are filtered based on values from two input fields, which can change the number of displayed rows. <table> <tr data-ng-repeat="row in grid.data | filter:isProblemInRange> <td>xxx& ...
I am looking to design a 2-row layout for a webpage where one row will contain filters and the other row will display results. The layout should meet the following criteria: The page height should not exceed 100% The first row's height will vary bas ...
I've successfully implemented code for file uploading. When saving the uploaded file in the database, I retrieve the uploader's username from another database. Additionally, I have a page that displays all uploaded files, functioning perfectly. N ...
Earlier I attempted to ask this question from my phone, but it ended up being overly convoluted and confusing. Therefore, I have decided to start fresh after locating a working PC. Unfortunately, due to the sensitive nature of the project, I am unable to p ...
I have a unique scenario where I need to generate a series of "cards" with tabs on top (each card having tabs). To accomplish this, my plan was to use a template element that I can clone and then populate. Everything seems to work fine, except for the tabs ...
Using HTTParty to Post Request $http did not pass the http method properly. However, HTTParty functioned correctly and retrieved the desired results.</p> ...
There is a website I have where users can input data into fields and submit it. Once submitted, the information is sent to my server through a POST request and saved in the database. However, this user-generated content is also returned to the front-end f ...
My attempt to rotate an object by a variable number of degrees in order to mimic a dial was unsuccessful. Initially, I tried the following steps: window.onload = function() { var paper = new Raphael(document.getElementById('canvas_container ...
"When an element with a specific id has a first-child descendant that is any of the heading tags (h1, h2, h3, h4, h5, or h6), apply the following CSS styles:" I have come up with the following selector: #content:first-child h1, #content:first-child h2, ...
I have recently designed a box buffer geometry with dimensions of 8x8x8. To enhance its appearance, I am looking to add a grid around it that aligns with these dimensions (specifically having 64 squares on each side). Does anyone know of any effective me ...
When I add a certain number of textbox controls with text on each one, then navigate to another page and return back, the textboxes disappear. Is there a way to maintain the textboxes and their values in AngularJS? ...
After integrating the Material-UI dependency into my ReactJS code, I encountered an issue where the "save" functionality no longer works properly. Previously, when editing a task in my simple Todo list app, the new name would be saved successfully. However ...