I have a script written in Python which will pass a list to a HTML file. I have a problem in displaying the elements in the html page. As per the code written below, the elements are displayed vertically down as a list. I wanted the elements to be displayed in a single line horizontally.
<!doctype html>
<html lang="en">
<body>
<div id="content">
{% for item in VOD1 %}
<li>ID: {{ item[0] }}</li><li> Title: {{ item[1] }}</b></li>
<img src="{{ item[2] }}" alt="dummy.jpg"> </img>
{% endfor %}
{% for item in VOD2 %}
<li>ID: {{ item[0] }}</li><li> Title: {{ item[1] }}</li>
<img src="{{ item[2] }}" alt="dummy.jpg"> </img>
{% endfor %}
</div>
</body>
</html>
I tried by adding a '-' after the '%' in the for loop to trim the white spaces but don't work. If I remove the line break then assets are displayed in a line but it's in a auto fit manner.3 assets details are displayed in each line instead of the whole details in a single line. Can someone please shed some light into this?
If I get you correctly, you want the <li> elements to be displayed inline rather than as block elements:
li { display: inline-block }
<ul>
<li>ID: 1</li>
<li>Title: foo</li>
<li><img src="//lorempixel.com/400/200"</li>
</ul>
Edit: as I think of it, you could also want each ID/Title as a header to the image, and every of those components horizontally aside each other. Like so:
div, li { display: inline-block }
img { display: block }
<div>
<ul>
<li>ID: 1</li>
<li>Title: foo</li>
</ul>
<img src="//lorempixel.com/400/200">
</div>
<div>
<ul>
<li>ID: 2</li>
<li>Title: bar</li>
</ul>
<img src="//lorempixel.com/400/300">
</div>
Related
Attached is the wagtail template I have written so far.
{% load wagtailimages_tags %}
<section class="container">
<h2 class="text-center">{{ self.title }}</h2>
<div class="general-alumnae-deck">
{% for member in self.general_member_cards %}
{% if member.photo %}
{% endif %}
{% endfor %}
</div>
</section>
Ultimately I want the code to look like:
<h2>Avatar Images</h2>
<ul>
<li><img src="img_avatar.png" alt="Avatar" class="avatar"> <h3> Bleu </h3></li>
<li><img src="img_avatar2.png" alt="Avatar" class="avatar"> <h3> Red </h3></li>
</ul>
</body>
</html>
with the image popping up next to the "h3" tag if there exists a photo of course the image will be {{}} double bracketed for dynamic template.
It's not clear whether the image is from Wagtail's image library, but if it is, you should use the {% image %} tag. See https://docs.wagtail.org/en/stable/topics/images.html#
{% with self.general_member_cards as cards %}
{% if cards %}
<ul>
{% for member in cards %}
<li>
{% if member.photo %}
{% image member.photo fill-80x80 %}
{% endif %}
<h3>{{ member.name }}</h3>
</li>
{% endfor %}
<ul>
{% endif %}
I have also used a {% with %} tag to cache self.general_member_cards in the template, in case this requires a database query. If it does not, you can skip that step.
You more or less have it already ...
<section class="container">
<h2 class="text-center">{{ self.title }}</h2>
<div class="general-alumnae-deck">
<ul>
{% for member in self.general_member_cards %}
<li>
{% if member.photo %}
{% image member.photo fill-50x50 as avatar %}
<img src="{{ avatar.url }} class='avatar">
{% endif %}
<h3 style="display:inline;">{{ member.name }}</h3>
</li>
{% endfor %}
</ul>
</div>
</section>
You said you wanted image next to the <h3>, so you need to override the display:block property of the h3 tag and make it inline as above (or create a css class for this).
EDIT: Updated to use wagtail's image template tag to get the rendition of the member photo
When I display my posts using loops. My first post in my loop did gets indented unexpectedly. Below I will provide code and image of the indent.
code:
{% extends 'base.html' %}
{% block content %}
<br/>
<div class="container">
<h1>Posts</h1>
<ul>
<br/>
{% for post in object_list %}
{% if forloop.counter <= 15 %}
<li> {{post.title}}
- {{ post.author.first_name }} {{ post.author.last_name }} <br/> {{post.body}}</li>
<br/>
<style>
a {
text-transform: capitalize;
}
</style>
</ul>
{% endif %}
{% endfor %}
Back
{% endblock %}
I've notice there your <ul> tag is put outside of the loop. But your </ul> is put inside of the loop.
You should move your </ul> outside of the loop
Example
I seem to be having trouble to extend my background color for my 2 column layout. The user can add categories so the background color has to be able to adjust with the amount of categories the user wants to add in.
html file:
{% for category in categories %}
<div class="row__2 sub-pages--background">
<div class="sub-pages--categories-background">
<div class="sub-pages--categories">
<a href="{% url 'blogging_logs:topics' category.id %}" class="sub-pages--categories-position ">{{ category }}
<img class="sub-pages--img" src="{{ category.category_image.url }}">
</a>
</div>
</div>
</div>
{% empty %}
<p>No categories entered yet.</p>
{% endfor %}
css file:
&--background {
background-color: $mainBackground;
padding-bottom: 2rem;
}
I feel like it has to do with the way I'm formatting my divs
Since you mentioned in comments that you are using floats, simply add a parent element that will have the background and then add something known as clearfix, at the end of it.
HTML:
<div class="parent--background">
{% for category in categories %}
<div class="row__2 sub-pages--background">
<div class="sub-pages--categories-background">
<div class="sub-pages--categories">
<a href="{% url 'blogging_logs:topics' category.id %}" class="sub-pages--categories-position ">{{ category }}
<img class="sub-pages--img" src="{{ category.category_image.url }}">
</a>
</div>
</div>
</div>
{% empty %}
<p>No categories entered yet.</p>
{% endfor %}
<div class="clearfix"></div>
</div>
CSS:
.clearfix::after {
content: "";
clear: both;
display: table;
}
I need to have small font-size for an unorder list that is inside jumbotron div class. I tried to style it with Css, but none works.
This is the code that need to be smaller:
HTML:
<div class="jumbotron">
<h3>Informazioni di debug del servizio deployato:</h3>
<hr>
<h4><ul style="list-style-type:disc">
<li>ID: {{ processDefinition.id }}</li>
<li> Name: {{ processDefinition.name }}</li>
<li>Deployment ID: {{ processDefinition.deploymentId }}</li>
<li>Category: {{ processDefinition.category }} </li>
<li>URL: {{ processDefinition.url }}</li>
</ul></h4>
<hr>
</div>
EDIT: Yes i know is an error i forget to delete it and is here only because i do many edit and try before post here :)
PS: But why -2 votes?
I think the problem may be that the entire list <ul> is in the header <h4>. Try adding it separately, because the default list is assigned according to the size of the text header <h4>, and add the css properties for ul element:
ul li {
font-size: 12px;
}
Your mistakes:
You cannot have <ul> inside a <hX> tag.
For the list-style-type: disc to be visible, you need to add margin-left to the <li> or padding-left to the <ul>.
For getting a smaller size, use font-size: 0.75em or something similar:
Corrected Code:
<div class="jumbotron">
<h3>Informazioni di debug del servizio deployato:</h3>
<hr>
<ul style="list-style-type: disc; padding-left: 20px; font-size: 0.75em;">
<li>ID: {{ processDefinition.id }}</li>
<li> Name: {{ processDefinition.name }}</li>
<li>Deployment ID: {{ processDefinition.deploymentId }}</li>
<li>Category: {{ processDefinition.category }} </li>
<li>URL: {{ processDefinition.url }}</li>
</ul>
<hr>
</div>
I think you can do on this way:
.jumbotron h3 hr h4 ul li a{
font-size: 0.1rem
}
Or adding a class on the jumbotron to change onlye the font-size:
<div class="jumbotron small-text">
<h3>Informazioni di debug del servizio deployato:</h3>
<hr>
<h4><ul style="list-style-type:disc">
<li>ID: {{ processDefinition.id }}</li>
<li> Name: {{ processDefinition.name }}</li>
<li>Deployment ID: {{ processDefinition.deploymentId }}</li>
<li>Category: {{ processDefinition.category }} </li>
<li>URL: {{ processDefinition.url }}</li>
</ul></h4>
<hr>
.small-text h3 hr h4 ul li a{
font-size: 0.1rem
}
or
.small-text{
font-size: 0.1rem !important;
}
I'm using the HTML nav tag for showing the breadcrumbs in my website (built on Django/Bootstrap).
I'm trying to show a dropdown menu for Shop by Departments and then the breadcrumbs. But someone, the order is mixed up. The Shop by Departments is showing up in the end instead of being the first thing.
My code is:
<div class="animate-dropdown">
<!-- ========================================= BREADCRUMB ========================================= --><div id="top-mega-nav">
<div class="container">
<nav>
{% include "partials/nav_primary.html" with expand_dropdown=0 %}
<li class="breadcrumb-nav-holder">
<ul>
{% with category=product.categories.all.0 %}
{% for c in category.get_ancestors_and_self %}
<li class="breadcrumb-item">
{{ c.name }}
</li><!-- /.breadcrumb-item -->
{% endfor %}
<li class="active">{{ product.title }}</li>
{% get_back_button as backbutton %}
{% if backbutton %}
<li class="pull-right">
<a href="{{ backbutton.url }}">
<i class="icon-arrow-left"></i> {{ backbutton.title }}
</a>
</li>
{% endif %}
{% endwith %}
</ul>
</li><!-- /.breadcrumb-nav-holder -->
</nav>
</div>
</div><!-- /.container -->
I inspected the webpage using the inspector and the order of code is as expected. But the rendering is not. Whats wrong here?
Edit: The output in the inspector looks like
Your rendered HTML is invalid. That is what likely causes the problems.
A li element must have a parent ul (or ol) element.
So if you add an ul around your li class="breacrumb-nav-holder" it should work fine.