I'm using Jinga templating language and bootstrap 4 with my Django application. I'm looking to display the following list of application in multiple columns instead of one. How could I split this list into 4 columns?
<div class = "container">
<h2>Available Application List</h2>
<ul>
{% for app in applicationlist %}
<li><input type="checkbox" name="..." > {{ app.report_name }}</li>
{% endfor %}
</ul>
If you're using Bootstrap, check out the equal distribution columns that are available via the col class: https://v4-alpha.getbootstrap.com/layout/grid/#equal-width
Hope that helps!
You should use CSS for this. Try a multi-column layout:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts
Other solutions would include using display: flex on the parent <ul>, setting percentage widths on each <li> along with float: left, or using display: inline-block on each <li>.
Related
I have a shopify store, in the first line of my title of the product, I have an internal link to the vendor page, in the second line there is the product title.
I read it's valid to put two lines with <br/> in an <h1> heading (in order not to use two h1 headings), but I want to combine it with an <a> link (1st line) and a <span> (2nd line) for different styling.
Is it valid what I'm doing, also in terms of SEO? Thank you for helping!!
<h1><a class="product-vendor-hyperlink" href="/collections/{{product.vendor | handleize}}">{{ product.vendor }}</a><br/><span class="product-single__title" itemprop="name">{{ product.title }}</span></h1>
It is valid, but not needed. Instead you can get rid of the br entirely. Set one or both of your child nodes to display:block
.product-vendor-hyperlink{display:block;}
<h1><a class="product-vendor-hyperlink" href="/collections/{{product.vendor | handleize}}">{{ product.vendor }}</a><span class="product-single__title" itemprop="name">{{ product.title }}</span></h1>
Another option is to consider the use of the <header> tag if you want to give full h1 weight to the product title but still keep the vendor link associated with being in the header. You can use this at the page level or use sections , div etc, but NOT li.
<header>
<a class="product-vendor-hyperlink" href="/collections/{{product.vendor | handleize}}">{{ product.vendor }}</a>
<h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>
</header>
Its valid, but its really bad in terms of SEO, use the heading hierarchy and semantic HTML5 tags instead, check the two resources below:
Semantic tags
Heading Hierarchy
I want to make the following happen in:
There is a for loop generating images of a list. I still want to be capable of styling indiviual images with CSS, so I need to generate a unique Class for each element of the list.
Is there a way to generate a string like ("a") plus the generated number so that the result is a1, a2, a3, a4...(a.id)?
Lets say the list is 4 elements long.
<li *ngFor="let chair of chairs">
class="a + {{ chair.id }}"
</li>
You could ignore the plus + sign and append the value directly.
<li *ngFor="let chair of chairs" class="a{{ chair.id }}">
...
</li>
If for instance the chair.id values are 1, 2, 3,... then the rendered list would look like
<li class="a1">...</li>
<li class="a2">...</li>
<li class="a3">...</li>
...
You can use ngClass
Although, in general, I don't recommend doing it like that.
You can use CSS nth-child for use case like that.
If you prefer doing it with ngClass the syntax is that
<li *ngFor="let chair of chairs" ngClass="a{{ chair.id }}">
...
</li>
Trying to make sure that the columns are all floated to the left while not having huge gaps between the rows.
Here's the HTML:
<div class="row hide-for-small">
<div ng-repeat="module in modules">
<div class="medium-6 large-4 columns">
<div class="modBoxContainer">
<div class="modBox">
<div class="modHeading">
<h1><span class="modNumber">{{ module.part }}</span> {{ module.title }}</h1>
</div>
<ul>
<li ng-repeat="section in module.sections">
<a ng-href="#/education/{{ module.url }}/{{section.number}}/01"><strong>Part {{ section.number | number:0 }}: </strong>{{ section.title }}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
And as for css it's your average columnar layout through foundation or the like. Columns are fine until they're all different height just as in the picture. I have tried applying n-th child to .modBox and .modBoxContainer but a lot of times it won't even recognize the n-th child rule if used with :nth-child(n+smth)...
How could I assign 1 height to the first three columns and different height to the rest of them? I've tried applying height: auto, height: 100%, combined with min-height or just height rules specified.
Sorry, can't recreate much of the code in JSFiddle or such as it's a huge project I'm working on, but suggestions would be nice. But some suggestions would be great to try as I'm running dry on ideas.
Here's the screenshot of the problem:
NOTE: This solution only works for modern browsers (IE9 and up)
For selecting the first three elements, you can do
nth-of-type(-n+3)
Source
http://www.w3schools.com/cssref/sel_nth-of-type.asp
Using a formula (an + b). Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value.
How one can build a site structure like Pinterest?
I mean each post has it's own height (with is determined by backend programming).
I'm trying to do it, but what I have now is this:
<ul class="thumbnails">
{% for key, values in prodmatrix %}
<li class="span3">
<div class="product-box">
<span class="sale_tag"></span>
<p><img src="{{ STATIC_URL }}{{values.1.0}}" alt="" /></p>
<h4>{{ values.0.0 }}</h4><br/>
<p class="category">{{values.2.0}} {{values.2.1}} {{values.2.2}}</p>
</div>
</li>
{% endfor %}
</ul>
Which don't work really well, as you can see here
Some similar questions might help you:
CSS3 Multiple Columns
Pinterest style layout (Bootstrap 3 + Masonary) final tweeks
How to display a grid with text like Pinterest?
CSS code for pinterest layout style
I'm creating templates for a Django project, and I need to create a three column table in HTML, using just CSS, rather than a <table> element.
The reason, apart from any ideological opposition to tables, is that the report needs to be viewed on both desktops as well as handheld devices such as BlackBerry. On handhelds, rather than trying to force three columns on a minuscule screen, the objective is to break up the table into a series of consecutive paragraphs.
Previously, I'd hacked a quick/dirty template out using the Less framework (http://lessframework.com/).
{% for category in article_list_categorised %}
<h2 class="first">{{ category.grouper }}</h2>
{% for item in category.list %}
<h3 class="two first">{{ item.firms.all|join:", " }}</h3>
<h4 class="two">{{ item.subject }}</h4>
<p class="seven">
{{ item.abstract }}
</p>
<h4 class="one">{{ item.source_publication }}</h4>
<h4 class="one">{{ item.publication_date }}</h4>
<h4 class="one">Page: {{ item.page_number }}</h4>
{% endfor %}
{% endfor %}
<footer>
<p class="four off-four">
{% now "l, jS F Y" %}
</p>
</footer>
On screen, this gives a three column table, containing a list of articles. For each article (row), we have:
First column contains the firm name
Second column contains the subject and article abstract
Third column contains the source publication, the publication date and the page number.
And when displayed on the BlackbBerry browser, it breaks up the columns in consecutive paragraphs, on top of each other.
Now, I want to move away from using Less to doing the markup/CSS from scratch.
I found another StackOverflow question asking something similar:
How to create three columns in css
and the advice from there is basically to use <ul> and <li>. I've hacked out something like this, two rows, three columns:
<ul>
<li> <!-- First row -->
<ul>
<li>Deutsche Bank, Goldman Sachs JBWere</li>
<li>Costs</li>
<li>
<p>AAP</p>
<p>June 28, 2010</p>
<p>Page: 3</p>
</li>
</ul>
</li> <!-- End of first row -->
<li> <!-- Second row -->
<ul>
<li>Deutsche Bank</li>
<li>Plans</li>
<li>
<p>Bloomberg</p>
<p>June 29, 2010</p>
<p>Page: 1</p>
</li>
</ul>
</li> <!-- End of Second row -->
</ul>
My question is, is this optimal, or is there perhaps a more streamlined hierarchy I could go for, or any tags I can strip out of the above?
Also, the article referenced in the above question talks about three columns, with one row. I need three columns, with a new row for each article.
What's a good way of CSS styling the above, to give three columns, with each set on a new row, and still have it display as consecutive paragraphs on handhelds?
Using an unordered list is not a BAD method, and the benefit of this is that devices or browsers with CSS disabled (yep, you'll be surprised) will degrade gracefully into a legible list. If you wanted the above to display in a 3 column layout with each row on a new "line" I would try something like this for your css:
First give your ul an ID attribute, so in our case we'll call it <ul id="fakeTable">, and then we can style our li elements to act as table cells:
#fakeTable, #faketable li{
list-style-type:none; //no bullets etc
margin:0;
padding:0;
}
#fakeTable{
width:800px; //you could set it to any width really, just an example
}
#fakeTable li{
display:block;
float:left;
clear:none;
width:200px;
padding:0 11px 0 11px;
}
Now assuming your <ul> is 800px wide, the <li> elements will wrap to the next line from 4 to 6, 7 to 9 etc as there is no more space to float a 4th one on each row.
If you do not have a set width, convert the widths to %, you could have the <li> width set to 33% - with no <li> padding of course - which will give you a width of 99% across 3 <li> elements, so no space for a 4th, and it will wrap to the next line!
I'd go for 3 divs, each containing one column, give them a min-width and a max-width, and display: inline-block. If the screen is large enough to accommodate them next to each other, they'll be laid out as 3 columns, otherwise, they'll stack. You'll need some extra hacks for IE 6 (maybe 7 too) because it doesn't support inline-block.
Create multi-column layout with div is very simple but you should pay attention to the followings:
Sum of width of element column (including margin and padding) must < 100% (or width of the main column in pixel).
Using float:left (or right) to ensure the column appear side-by-side
Using a clear element to ensure the margin attribute of below elements
Example:
<div id="main">
<div class="col 1st-col">
</div>
<div class="col 2nd-col">
</div>
...
<div class="clr"></div>
</div>
.col {float: left;}
.1st-col {width: 30%; margin-left: 1%}
....
.clr {background: url('empty.gif');} /* empty.gif is a gif image (1px x 1px transparent) */
This surely works on every browser. Div .clr to fix the height of div.main in FF, Chrome, IE6. The attribute display: inline-block doesn't work in IE.