Using Polymer 1 I'm trying to figure out a way to dinamically switch pages inside a paper-dialog and inside each page to have a paper-dialog-scrollable element.
Here's the short version of what I'm trying to do:
<paper-dialog with-backdrop>
<iron-pages selected="0">
<div>
<paper-dialog-scrollable>
Long content 1 goes in here...
</paper-dialog-scrollable>
</div>
<div>
<paper-dialog-scrollable>
Long content 2 goes in here...
</paper-dialog-scrollable>
</div>
</iron-pages>
</paper-dialog>
The issue is that the paper-dialog-scrollable, when the window is resized, goes over the paper-dialog edges and no scrollbars get shown.
I've looked a the code for paper-dialog-scrollable and it has a "dialogElement" property that is by default "this.parentNode". I've also tried to change that from the code with each page change but I cannot get it to work. Here's the "code":
this.querySelector('iron-pages').selectedItem.querySelector('paper-dialog-scrollable').dialogElement = this.querySelector('paper-dialog');
The last attempt I made was to trigger the refit and notifyResize on the dialog just under the above snippet of code, using the following:
this.querySelector('paper-dialog').notifyResize();
this.querySelector('paper-dialog').refit();
Maybe someone has ran into this issue and found a solution to this!?
Any hints or ideas would be appreciated!
Related
I am trying to use iron-selector so that I can then dynamically change the main element on my webpage using iron-pages. The code is as follows:
<iron-selector selected='{{choice}}' attr-for-selected='option'>
<div option='home'>Homepage</a>
<div option='list'>List</a>
<div option='delete'>Delete items</a>
</iron-selector>
<h1>Your choice: {{choice}}</h1>
Nothing happens, the divs aren't clickable. I don't get any errors in the console.
I made a custom modal for my Angular 5 app, but I want to be able to edit the content in it.
As example I have the following bit of code
<app-modal> <p>Some Text!</p> </app-modal>
I want the modal to take the <p> tag and put it like this:
<div class="modal">
<div class="card">
<p>Some Text!</p>
</div>
</div>
So I can easily reuse the modal component and easily use it everywhere I need it. But I couldn't find if/how this works anywhere. If it's not possible, then I wonder what the next best way is.
Thanks in advance!
Thanks to the link from ochs-tobi, I found the thing I was looking for.
Just add <ng-content></ng-content> wherever you need in the component to be able to get the content within the tags of the component.
I am delving into the confusing world of web accessibility and trying to retrofit my HTML code to have better accessibility with things such as aria-labels etc.
Trying to tab through my webpage app-header, I am not able to select the page title... Should I be able to, or am I worrying about nothing?
The burger menu and the search bar icon are able to be tabbed. I'm just wondering whether the text should be? Because it is not being read out either.
FYI: I am using ChromeVOX as a screen reader
<app-header class="topHeader" fixed shadow slot="header"> <!-- effects="waterfall" not needed as nothing scrolls behind header bar -->
<app-toolbar>
<paper-icon-button id="toggleDrawer" icon="menu" on-click="toggleMenu" title="Expand menu" aria-title="Expand menu"></paper-icon-button>
<div main-title>App Header Goes Here</div>
<search-bar></search-bar> <!-- This is an external element being called in -->
</app-toolbar>
</app-header>
Does clicking on it do anything (navigate to another page, open up a new set of options using DOM manipulation, etc) that isn't behaviour duplicated by some other control?
If so, then it should be possible to tab to it.
If not, that isn't needed.
(If it does nothing, then it is counter productive to allow it to be focused).
I have a problem regarding onclick="animated.open()". I try to implement the paper-dialog element, and I want the dialog to open after a click on a paper-fab.
<paper-fab icon="create" onclick="animated.open()"></paper-fab>
<paper-dialog id="animated" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop>
<h2>Dialog Title</h2>
<p>Some text here</p>
</paper-dialog>
According to the paper-dialog docs this should work, however, it doesn't. By clicking the paper-fab an error pops up in the console:
Uncaught ReferenceError: animated is not defined
My assumption would be that it doesn't work because all of that is inside a custom element. Does anybody know a workaround? I already tried to use addEventListener but this didn't seem to work either.
Thanks a lot in advance,
Stefan
This is because you are not correctly accessing the paper-dialog element. You will need to create a function that is called from the on-click event on the paper-fab element which gets a reference to the paper-dialog element. See here for more information.
For instance:
<paper-fab icon="create" on-click="openDialog"></paper-fab>
then define your function openeDialog:
openDialog: function () {
this.$.animated.open();
}
EDIT Here is a plnkr demoing this.
So I was reading the following article: Create Modal window with CSS3
However, I'm wanting to modify it by adding more than one modal box to my site.
Here is the code to the original modal:
Open Modal
<div id="openModal" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>etc..etc..</p>
</div>
There is no CSS call for the <div id=openModal"
To create multiple modals, my assumption would be to change the div to <div id=openModal2" class="modalDialog2">
The styling is only on the modalDialog box, So for a second modal, I would assume I'd change the class name for that too.
However, every time I do this, it does not open the modal box.
Here is my code:
Box 1
<div id="openModal1" class="modalDialog1">
<div>
X
<h2>Modal Box 1</h2>
<p>This is a sample modal box that can be created using the powers of CSS3. </p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
Box 2
<div id="openModal2" class="modalDialog2">
<div>
X
<h2>Modal Box 2</h2>
<p><strong>Box 2</strong></p>
<p>yadda yadda</p>
</div>
What am I doing wrong here?
you don't have to change the class. The role of classes is to apply the same style to different elements, so keeping it modalDialog will do the job.
Demo: http://jsfiddle.net/3Vykc/
I just solved this problem about an hour ago, right before reading this article. I didn't change the class at all, as indicated in the answer above. I simply created a new ID (with some new properties) for the second modal box and it worked fine.
This said, I ran into this article because I'm having a problem with overflow: scroll/auto only in Chrome with some iframed (yuck, but I have no choice, it comes from a third-party credit card vendor I have to use on this project) content for the modal box. Now if anyone has a solution for this one... :)