I'm trying to get a page with various google charts to load in e pretty way (i.e display loading icon until chart is ready). Now some of the charts have a corresponding div that includes some text /info relating to the chart.
<ng-container *ngIf="stat1 && stat2; else loading">
<google-chart
[title]="title"
[type]="TYPE"
[data]="data"
[columns]="columnNames"
[options]="options"
[width]="width"
[height]="height">
</google-chart>
<div class="myDiv" *ngIf="stat1 && stat3">
my text
</div>
</ng-container>
<ng-template #loading>
<div class="loading">
my loading component
</div>
</ng-template>
This works as far as displaying a loading icon until the chart is ready however the content of the div appears before the chart causing the loading to look messy.
Any help as to how I can make the div only display after the chart is loaded would be awesome, as I can't seem to find a working answer online or in documentation. (I'm likely not searching for the correct terminology)
Thanks in advance.
Did you open their documentation ?
The ready event is emitted as soon as the chart got drawn and after every subsequent redraw.
<google-chart (ready)="onReady($event)"></google-chart>
Maybe use that ?
Related
So, I have a Vuetify navigation drawer, and in it I have several list items, among them one containing a slider. Most of the time it works the way I want it, but some times the template element at the back will disappear, including the HTML element in the browser inspection tab. I have not really been able to figure out exactly what triggers this since it's quite rare..
This is how it looks like when it's working..
..and what happens when it breaks!
Here is the HTML code for the list element
<v-list-item>
<v-list-item-content>
<v-list-item-title class="presTitle">Presentation delay</v-list-item-title>
<v-slider
v-model="presentationInterval"
prepend-icon="mdi-clock"
dense
:min="6000"
:max="60000"
step="3000"
>
<template v-slot:append>
<p class="durationText">
{{ (presentationInterval / 1000).toString() + "s"}}
</p>
</template>
</v-slider>
</v-list-item-content>
</v-list-item>
Anyone see any obvious mistakes or why this works 99% of the time but some times break?
My component A has a child component B. On start up, A shows up because of conditition in *ngIf. A uses an EmbeddedView show show image thumbnails. A also has a button which when clicked changes the condition of *ngIf and shows B (because B shows on some other condition of *ngIf). If a button in B is pressed then A shows back again.
A's html is something like
<div *ngIf="this.tabType == this.questionTab" id="form-div-question" class="body__div--background">
....
<ng-template #thumbnailTemplate let-context="context">
<div id="{{context.divId}}">
<button id="{{context.buttonId}}" type="button" data-toggle="modal" (click)="showEnlargeImage(context)">
<img id="{{context.imgId}}" src="{{context.imgSrc}}"/>
</button>
<a *ngIf="this.isEditing" href="javascript:void(0)" id="{{context.closeId}}" (click)="deleteThumbnailFromContainer(context)"></a>
</div>
</ng-template>
...
<div id="image-thumbnail-container">
<ng-container #thumbnailContainer ></ng-container>
</div>
</div>
<div *ngIf="this.tabType == this.submittedAnswerTab" id="form-div-submitted-answer" class="body__div--background">
<b-component #bComponent [someInput]="..." (someEventFromB)="switchToQuestionTab($event)"></b-component>
</div>
The EmbeddedView in A is access as follows
#ViewChild("thumbnailContainer",{read:ViewContainerRef})
thumbnailContainerRef:ViewContainerRef;
What I am noticing is that on start up A shows fine including its embedded view. Then B also shows when the button in A is clicked. But when the view switches back to A then the embedded view doesn't show up!! (rest of A shows up correctly). I tried to force recreating the embedded view, I get error that the reference to the container is not defined (i.e.thumbnailContainerRef is undefined).
I also notice that when B is shown, it seem to be initiated everytime but when A is shown, it is not reinitialised everytime (maybe because B is child and A is parent)
Why is the container reference becoming undefined?
Taking inspiration from Angular 2 Show and Hide an element and What is the difference between *ngIf and [hidden]?
I seem to have solved the problem by using [hidden] instead of ngIf of A component.
<div [hidden]= "this.tabType != this.questionTab" ...>
</div>
<div *ngIf="this.tabType == this.submittedAnswerTab" id="form-div-submitted-answer" class="body__div--background">
<b-component #bComponent [someInput]="..." (someEventFromB)="switchToQuestionTab($event)"></b-component>
</div>
It seems that when '*ngIf' is false for A, Angular removes the embedded view and it doesn't get created again which seem to to be the reason why the ViewContainerRef is undefined when I switch back to A. Using [hidden] just hides A. Maybe there is code smell in my implementation but hey, I am still learning!
I'm developing an SAP-ui5 XML view. In that view I created dynamic custom tiles using the CustomTile tag, as demonstrated in this image:
<TileContainer
id="container"
height="400px"
tileDelete="handleTileDelete"
tiles="{/TileCollection}">
<tiles>
<CustomTile id="ct1">
<content>
<VBox>
<Toolbar class="backcolor" design="Transparent">
<Text class="sapMHeader" text="Dynamic content" />
</Toolbar>
<Button type="{infoState}" text="Button"
icon="sap-icon://approvals"
ariaDescribedBy="defaultButtonDescription genericButtonDescription">
</Button>
</VBox>
</content>
</CustomTile>
</tiles>
</TileContainer>
Currently, clicking on the navigate button slides three tiles per click. I want to get it to slide only one tile per click. How do I achieve this?
The TileContainer control is responsive meaning how many tiles you see totally depends on the available screen space and nothing else. The scroll-buttons act as an overflow and slide a complete 'page' just as a Carousel would do. There is no way of changing this behavior via existing API.
If you really want to adapt this behavior TileContainer.prototype.scrollLeft and TileContainer.prototype.scrollRight are probably a good starting point.
BR
Chris
I'm working on a website based on the Foundation library. I'm creating an About "page" on my website by using a modal, and attempting to equalize the three different panes inside of the modal, like so:
<div id="aboutPage" class="reveal-modal" data-reveal>
<h1>About</h1>
<div class="row" data-equalizer>
<div class="large-4 columns panel" data-equalizer-watch>
<h2>About This Site</h2>
<p>This site is intended to provide a resource for people learning to program in Swift.</p>
</div>
<div class="large-4 columns panel" data-equalizer-watch>
<h2>What's Coming Up</h2>
<p>We're working on smoothing over some glitches with the brand new Issue tracking systems. We also have some exciting updates planned involving this site's mobile version.</p>
</div>
<div class="large-4 columns panel" data-equalizer-watch>
<h2>Using the Help Menu</h2>
<p>The Help menu quickly lets you contact Support to address issues which may present themselves as you program in Swift. If a representative is not available when you submit your question, we will address your issue as soon as possible. You will
receive a notification badge when the issue has been resolved.</p>
</div>
</div>
<a class="close-reveal-modal" id="x">×</a>
</div>
However, when I viewed the modal, the panels were not equalized. This was also true on several other modals on which I attempted to do the same thing. Despite that, I was able to successfully equalize the panels outside of the modal. Is this a bug/feature related to the modal, and if so, is there any way around it?
Once you have your Reveal Modal opened you will need to recalculate the height of the Equalizer panels.
// Once the Reveal Modal has been opened . . .
$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
// Force Foundation to recalculate the Equalizer panel heights
Foundation.libs.equalizer.reflow();
});
Here is a working example in codepen.
I hope that helps.
In Foundation 6, I was having the same issue. Here is the solution that ultimately worked for me.
<script>
$(document).foundation();
$('.reveal').on('open.zf.reveal', function() {
//force equalizer to fire AFTER modal has finished opening
Foundation.reInit('equalizer');
});
</script>
I'm using Inspect Element in Google Chrome to figure out what is controlling the size of the slideshow controller buttons underneath the slideshow of this template website:
http://themefuse.com/demo/html/Medica/index-slider-2.html
When I click Inspect Element over the button "Cardiology" I see a line in the HTML code saying:
<li style="width: 192px; overflow: hidden;">Cardiology</li>
However, when I view source code of the page, no such line exists! This is a problem for me because I would like to edit the size of the button and the text inside it.
Please help! Thanks!
"Source code" is what the browser received from the server. It can be changed by JavaScript; the "Inspect Element" always shows the current shape of the document.
EDIT: Then again, sometimes things are not complicated. Look what I found in the source code:
<li>
<div class="textHolder">
<h3>Cardiology</h3>
<p><span><strong>Cardiac Rehabilitation Center</strong> We helped Glade Inc. design their latest fragrance for household perfumes </span></p>
</div>
<img src="images/temp/slider_img_01.jpg" alt="" />
</li>
It is then further modified by JS.
This list generated by JS. Check js/playSlider.js starting from line #335.