responsive grid is broken by span element with empty value - html

I get the JSON from the site. Some of the fields of this JSON is empty (""). I have a HTML(Jade) code like this:
div(ng-repeat="item in itemsToDisplay", class="item tableLine")
span(class="tableItemid")
a(href="#/itemDetail/{{ item.Itemid }}") {{ item.Itemid }}
span(class="tableItemdescription")
{{ item.Itemdescription }}
span(class="tableDate")
{{ item.CreationDate }}
span(class="tableCountry")
{{ item.Address }}
And css (slylus) like this:
span.tableItemid
col(1/15)
span.tableItemdescription
col(3/15)
span.tableDate
col(2/15)
If the fields is empty the span is empty. And I have offset in the responsive grid. What is the best way to avoid it?

Related

How to reduce whitespaces without removing them completely?

Often I have template bits looking like
<div class="mydiv
{{ with_icon ? 'with-icon' }}
{{ full_width ? 'full-width' }}
{{ is_granted('foo') ? 'bar' }}"
>
which generates unwanted spaces
<div class="mydiv
with-icon
full-width
bar"
>
and looks in devtools like:
As you imagine, I'd like it to be:
<div class="mydiv with-icon full-width bar">
Using spaceless and add a space to each string being not a clean solution, to me.
Is there any straightforward solution for this?

don't want whitespace to occur when text is too long and i got to enter

Is there any way when your text is too long - and you break it up with new lines - to not have whitespace happen? What I need is three values to be joint without whitespace in between.
<div style='font-size:100%; color:blue'>
{{ $record->m_pk_address_line1 }}
{{ $record->m_pk_address_line2 }}
{{ $record->m_pk_address_line3 }}
</div>
Without entering new line, it'll be too long even if they can be joined together.
<div style='font-size:100%; color:blue'>{{ $record->m_pk_address_line1 }}{{ $record->m_pk_address_line2 }}{{ $record->m_pk_address_line3 }}</div>
Is there no standard way of going about this without resorting to tricks? What do people do when their code is too long and they need to break it up into new lines but they don't want the whitespace that comes with it?
You could make an accessor in the model of $record
public function getFullAddressAttribute($value)
{
return $record->m_pk_address_line1 . $record->m_pk_address_line2 . $record->m_pk_address_line3;
}
and use that in your views like this
$record->full_address;
you have two tricks to avoid whitespace, the first is html comments:
<div style='font-size:100%; color:blue'>
{{ $record->m_pk_address_line1 }}<!--
-->{{ $record->m_pk_address_line2 }}<!--
-->{{ $record->m_pk_address_line3 }}
</div>
the second is font-size: 0
.container {
font-size: 0;
}
.container > * {
font-size: 1rem; /** or whatever suits your needs **/
}
For removing whitespaces use
$string= preg_replace('/\s+/', '', $string);
<div style='font-size:100%; color:blue'>
{{ preg_replace('/\s+/', '', $record->m_pk_address_line1 }}
{{ preg_replace('/\s+/', '', $record->m_pk_address_line1 }}
{{ preg_replace('/\s+/', '', $record->m_pk_address_line1 }}
</div>
Concatenate all three items:
<div style='font-size:100%; color:blue'>
{{ $record->m_pk_address_line1.$record->m_pk_address_line2.$record->m_pk_address_line3 }}
</div>

Syntax for Angular expression where JSON key has an embedded blank

I am working with a trading partner who sends me JSON with embedded spaces in the keys. For example
[{"BANK ID":89769876976,"Account Number":789698769876,"Account Type":"CHECKING","Balance":1187.65...
and I cannot find a way to access the keys using angular {{ }} expressions. Any clues?
You can just use the bracket notation (without the dot)
<div ng-repeat="acct in accounts">
Bank Id: {{ acct['BANK ID'] }},
Account Number: {{ acct['Account Number'] }},
Type: {{ acct['Account Type'] }},
Balance: {{ acct.Balance }}
</div>
Here is a Demo

Django - Shorten text content retrieved in html template

I would like to know how to shorten text content retrieved to get a preview instead of getting a block of text in the html template
From: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
To:
aaaaaaaaaaaaaaaaaaaaaaaaaaa....
The code that is used to retrieve the contents is :
<a class="list_content" href="/qna/view" onclick="document.forms['q_title_{{ q.id }}'].submit(); return false" title="{{ q.content }}">{{ q.content }} </a><br/>
Many thanks!
If you are using Django 1.4, truncatechars filter will be the best way to go:
{{ q.content|truncatechars:25 }}
Assuming that "q.content" is a string you could use the slice command:
{{ q.content|slice:":255" }}
truncatechars template filter for django 1.4

Create hyperlink in django template of object that has a space

I am trying to create a dynamic hyperlink that depends on a value passed from a function:
{% for item in field_list %}
<a href={% url index_view %}{{ item }}/> {{ item }} </a> <br>
{% endfor %}
The problem is that one of the items in field_list is "Hockey Player". The link for some reason is dropping everything after the space, so it creates the hyperlink on the entire "Hockey Player", but the address is
http://126.0.0.1:8000/Hockey
How can I get it to go to
http://126.0.0.1:8000/Hockey Player/
instead?
Use the urlencode filter.
{{ item|urlencode }}
But why are you taking the name? You should be passing the appropriate view and PK or slug to url which will create a suitable URL on its own.
Since spaces are illegal in URLs,
http://126.0.0.1:8000/Hockey Player/
is unacceptable. The urlencode filter will simply replace the space with %20, which is ugly/inelegant, even if it does kind of get the job done. A much better solution is to use a "slug" field on your model that represents a cleaned-up version of the title field (I'll assume it's called the title field). You want to end up with a clean URL like:
http://126.0.0.1:8000/hockey_player/
To make that happen, use something like this in your model:
class Player(models.Model):
title = models.CharField(max_length=60)
slug = models.SlugField()
...
If you want the slug field to be pre-populated in the admin, use something like this in your admin.py:
class PlayerAdmin(admin.ModelAdmin):
prepopulated_fields = {"slug": ("title",)}
....
admin.site.register(Player,PlayerAdmin)
Now when you enter a new Player in the admin, if you type "Hockey Player" for the Title, the Slug field will become "hockey_player" automatically.
In the template you would then use:
{% for item in field_list %}
<a href={% url index_view %}{{ item.slug }}/> {{ item }} </a> <br>
{% endfor %}
There is this builtin filter .
http://docs.djangoproject.com/en/dev/ref/templates/builtins/#urlencode
Although you should be using one of these
http://docs.djangoproject.com/en/dev/ref/models/fields/#slugfield