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?
Related
I made a form with the FormBuilder of Symfony.
When I put my form in twig, the form_start(form) and form_end(form), it add a tag for each input.
I don't understand why twig adds a tag.
What is the solution to remove this tag
Thanks for your answer :)
Also, my formbuilder is like that :
->add('title', TextType::class, array(
'label'=>false,
'attr'=>array('autofocus'=>true)
))
my twig is like that :
{{ form_start(form) }}
<div class="row">
<div class="col-sm-9 p-1">
{{ form_row(form_record.title, {'attr':{'class':"form-control", 'placeholder':"Description"|trans, 'title':"Description"|trans }}) }}
{{ form_errors(form_record.title) }}
</div>
<div class="col-sm-1 pt-2">
<button type="submit" class="btn btn-success btn-circle btn-sm">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
{{ form_end(form) }}
and the result in the html source code is :
<div class="row">
<div class="col-sm-9 p-1">
<div>
<input type="text" id="app__title" name="app_[title]" required="required" class="form-control" placeholder="Description" title="Description">
</div>
</div>
</div>
So Twig add the
<div>
that I don't want. How can I remove this autocompleted tag?
I tried the
{% do form_record.title.set rendered %}
but maybe I think that it does not work.
Edit: Okay it seems I misunderstood the issue at first.
I thought you wanted to hide a field you had in your form which can be done with
{% do form.myField.setRendered %}
Now that I understand the issue, I believe it comes from the way your field is being printed.
There are 3 main components to a form field.
Label: form_label(form.field)
Widget: form_widget(form.field)
Errors: form_errors(form.field)
There is a way to print all three components at once. The function is
form_row(form.field)
Here comes the culprit: form_row(). Because it normally prints 3 different components, it adds a div around it!
Futhermore, by looking at the form type and seing 'label' => false, I can say that the label was printing at first using form_row.
To avoid having to define 'label'=>false everytime, you can simply print your form field in this manner:
{{ form_widget(form_record.title, {'attr':{'class':"form-control", 'placeholder':"Description"|trans, 'title':"Description"|trans }}) }}
{{ form_errors(form_record.title) }}
You can simply omit {{form_label(form_record.title)}} and it won't print.
On the other hand, I also noticed something that might be okay but seem wrong with the given example.
In the twig you shared, the form starts with {{ form_start(form) }} but then the field is {{ form_row(form_record.title)}}.
From where I come from form_record is undefined here. I would use {{ form_row(form.title)}}
Anyways, the explanation for the difference between form_row and form_widget can be found here: Symfony form differences between row and widget
Enjoy!
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>
So this is kinda difficult to explain so I have a sort video of the issue with annotations
It seems like static text is not rendering (see the H3 tag). The dynamic stuff like {{ foo.bar }} and things in loops seem to work fine. It is happening to all pages as far as I can tell.
I used the AngularClass repo as a starting point.
When the page is loaded directly or refreshed (F5 etc)
When its accessed via a link from another page
template file
<h3>GPS raw data</h3>
<div class="row" *ngIf="gps && gps.location">
<div class="col-md-4">
<strong>Time:</strong> {{ gps.location.timestamp }}
</div>
<div class="col-md-4">
<strong>Latitude:</strong> {{ gps.location.latitude }}
</div>
<div class="col-md-4">
<strong>Longitude:</strong> {{ gps.location.longitude }}
</div>
</div>
There is no errors in the console.
edit
Another image to possibly clear up what the actual problem is. Note the HTML has content in the title, its hard coded. But its not displayed.
1) 1st solution, it should be *ngIf and not ng-if
<div class="row" *ngIf="gps && gps.location"> //<<<===here
<div class="col-md-4">
<strong>Time:</strong> {{ gps.location.timestamp }}
</div>
<div class="col-md-4">
<strong>Latitude:</strong> {{ gps.location.latitude }}
</div>
<div class="col-md-4">
<strong>Longitude:</strong> {{ gps.location.longitude }}
</div>
</div>
2) 2nd solution, don't use *ngIf and use ?. operator as shown below,
<div class="row" >
<div class="col-md-4" >
<strong>Time:</strong> {{ gps?.location.timestamp }} //<<<==here
</div>
<div class="col-md-4">
<strong>Latitude:</strong> {{ gps?.location.latitude }} //<<<==here
</div>
<div class="col-md-4">
<strong>Longitude:</strong> {{ gps?.location.longitude }} //<<<==here
</div>
</div>
I encountered the same issue on Chrome and fixed it by removing the font-size style applied on that element. Not sure why, might be a bug of Chrome.
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?
I've been trying to do the following in my .hbs file:
<div class="nav-avatar" style="background-image: url('\{{ url }}avatar/\{{ user.pic }}');"></div>
However the CSS when looking through the website looks as so:
<div class="nav-avatar" style="background-image: url('avatar/');"></div>
Both {{ url }} and {{ user.pic }} display as they should otherwise.
I over complicated the problem. Didn't need to escape it.
<div class="nav-avatar" style="background-image: url('{{ url }}avatar/{{ user.pic }}');"></div>