Problems with CSS: Struggles with Overflow-x and display:flex

I have already completed 2 questions regarding the current issue I am facing. However, I have now created a more improved example. Please take a look below. The boxes are being loaded using Angular ng-bind.

Check out the code pen here: http://codepen.io/anon/pen/LRPwZP

Additionally, I have also included the same snippet on Stack Overflow, but please note that resizing the resolution is not possible, so the example may not be as useful.

Please pay attention to the desired behavior:

  1. Each box has the same width (700px in actual case)
  2. Box #1 should be positioned at the top left corner
  3. Box #2 should be placed to the right of Box #1 only if there is enough space
  4. If there is still space on the screen, Box#3 goes to the right of Box#2
  5. If there is no longer space available to the right, Box #4 falls below Box #1
  6. Box #5 is positioned directly below Box #2
  7. Box #6 goes directly below Box #3
  8. and so on...
  9. The boxes are dynamically loaded using Angular ng-bind

I cannot utilize the following options:

(1)

:nth-child(odd) { float: left; }
:nth-child(even) { float: right; }

Reason: It becomes ineffective when more than 2 columns are needed

(2)I know about AngularJS Masonry, however, I prefer not to increase loading time and aim to achieve this using CSS only.

For your information:

  • No CSS frameworks are being used
  • "Vanilla" JS is occasionally implemented
  • AngularJS is heavily utilized

Previous questions on the same issue:

  • CSS multiple different height float left elements arranged in 2 columns

  • Flex, AngularJS + Masonry, akoenig/angular-deckgrid and more

Best regards, Chris,

javascripthtmlcssangularjsflexbox

Answer №1

Have you considered utilizing flexbox?

ul{
  background-color: #ffeb00;
  list-style: none;
  padding: 20px;
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: space-around;
}
li{
  padding: 35px;
  margin: 5px;
  background-color: #8056ff;
  color: white;
  text-align: center;
  flex-basis: 40px;
}
<ul>
  <li>Box 1</li>
  <li>Box 2</li>
  <li>Box 3</li>
  <li>Box 4</li>
  <li>Box 5</li>
  <li>Box 6</li>
</ul>

Answer №2

After conducting extensive testing with Masonry, Isotope, and various Angular and JQuery modules, all of which required numerous workarounds to function properly, I finally discovered the solution: AngularMaterial. Utilizing different ng-directives and user-created modules in an effort to replicate masonry in angular proved fruitless until I stumbled upon AngularMaterial. https://material.angularjs.org/latest/layout/options While the answer may seem obvious, sometimes it takes time to find exactly what you're searching for.

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

Exploring Fetch API with Promise.all

I have successfully implemented a functionality that fetches data from two URLs and performs an action only when both requests are successful. However, I am curious if there is a more efficient and succinct way to achieve the same result. Helper functions ...

javascriptajaxecmascript-6es6-promisefetch-api

The OnsenUi getCurrentPage() function returns an empty object

As I work on creating a hybrid mobile app using Onsen UI, I've encountered an issue regarding navigation and data transfer between two pages. My starting point is index.html, which consists of a main.html ons-template along with ons-navigation and ons ...

javascriptjqueryangularjscordovaonsen-ui

Tips for resolving encoding problems without the need to rewrite the content

Issue at Hand: When I copy a gridview from one .aspx page to another, I encounter a problem with Arabic words like: رقم اذن الإضافة They appear as: &#1585;&#1602;&#1605; &#1575;&#1584;&#1606; &#1575;&#1604;& ...

asp.nethtmlencodingmetadataarabic

Tips for sending data to Jade templates:1. Use the `locals`

Review the code below user.js exports.index = function (req, res){ res.render('user', { id: req.params.id }); }; user.jade body - var x = #{id} div.container div.headpic if (x < 10) ...

javascriptnode.jsexpresspug

Dependency injection of an Angular app factory toaster is causing the application to malfunction

