Can a list be organized into multiple columns, where you have the option to select a specific column to display a maximum number of items?

Is it too complex or time-consuming to implement? I could utilize the multi-column layout recently introduced in CSS3. What is your suggestion?

The goal for the template design is as follows:

Element1     Element5
Element2     Element6
Element3     Element7
Element4

as opposed to:

Element1
Element2
Element3
Element4
Element5
Element6
Element7

I typically use 

{% for a in b %}{{ a }}{% endfor %}
.

I am curious if there is a method to break the loop and resume from another section within the same template while continuing to load elements from where it left off.

htmlcssfor-loopdjango-templates

Answer №1

If you're inquiring about implementing the CSS3 solution, the most effective method is by utilizing the column-count property..

Live Example

<div class="container">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
    <div>F</div>
    <div>G</div>
</div>

CSS

div.container {
    border: 2px solid #00f;
    column-count:3;
    -moz-column-count:3;
    -webkit-column-count:3;
}

Please note: The column-count property may not be fully supported in all browsers yet. I recommend considering breaking the layout programmatically instead. For a detailed list of browser support, see this resource

Answer №2

In case you are unable to utilize CSS3 column-count, an alternative approach could be considered: (I have not personally worked with Django before)

<ul><div class="col">    
{% for a in b %}{{
  {% if forloop.counter == 4 %}
    <li>a</li>
    </div><div class="col">
  {% else %}
    <li>a</li>
  {% end if %}
{% endfor %}
</div></ul>

CSS: (http://jsfiddle.net/Mp5Rf/)

.col {
  display: inline-block;
  float: left;
  padding-left: 25px;
}

Instead of specifying the number 4 directly, perhaps utilizing {% widthratio b|length 2 1 %} could determine the halfway point (rounded up) dynamically?

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

Unable to Embed Tweets resulting in 403 Error (Forbidden)

While working on embedding some Tweets on my webpage, I encountered the following error message: GET https://cdn.api.twitter.com/1/friendships/exists.json?user_a=19463349&screen_name_b=mrland_news&callback=twttr.setFriendshipExists 403 (Forbidden) ...

javascripthtmlcsstwitterhttp-status-code-403

What could be the reason for the absence of search results in my searchbox?

Can anyone assist me in identifying the issue with my search box? I have created a JavaScript search box that validates input against a predefined keyword list. If a word matches, the "HARMI-SOIL 8.0/15 Result Box" should be displayed, otherwise it should ...

javascripthtmlcss

Tips for incorporating JavaScript into elements that have been modified using jQuery's .html() method

Consider this example: $('#key').on('click', function(){ $('.task').html("<button id='key'>Button</button>"+Date()); }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.j ...

javascriptjqueryhtmlajax

A div element with a z-index of 9 remaining below another element with a z-index of 1

Even with a higher z-index, my <h4> and <a> elements are not visible above the background. <section class="no-padding main-slider mobile-height wow fadeIn"> <div class="swiper-full-screen swiper-container height-100 width-100 whit ...

htmlcss

Create a div element that is positioned absolutely and is able to be scrolled

Struggling to create a chat HTML template that allows for a scrollable message area? Let me break down the structure: Chat header: Title or name at the top. Message input box: Write messages here. Visible chat area: Height of container minus (header h ...

javascripthtmlcss

Changes cannot be tracked within nested zip files

In my current task, I am attempting to simultaneously perform operations on two lists. Specifically, I have pairs of train/test sets along with their corresponding labels. When I attempt the following: x_train=[1,2,3,4] x_test=[1,4,3,2] y_train=[4,3,2,2] y ...

pythonlistfor-loopzipshuffle

Responsive image resizing with Bootstrap across various devices

In my search for answers, I have come across a few similar questions that don't quite address what I'm looking for. Currently in the process of creating a portfolio website utilizing bootstrap 3, I aim to display three images across on small/med ...

htmlcsstwitter-bootstrap

The floating label failed to appear when the input was focused

After searching online, I came across an example of how to create a floating label. I followed the instructions exactly as provided in the example, but when I tested it on my website, it did not work the way it was supposed to. The label would disappear wh ...

jqueryhtmlcssasp.net-mvc

establishing the dimensions of table data cells

I'm facing a challenge with setting the width and height for table data that changes dynamically based on different values. The dimensions of the table itself are not definite, so I need to find a solution. Here's the code snippet I'm curren ...

javascriptcsshtml

Discover the method to retrieve the month name from an HTML Date input value

Here we have a date input field <input id="customer-date" name="customer-date" type="date" required> Accompanied by this script const customerDate = document.getElementById('customer-date').value; const dateHandler = document.getElementB ...

javascripthtmldate

Differences in row padding when transitioning from Bootstrap 3 to Bootstrap 4

One thing I've noticed is that when utilizing Bootstrap 3, the use of div.row would automatically create a vertical spacing between rows which was quite appealing. However, upon transitioning to Bootstrap 4, this automatic spacing seemed to disappear. ...

htmlcssangularjstwitter-bootstrap

Assembly of Components

As someone new to angular, I am currently in the process of building an angular2 application. My goal is to dynamically create a series of DOM components using the data provided below: // Class construct with properties sorted alphabetically export class ...

htmlangulartypescript

Troubleshooting overflow problems when centering a UL menu with an unspecified width

Trying to create a demo where the scrollbars are removed when resizing smaller, but adding overflow: hidden causes issues with sub-menus. Demo Link HTML <nav> <ul> <li><a href="#">Menu Item</a></li> ...

htmlcssmenunavigation

Issue with Bootstrap CSS: some elements are not properly contained within the body tag

After integrating Bootstrap Sass into a Rails project, I embarked on revamping its homepage. However, I encountered an issue with the background style applied to the <body> element - it only affected the portion of the page visible upon initial loadi ...

htmlcsstwitter-bootstrapsass

Troubleshooting issues with sending email with attachments in PHP and HTML

I've been having trouble sending an email with an attachment file; it just doesn't seem to work and I can't seem to receive any files. Although my HTML syntax appears correct, as I haven't received any bounce-back emails, the issue per ...

phphtmlemail

How to Create Django Templates without Including head, body, and Doctype?

Is it considered the correct or recommended practice to omit the Doctype, head, and body tags? This is a question that arises when looking at examples like tutorial 3 in the Django documentation which can be found here, specifically in the polls/template ...

pythonhtmldjango

Having issues with the addClass() method in JavaScript not functioning properly on hover

Coding Challenge <ul class="navBarExtended"> <li><a href="#">Link</a></li> </ul> Styling Solution .onHover{ text-decoration: underline; } Interactive Scripting $("ul.navBarExtended li a").hover( function() ...

javascripthtmlcssjquery

Just getting started with jQuery and looking for assistance with adding elements during events

My current project involves creating a button that, when clicked, updates a 'feed' div. The goal is to generate three elements: a tweet(<div>), a message(<p>), and a username(<p>). These elements should be added to the tweet div ...

javascripthtmljquery

What is the best way to focus on the N elements contained within another element?

Here is an example html input: <div class="grid--item user-info user-hover"> <div class="user-gravatar48"> <a href="/users/22656/jon-skeet"> <div class="gravatar-wrapper-48"> ...

htmlcssbeautifulsoupcss-selectors

Deactivate zoom on the viewport and display the entire page

Hello, I am currently working on my website www.ecogo.io and I am trying to get the entire page to display instead of just a portion. However, I am encountering an issue where the page loads zoomed in on mobile browsers like Chrome for Android, whether Des ...

csshtmlviewport