Make a line break occur automatically after every 7 divs are displayed

Looking to create a grid of equal height and width divs using AngularJS to form a 7x5 square:

----------------------
|  |  |  |  |  |  |  |
----------------------
|  |  |  |  |  |  |  |
----------------------
|  |  |  |  |  |  |  |
----------------------
|  |  |  |  |  |  |  |
----------------------
|  |  |  |  |  |  |  |
----------------------

While flex and md-wrap could easily achieve this with automatic line breaks, it becomes tricky with 7 divs in a row. The issue lies in the calculation:

container = 100%

container/7 = 14.28

but values can only be 10 or 15!

To tackle this with Angular, the following structure is needed:

<div ng-repeat="item in Ctrl.items">
     {{item}}
</div>
htmlcssangularjs

Answer №1

If you want to style every 8th div differently, you can achieve this using the following CSS:

div:nth-of-type(8n) {
...
}

This will apply a specific display behavior to every 8th div on the page.

You can customize this behavior by using either the clear property or the flex property.

For example, you can use the following CSS:

div {
float: left;
}

div:nth-of-type(8n)::before {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: left;
}

Answer №2

To achieve this effect, you can utilize the nth-child and after pseudo selectors. Here's an example demonstrated in this jsfiddle:

div {
    display:inline;
}
div:nth-child(7n) {
    color:red
}
div:nth-child(7n):after {
    content:' ';
    display:block;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Imitate the act of pasting content into a Textarea using JavaScript

When data is copied from the clipboard and pasted into an html textarea, there is some interesting parsing that occurs to maintain the formatting, especially with newlines. For instance, suppose I have the following code on a page that I copy (highlightin ...

javascripthtml

JavaScript stylesheet library

What is the top choice for an open-source JavaScript CSS framework to use? ...

javascriptcssframeworks

Creating a CSS full-width navigation menu

Recently, I came across a menu code on the web that seemed great. However, I wanted to make my menu responsive and full width. Since I am new to CSS and HTML, adjusting the menu code has been a bit of a challenge for me. .menu, .menu ul { list-style: ...

javascripthtmlcss

Ensure the vertical dimension of the webpage is properly maintained

I am currently working with a client who has requested a website design with a specific height for the content section. The Inquiry: Is it possible to automatically create a new page for text that exceeds the maximum height of the content section on the ...

javascriptjqueryhtmlcss

HTML input field's placeholder text is truncated at the end

My HTML input form has a field with placeholder text that extends beyond the padding and gets cut off at the end. https://i.sstatic.net/9r46F.png I am unable to pinpoint the source of this issue. ...

htmlcsspaddingplaceholderinput-field

Angular Scope failing to refresh

Having issues with properly setting $scope.user when using Facebook login. It's not updating automatically on the callback, but only after clicking something else on the page. Seeking assistance to resolve this simple issue. Here is my HTML setup: & ...

angularjs

Endless AngularJS loop using ng-view

I recently started experimenting with AngularJS for a new project I am working on, but I have encountered a problem when dealing with routes and views. For the sake of simplicity, I have minimized this example to its basic form, yet the issue persists. Th ...

javascriptangularjsinfinite-loop

Arrangement of Axes in Google Graphs

I have a basic form where users can input data through drop-down selectors. There are 10 questions, each with a rating out of 10. The entered data is then used to generate a Google graph on the same page. Although the graph populates correctly, the axis ...

javascripthtmlchartsgoogle-visualizationbar-chart

What could be causing the video not to display in landscape mode on the iPad Pro?

I'm having an issue with a standard HTML5 <video> on my website. The videos are working fine on most devices, however there is a problem specifically with the iPad Pro in landscape orientation. It seems to work properly in portrait orientation ...

javascriptjqueryhtmlvideodevice-detection

Customizing Eclipse Outline View for Cascading Style Sheets (CSS) Files

Is there a way to modify Eclipse's Outline view for CSS files? Specifically, how can I make the outline display comments and create collapsible ranges for groups of CSS rules? Include comments in the outline Create collapsible ranges for groups of ...

csseclipseeclipse-wtpoutline-view

Changing Tailwind CSS variables for customization

Using Variables in index.css : :root { --property: 1; } A Different Approach to Changing it with CSS on Hover: img{ transform: scale(var(--property));; } .another-element:has(:hover, :focus) { --property: 1.1; } There's a way to inclu ...

csstailwind-csstailwind-ui

I'm looking to have a span and an input side by side, both spanning the full width of the containing div. How can I achieve this?

In my code snippet below: <html> <body> <div style="width: 700px;"> <span>test</span> <input style="width: 100%;"></input> </div> </body> </html> I am facing an issue where the span and input el ...

htmlcss

Designing a unique customized top navigation bar in Magento 1.9.2

I recently attempted to create a unique top menu in magento 1.9.2 by modifying the Navigation.php file located at app/code/core/Mage/catalog/Block/. I added some custom classes in an effort to customize the menu. In order to achieve this customization, I ...

phpcsstwitter-bootstrapmagento

Want to develop a web application and incorporate Ajax into it?

I'm sure many of you have created an online application that streamlines processes and saves time and money for your company. So, how did it go when you added some Ajax to enhance the user experience after developing the application? Any recommendat ...

htmlajaxuser-interface

Experiencing a 404 Server Error in the '/'' Application while using a web API with AngularJS MVC?

I have created a small demo to retrieve a list of users. I am using a web API with AngularJS, MVC, and C# for this purpose. To display the list, I am utilizing jQuery Datatable with AngularJS. However, when I try to view the user list, I encounter an erro ...

angularjsasp.net-web-apiangular-datatables

Tags that adhere to W3C compliance for struts

I'm facing an issue with a web page created using struts tag libraries. When attempting to validate the page on w3c.org, all the struts tags are showing up as undefined. For example, <html:button> appears as undefined. The DOCTYPE I used is: &l ...

htmlstrutsw3c

Capturing user input in HTML and passing it to JavaScript

I have a good grasp on how to implement input in HTML to execute JavaScript functions that are defined in the same directory as the HTML file. For example: <input type="button" value="Submit" onclick="someFunc(500)" > When the button is clicked, th ...

javascripthtml

Performing multiple queries simultaneously in AngularJS

Looking to create a page using AngularJS that displays information from two tables. Table 1 : StateList StateCode StateName AZ ARIZONA CA CALIFORNIA ...

angularjs

Sliding in images with JQuery

I need help with animating the slide-in effect of 7 "card" images from the left to the center of the screen. I attempted to achieve this using the following code: function FetchCards() { $("#pack").css('margin-left', 0); $("#pack").css(& ...

javascriptjqueryhtmlcssimage

The Proper Usage of Commas in CSS

Check out this CSS code snippet. .form-field {min-height: 20px; margin-bottom: 10px; padding-top: 4px; width: 80px;} .form-field TEXTAREA, INPUT[type='text'] {position: absolute; left: 100px; top: 0px; height: 15px;} .form-field TEXTAREA {height ...

htmlcsscss-selectors