I have created dialogs using Angular Material, but so far haven't found a way to create one using Material Design Lite. Is there a workaround for it?
MDL has support for styling HTML5 dialogs but does not include any polyfills for them. So you must have a browser that supports them (like Chromium). Else use a polyfill like https://github.com/GoogleChrome/dialog-polyfill as pointed out by #manuel-84
<dialog id="dialog" class="mdl-dialog">
<h4 class="mdl-dialog__title">Hello User</h4>
<div class="mdl-dialog__content">
<p>Hello world from dialog!<p>
</div>
<div class="mdl-dialog__actions">
<button type="button" class="mdl-button close">Disagree</button>
</div>
</dialog>
And using a button somewhere call
document.getElementById('dialog').showModal();
See Material Design Lite Components : Dialogs
I'm just a user of MDL, not an insider. But, as I understand it, Dialog support isn't there, but it's being worked on. Tagged for V1.1, but no idea what the schedule for that might be.
https://github.com/google/material-design-lite/pull/1762
Not a dialog per se, but what I am doing in one project is to have a form slide down, using jQuery you get some nice animation
Basically define the form in a card, set the height to zero and opacity to 0. Then execute the following script to reveal the dialog
$('#objects_card_holder').animate({
height: 400
},500,function(){
$('#objects_card_holder').animate({
opacity: 1
},100,function(){
$('#projectName').val('');
});
});
Then when the form is not required run another script to hide it.
$('#objects_card_holder').animate({
opacity:0
},
100,
function(){
$('#objects_card_holder').animate({
height:0
},
500,
function(){
});
});
Assuming that your card has the id objects_card_holder
Of course if you really need a dialog jQuery has it's own dialog.
see https://jqueryui.com/dialog/
Related
I am trying to click a button that is buried in div classes in the code via protractor.
I am pioneering a protractor project for my work and have reached a point where I no longer know what to do. I have a button that is buried in div classes and is not allowing me to click. I have tried using mouseMove to get over to the coordinates of the button, I have tried using the className of the specific button, etc. The button does not have an id. The id is not the issue as I have tried clicking a different button, equally buried in divs, by it's id. I need to know how to get through the layers of divs in order to click the button because the rest of the tests will be dependent on it.
APPLICATION CODE:
::before
<dashboard-label>
<div class="att-topic-analysis-tabs">
<div class="att-button-group">
<button class="btn btn-default btn-lg att-close-topic ng-scope"
role="presentation" tabindex="-1"
ng-click="removeTopic(currentTopic.id)" translate>
Close Topic
</button>
</div>
</div>
PROTRACTOR TEST:
it('Closes Topic Successfully', function(){
//opens the first available topic
openTopic.click();
//checks that the URL contains 'topics' after 5 seconds
browser.wait(proExpect.urlContains('topics'), 5000);
var closeTopic = element(by.className('att-close-topic'));
//browser.wait(proExpect.elementToBeClickable(closeTopicButton), 5000);
console.log(closeTopic);
closeTopic.click();
browser.wait(proExpect.urlContains('home'), 5000);
});
As you can see, the Close Topic button is kind of buried in div classes and the standard click isn't working. Any info would be greatly appreciated
If the closeTopic locator is finding the element, but failing to click it, check to make sure there's only one matching element in the DOM, and that it's visible. My favorite way to check the DOM is just ctrl-F in Chrome inspector and paste the exact CSS that the test is using (.att-close-topic). And to check that what it's getting is visible, use
console.log(closeTopic.isDisplayed());
This can be a big gotcha in protractor, because it doesn't fail (only warns) when there are multiple matches on the page, and it defaults to the first match rather than the first visible match, which drives me nuts, because it's very rare that you want to do anything with a non-visible element on the page.
This will be partly opinion, but just to add a layer to the conversation...
Sometimes the solution to locating a troublesome element on the page is to go back to the developers and make the page more testable. I've seen testers spend hours or days crafting brilliant workarounds to access a stubborn element, and the end result was a fragile, complicated end-to-end test (and aren't they fragile enough already?).
Sometimes a 5-minute conversation with a developer can result in a quick change in the production code (e.g. add a unique ID) that avoids all that effort and yields a much better result, more stable, more simple. But this requires open conversation between the dev and test team, and a culture that values testing as a primary activity enough to make those testability changes to production code that is otherwise working just fine.
This is what you want to read to help you debug why your test doesn't work.
Also, you might want to start adopting await/async since the control flow will go away in the future.
http://www.protractortest.org/#/debugging
try this
var closebutton=element(by.css("[ng-click="removeTopic(currentTopic.id)"]"),
EC = protractor.ExpectedConditions;
Waits for the element to be clickable.checks for display and enable state of button
browser.wait(EC.elementToBeClickable(closebutton), 10000);
now use : closebutton.click();
In Angular 2, I am using PrimeNG calendar using model driven form with *ngSwitchCase as follows
<div [ngSwitch]="field.controlType">
...
<p-calendar *ngSwitchCase="'date'" [formControlName]="field.key" [id]="field.key" [showIcon]="true" dataType="string"></p-calendar>
...
</div>
The calendar comes up well on the UI, but when I select the date, or click outside on the page, it does not go away.
Only when I click on tab to go away, the calendar is closed.
If I use ngModule, it works fine, but that is not the requirement.
Does anyone have any clue/example on it, please share
Thanks
Found the error that I was using <div class="section"> somewhere before the primeng calendar.
Renaming the css section class to appsection solved this issue.
we are adding ARIA support to our SPA website.
In application we have one activity area where we are showing dynamic messages from server based on validations.
We have added role='alert' and aria-live='assertive' to read those activity messages.
In FF and chrome its working fine however in IE its reading code like "left-brace left-brace txtErrorMessage right-brace right-brace" even if message there on screen
<div role="alert" aria-live="assertive">
<p class="scan-complete-text-auto">
{{model.txtErrorMessage}}
</p>
</div>
here txtErrorMessage will get populated runtime from api results.
we are using angular JS.
How to resolve this issue?
Try using ng-bind="model.txtErrorMessage" instead of {{model.txtErrorMessage}}
Try using ng-show or ng-hide, to hide the div until you have the message ready. The message length can be checked to show or hide the div itself. This will fix the issue.
Also no need for both role="alert" and aria-live="assertive". You can remove role="alert". JAWS + IE tend to read more than once for this combination.
Angular provides CDK APIs built in to handle this scenario.
https://material.angular.io/cdk/a11y/overview#example-1
#Component({...})
export class MyComponent {
constructor(liveAnnouncer: LiveAnnouncer) {
liveAnnouncer.announce("Hey Google");
}
}
Or else you can keep a simple span or div, and update your message programmatically.
<span
aria-live="polite"
class="ada-visuallyhidden"
[innerHTML]="yourCustomADAMessage"
></span>
I want to show PDFs in my angular application. It should be possible to show multiple pages at once and to search inside the PDF.
I tried angularjs-pdf to do so, but it lacks these features. Is there a angular wrapper for pdf.js that can do this? Or can somebody get me startet on how to implement pdf.js in my angular application without a wrapper?
Assuming this statement:
"I want to show PDFs in my angular application"
Anyone searching for this, could ought to check out ng2-pdf-viewer, for more information on this module, can check this out ng2-pdf-viewer PdfShowcase
Basically, this module could somewhat allow one to display more than one PDF in a single screen.
app.component.ts
// Declare the pdf as an empty array
pdfs = [];
// Assuming requesting PDFs from server through MVC style
getPdfs(){
this.getPdfService.getPdfs().subscribe(response => {
response.body.forEach((value, index) => {
this.pdfs.push({
id: index,
obj: window.URL.createObjectURL(value);
});
});
});
}
app.component.html
<div *ngFor="let pdf of pdfs, index as i;">
<div *ngIf="pdf[i]">
<pdf-viewer
[rotation]="0"
[original-size]="true"
[show-all]="true"
[fit-to-page]="true"
[zoom]="0"
[zoom-scale]="'page-width'"
[stick-to-page]="true"
[render-text]="false"
[external-link-target]="'blank'"
[autoresize]="true"
[show-borders]="true"
[src]="pdf.obj"
(after-load-complete)="onPdfComplete($event)"
(error)="onPdfError($event)"
style="width: 100%; height: 800px;">
</pdf-viewer>
</div>
</div>
If this library is not suitable for your use case, you may try with other libraries which uses iframe or similar strategy. Refer here is a useful source worth checking it out.
I know I'm a little bit late for this post but thought of posting here might help some folks who is looking for the same thing. Hope it helps.
From ng2-pdf viewer page, it recommends your desire "angular wrapper for pdf.js", There are a ton of built in functionality Mozilla's viewer supports; such as print, download, bookmark, fullscreen, open file, zoom, search,......
If you need to display multiple PDF files simultaneously and if you don't mind using iFrames, I recommend ng2-pdfjs-viewer. https://www.npmjs.com/package/ng2-pdfjs-viewer
I'm new on Angular JS + Bootstrap 3 and I'm trying to do something for maps. the thing is that I need to open a modal, and then from a button of that modal open another modal.
This is the external html:
<div class="modal-header">
<h1>Editor<h1>
</div>
<div class="modal-body" >
<button class="btn btn-primary" ng-click="treureModalEdit()" data-dismiss="modal">Afegir Punt</button>
</div>`
Here is my example: http://plnkr.co/edit/Zx68EQ?p=info
If something does not load is because libraries, but i only need help where the button 'Posa Marcador!' is.
Some code is in catalan, sorry if that discourages you to help me.
Thank you!
If you inspect with your browser's developer tools the first modal that you open you will see that the markup for this modal is appended to the end of your HTML body, which means that the modal is not nested in your <div ng-controller="DialogDemoCtrl">. This in turn means that the modal does not have a controller of its own, and therefore cannot "understand" the ng-click="treureModalEdit()" you have defined for your button.
In order to fix this problem you should create a second controller and use it for your modal. The treureModalEdit() would then be placed into that second controller.
A few other comments I have on your code:
You use things like data-toggle="modal" data-target="#modalEdit", however this is how you would be opening your modal if you did not have an Angular application. In your Angular application what you actually use is the ng-click="func()" you have put on the button. You can therefore clean all this dead code from your HTML (data attributes and modal template).
If you are new to Angular I would suggest using a newer version in order to avoid any problems which might be fixed in newer versions. You can use the latest version (1.4.0) or a 1.2.x version is you need to support IE8 (which is not officially supported since Angular version 1.3.x.