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.
Related
I am creating an Angular page to display the results of football matches and would like a warning message to be displayed when there are no matches. I used an ngIf to check if the array containing all matches is different from 0 but specifying in the else the ng-template to refer to gives me an error "Property 'noMatch' does not exist on type 'MainPageComponent'".
This is the piece of html code in which the matches are displayed, and if there are none, I would like the message contained in the ng-template to be displayed.
<div *ngIf="live.length > 0">
<h1 style="color: red;">Live ScoreBoard</h1>
<div *ngFor="let data of live">
<div class="title-box">
<p id="elapsed">{{ data.fixture.status.elapsed }}'</p>
</div>
<div class="title-box">
<div class="team">
<img id="homeLogo" src="{{ data.teams.home.logo }}">
<p id="homeName">{{ data.teams.home.name }}</p>
</div>
<p id="goals">{{ data.goals.home }} - {{data.goals.away}}</p>
<div class="team">
<img id="awayLogo" src="{{ data.teams.away.logo }}">
<p id="homeName">{{ data.teams.away.name }}</p>
</div>
</div>
<hr>
</div>
<ng-template #noPartite>
<p>No matches are scheduled today, however you can check the results of past matches <a routerLink="/matchday">here</a>and the standings here.</p>
</ng-template>
</div>
This is what the terminal returns
Error: src/app/Components/main-page/main-page.component.html:3:43 - error TS2339: Property 'noPartite' does not exist on type 'MainPageComponent'.
3 <div *ngIf="live.length > 0; else noPartite">
~~~~~~~~~
src/app/Components/main-page/main-page.component.ts:7:16
7 templateUrl: './main-page.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component MainPageComponent.
The position of noPartite template is important. You have to move out from <div> element with *ngIf as below:
<div *ngIf="live.length > 0; else noPartite">
...
</div>
<ng-template #noPartite>
...
</ng-template>
Demo # StackBlitz
I am trying to add a heading and a description to my galleries in the page galerie.html that are for looped but am having an issue with this, the link to the entire website: https://github.com/smarchitects/smarchitectsweb
How do I add a headline and description into the for loop?
Thank you!
I tried adding this code snippet:
<div class="col-12 center">
<h2>{{item.headline}}</h2>
<p>{{item.about}}</p>
</div>
in various places in the for loop and loop and then added this in various places in the front data:
"- headline: XXX"
"- about: YYY"
but none of the combinations worked for me...
Nice website! I cannot reproduce the issue and see any problem because your code is working for me.
Using {{ section | inspect }} shows this on the page:
{"gallery"=>[{"column-size"=>"col-4_sm-12", "aspect-ratio"=>"landscape", "background_image"=>"/images/1.jpg", "description"=>"Karolína Harrachov"}, {"column-size"=>"col-4_sm-12", "aspect-ratio"=>"landscape", "background_image"=>"/images/2022Harrachovexterier/SMARCH_HARR_03_FINAL_.jpg", "description"=>"Karolína Harrachov"}, {"column-size"=>"col-4_sm-12", "aspect-ratio"=>"landscape", "background_image"=>"/images/2022Harrachovexterier/SMARCH_HARR_02B_FINAL_CORR01_.jpg", "description"=>"Karolína Harrachov"}]}
Your current code (below) seems to work fine though:
{%for section in page.galleries%}
<section class="padded">
<div class="capped-width m-l-center m-r-center" id="projekt-{{forloop.index}}">
<div class="gallery grid" id="lightgallery-{{forloop.index}}">
{% for item in section.gallery %}
<a class="{{item.column-size}} gallery-item" href="{{item.background_image}}">
<div class="bg-image lazy-div relative {{item.aspect-ratio}}" data-main="{{item.background_image}}">
<div class="galerie-overlay">
{{ item.description }}
</div>
</div>
</a>
{% endfor %}
</div>
</div>
</section>
{%endfor%}
The description text is shown as expected as an overlay when hovering over an image.
I don't see any headline or about attributes.
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!
I am trying to generate a table using angular code in HTML. Now I seem to have how I want the table to look which is how I have set up this code:
<div class="row">
<div class="col col-25">Date</div>
<div class="col col-50">Name of Customer</div>
<div class="col col-25">Hours Used</div>
</div>
What I have done is generated a list in angular code (which is done correctly) and I have ordered them in a certain way with Date being the first entry and Hours Used being the last. To generate the table in HTML, I use this code:
<div class="row">
<div ng-repeat="B in ConvertToTableRow(T) track by $index">
<div class="col col-25" ng-if="$index == 0">
{{ B }}  
</div>
<div class="col col-50" ng-if="$index == 1">
{{ B }}  
</div>
<div class="col col-25" ng-if="$index == 2">
{{ B }}  
</div>
</div>
</div>
Everything in the first row works well and styled to what I need it to be but the second entry (when the index is 1) will never style its table to a col-50 but instead will stick with a col-25. Now I have tested to see the if the values are equal to 1 or 2 but it seems that is working correctly and the infomation is also coming out correctly but its just not styling correctly.
Is it possible to style a table this way using Angular and HTML?
Would it not be better to use ng-class? I think there's an even better way, but this is just off the top of my head. I hope this helps! :) Documentation for ng-class
<div class="row">
<div ng-repeat="B in ConvertToTableRow(T) track by $index">
<div class="col" ng-class="{'col-25': $index % 3 !== 1, 'col-50': $index % 3 === 1}">
{{ B }}  
</div>
</div>
</div>
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>