I would like to truncate a long string, who content html tag.
From my controller php.
content="<div>
<h1>my title</h1>
<p>para 1 ...</p>
</div>";
I would like to truncate this, so i did this in twig :
{{ content|raw|truncate(15) }}
But the html are broken, see bellow :
<div>
<h1>my ti...
I want to keep the end of tag, like this :
<div>
<h1>my titl...</h1>
</div>
Anyone have an idea ?
You can use the Twig Truncation Extension. As you can read in the doc:
{% set html %}
<h1>Test heading!</h1>
<ul>
<li>Hello world</li>
<li>Foo bar</li>
<li>Lorem Ipsum</li>
</ul>
{% endset html %}
{{ html|truncate_letters(20) }}
will output:
<h1>Test heading!</h1>
<ul>
<li>Hello wo</li>
</ul>
Hope this help
You can solve this with the text-truncate class of bootstrap.
<h1 class="text-truncate">my title</h1>
If you don't want to use bootstrap, you can do it directly in css with the property text-overflow:ellipsis as it is the case in bootstrap.
Here is an example in css.
I hope it will help you.
Related
I am very new to web development and Django. I am following a tutorial called "Try Django 1.8".
In this code I am supposed to change the background-color of jumbotron to #155A1E.
If I press shift + refresh in google chrome, the color shows up then it changes back to gray. When I inspect the code in google chrome, I can see in the styles tab that the background-color in the .jumbotron{} has a strike-through. Also there is another verion of .jumbotron{} in the styles tab that has a background-color and has a check. If I uncheck the box, the color gets fixed.
How can I fix this in Django?
{% extends "base.html" %}
{% load crispy_forms_tags %}
{% block head_title %}Welcome | {{ block.super}}{% endblock %}
<style>
{% block style %}
.jumbotron {
background-color: #155A1E;
}
{% endblock %}
</style>
{% block jumbotron %}
<div class="jumbotron">
<div class='container'>
<div class="row">
<div class='col-sm-6'>
<h1>Try Django 1.8</h1>
<p>Some text here!!! This text should be long so that we can test the columns in the webpage. So here we go. We are trying to make this line as long as possible.</p>
<p>
<a class="btn btn-lg btn-primary" href="" role="button">Join us »</a>
</p>
</div>
<div class='col-sm-6' style="background-color:black;height:300px">
</div>
</div>
</div>
</div>
{% endblock %}
{% block content %}
<div class="row">
<div class="row">
</div>
<div class="col-xs-3 pull-right">
<p class='lead text-align-center'>{{ title}}</p>
<!--{{ user }}-->
<!--<!–{{ request.user }}–>-->
<!--abc is = {{ abc }}-->
<form method='POST' action=''>{% csrf_token %}
{{ form|crispy }}
<input class='btn btn-primary' type="submit" value="Signup" />
</form>
</div>
<div class='col-sm-3'>
<p class='lead text-align-center'>Built with Django & Bootstrap</p>
</div>
<div class='col-sm-3'>
<p class='lead text-align-center'>created for starters of all kinds.</p>
</div>
<div class='col-sm-3'>
<p class='lead text-align-center'>Always open source.</p>
</div>
</div>
{% endblock %}
You can add do important to your css attribute.
Just like that:
.jumbotron {
background-color: #155A1E!important;
}
It will be taken instead of the default one
It may be very late to answer the question but could help someone who is doing the tutorial now as myself.
Problem is your style should come under the
{% block jumbotron %}
otherwise its never been executed.
Here it is
{% block jumbotron %}
<style>
{% block style %}
.jumbotron {
background-color : #1e78d2 !important;
}
{% endblock %}
</style>
<div class="jumbotron">
<div class="container">....... {% endblock %}
Hope it helps someone
Makesure source of bootstrap is before your style source, and example:
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet" media="all">
<link href="{% static 'css/your_style.css' %}" rel="stylesheet" media="all">
I am using twitter bootstrap for my website mywebsite.
I created four category blocks using col-md-3. When a block is heigher than the other, the other blocks don't dispay correctly. Here is my code:
<div class="row">
{% for category in categoriesActivities %}
<div class="col-md-3 col-sm-6">
<ul class="classifieds-category">
<li><i class="fa fa-bullhorn"></i>{{ category.name }}
<ul class="sub-category">
{% for activity in category.activities %}
<li>
{{ activity.principal }}
</li>
{% endfor %}
</ul>
</li>
</ul>
</div><!-- End grid layout -->
{% endfor %}
</div> <!-- End .row -->
Image of the blocks:
How can i fix it?
you need to add
<div class="clearfix"></div>
After the Informatiqe div.
That clears the col-- float.
Is passing liquid variables as inline styles commonly frowned upon? Here is an example of my markup:
<div class="span-8-12">
<h6> {{page.role}}</h6>
<h1 style="color:{{ page.accentColor }};"> {{page.title}} </h1>
</div>
<article class="intro">
<p style="color:{{ page.txtColor }};"> {{ page.summary }} </p>
</article>
I am setting h1 and p colors using the liquid variables in my posts. I know I could pass the variable directly to a CSS file, but then'd i'd have to write even more markup and CSS. Is this method valid or is there a better method on systematically changing values of color based off page variables?
Better would be to set a class, rather than directly setting the styles inline.
<div class=" {{ page.typeOfClass }}">
<div class="span-8-12">
<h6> {{page.role}}</h6>
<h1 > {{page.title}} </h1>
</div>
<article class="intro">
<p > {{ page.summary }} </p>
</article>
</div>
Then in your whatever.css set the styles for the different classes you want:
.someClass h1{
color:blue;
}
.someClass .intro p{
color:red;
}
for example.
I have a css class to which the layout in html5 and css3 you have enclosed a :hover background-color, this color is stored in the database and pick it up at the controller, now do not know how to make this :hover background-color on-screen display. What I thought is to include html code in the middle of a label with that style and tell the class that suffers the html tag :hover to increase one, in this way would go picking the value increases
This is kind of my idea in code:
<ul class="sub">
{% for key, c in categorias %}
<li class="hover">
<a href="elemento.html">{{ c.nombre }}
<div class="icon" style="background-color: #{{c.color}}">
<img src="{{ asset('images/iconoportada/' ~ c.iconoNombre)}}" alt="elemento" />
</div>
</a>
</li>
{% endfor %}
each list item has a :hover background different, like the current background catch it from the database, the problem is that I could not capture the: hover css here so I thought Twig
I would use something like this:
{% for key, c in categorias %}
<li class="hover">
<a href="elemento.html">{{ c.nombre }}
<div class="icon" rel="#{{c.color}}">
<img src="{{ asset('images/iconoportada/' ~ c.iconoNombre)}}" alt="elemento" />
</div>
</a>
</li>
{% endfor %}
and Jquery
<script>
$(document).ready(function(){
var oldbg = "";
$(".icon").hover(function(){
oldbg = $(this).css("background-colod");
$(this).css("background-colod", $(this).attr("rel"));
}, function(){ $(this).css("background-colod", oldbg); } );
}
</script>
not tested... just from the top of my head.
How can we hide all list element from first form in following html structure using mootools
<form method="post" action="/signup" class="global_form" enctype="application/x-www-form-urlencoded">
<div>
<div>
<ul class="form-errors">
<li>First Name
<ul class="errors">
<li>Please provide a valid answer for this field.</li>
</ul>
</li>
<li>Last name
<ul class="errors">
<li>Please provide a valid answer for this field.</li>
</ul>
</li>
</ul>
</div>
</div>
</form>
<form method="post" id="user_form_login" action="/login" class="global_form" enctype="application/x-www-form-urlencoded">
<div>
<div>
<ul class="form-errors">
<li>Uername
<ul class="errors">
<li>Please provide a valid answer for this field.</li>
</ul>
</li>
<li>Password
<ul class="errors">
<li>Please provide a valid answer for this field.</li>
</ul>
</li>
</ul>
</div>
</div>
</form>
This is completely untested and I switched to jQuery a while ago so there might be a cleaner way to do this, but this should give you a basic idea.
If you are trying to select multiple elements use the mootools dollars method.
If you were to append an id to the first form you could do something like this...
$$('#form1 li').setStyle('display', 'none');
OR
If you do not want to add an id tag this might work.
var firstForm = $$("form").getFirst(),
listElements = firstForm.getChildren('li');
listelements.setStyle('display', 'none');