I am currently working on an Angular application that utilizes Firebase as its backend. My goal is to inject 'toaster' as a dependency within my authorization app factory. Below is the initial setup of the app.factory: app.factory('principa ...

javascriptangularjsfirebase

Is there a way to automatically wrap every `ul` element in a `div` using JQuery?

Is there a way to automatically wrap all ul elements in div using JQuery? <div id="my_uls"> <ul> <li>Item one</li> <li>Item two <ul> <li>Item one of two</li> </ul> &l ...

javascriptjqueryhtml

Having difficulty transferring serialized arrays from HTML to lower PHP files

I am attempting to transfer an array of checkbox inputs from an HTML page to an initial PHP file which creates a new layout for a page and then calls another PHP file to populate it. However, I am encountering issues with the serialization and unserializat ...

phphtmlarraysparameter-passing

Making a form select element responsive within a bootstrap 4 card component

Check out the code snippet I have here: This is how I envisioned it to look, and it works perfectly at large resolutions. However, when I scale it down to tablet size, the resizing of the select element doesn't seem to work properly. Here's a s ...

htmltwitter-bootstrapbootstrap-4

Unable to generate a vertical navigation bar

When attempting to create a vertical menu, the final result doesn't align as expected. https://i.stack.imgur.com/2ok47.jpg This is the current code being used: $("#example-one").append("<li id='magic-line'></li>") ...

javascripthtmlcss

What is the best way to populate missing days in an array up to the current date that do not already contain the "Present" element?

Consider the array below which contains attendance data for an employee (Retrieved from Mongo using Ajax): [{"_id":"5fcdcd49c3657d1e05b846f5","title":"Present","allDay":true,"start":"2020-11- ...

javascripthtmlarraysajaxmomentjs

The component is not responding to list scrolling

Issue with Scroll Functionality in Generic List Component On the main page: <ion-header> <app-generic-menu [leftMenu]="'left-menu'" [rightMenu]="'client-menu'" [isSelectionMode]="isSelectio ...

htmlangulartypescriptionic-frameworkionic4

The transitions in Vue do not seem to be functioning properly when used with router-link and $router

I have the following structure in my App.vue file: <script setup> import { RouterView } from "vue-router"; </script> <template> <RouterView v-slot="{ Component }"> <transition :name="fade" mod ...

javascriptvue.jsvue-transitions

Having trouble with utilizing pako.js in your JavaScript code? The error "Pako is not defined

I'm relatively new to the world of JavaScript. Currently, I'm tackling an algorithm that involves deflating in Java and inflating in JavaScript. While researching solutions, I came across pako.js as a recommended tool for decompression. However, ...

javascripthtmlzlibcompression

CSS selector that targets an element exclusively when it contains solely another element, devoid of any additional text

Is there a CSS selector that can target an element, like <p>, with only a specified child element, such as <a>, within it and nothing else? For instance: <p><a>Some text</a></p>. I want to avoid selecting elements like & ...

htmlcssbeautifulsoup

Ways to incorporate the point count divided by a specified value onto a map

I am working with Mapbox GL JS and I have a specific requirement to display the number of markers in a cluster divided by 10 on the map. To achieve this, I am utilizing the point_count and point_count_abbreviated attributes in the code snippet below: map ...

javascriptmapbox-gl-js

Converting an array of date strings to a single string in JavaScript

Here is the JSON format I received with dynamic data: {"range":["2018-07-23T16:03:26.861Z","2018-07-23T16:03:26.861Z"]} Now, I need to convert this into the following format: range(20180723,20180723) Below is my code snippet : var data:Date[] = {"rang ...

javascriptangulartypescript

Is the MDL drawer not reaching the full height of the page?

I am currently utilizing Material Design Lite to incorporate a fixed header and drawer into my Ruby on Rails application. In the following video, you can observe that when I switch to another page, the drawer menu on the left side of the page fails to fill ...

htmlcssruby-on-railsmaterial-design

How do you center controls within a repeater control's item template?

I have a repeating control on my page that displays an image and a hyperlink one below the other. When I add more than one line of text, it causes the image to move up. I want the top of the images to be aligned horizontally and the text to flow downward i ...

c#asp.netcss

Implementing relationships in microservices with Prisma and NestJS

Schema for User Management service: model User { id String @id @default(uuid()) username String @unique email String @unique password String } Schema for File Management service: model File ...

javascriptsqlpostgresqlnestjsprisma

The getMonthlyBalances function is providing inaccurate results when calculating stock balances

One of my functions is called getMonthlyBalances, which takes in two arrays - stocks and trades. It calculates the monthly balance of a user's stock holdings based on their trade history. The stocks array includes objects with stock ID, prices, and da ...

javascriptreactjstypescriptmathstock