Resize when selecting inside the dialog

Question

resizeable_dialog.html

<link rel="import" href="../../packages/polymer/polymer.html">

<link rel="import" href="../../packages/paper_elements/paper_dialog.html">
<link rel="import" href="../../packages/paper_elements/paper_button.html">
<link rel="import" href="../../packages/paper_elements/paper_tabs.html">
<link rel="import" href="../../packages/paper_elements/paper_tab.html">
<link rel="import" href="../../packages/paper_elements/paper_icon_button.html">
<link rel="import" href="../../packages/core_elements/core_toolbar.html">
<link rel="import" href="../../packages/core_elements/core_pages.html">

<polymer-element name="resizeable-dialog">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <paper-button on-click="{{open}}">Open Dialog</paper-button>    
    <paper-dialog id="dialog" transition="core-transition-bottom" backdrop>
      <paper-tabs selected="{{selected}}">
        <paper-tab>Page 1</paper-tab>
        <paper-tab>Page 2</paper-tab>
      </paper-tabs>
      <section>
        <core-pages selected="{{selected}}">
          <div style="width: 100px; height: 100px;">
            <div>Page 1: 100x100</div>
            <paper-button on-click="{{notifyResize}}">Call 'notifyResize'</paper-button>          
          </div>
          <div style="width: 400px; height: 400px;">
            <div>Page 2: 400x400</div>
            <paper-button on-click="{{notifyResize}}">Call 'notifyResize'</paper-button>          
          </div>
        </core-pages>
      </section>
    </paper-dialog>

  </template>
  <script type="application/dart" src="resizeable_dialog.dart"></script>
</polymer-element>

resizeable_dialog.dart

library resizable_dialog;

import 'package:polymer/polymer.dart';
import 'package:paper_elements/paper_dialog.dart';

@CustomTag('resizeable-dialog')
class ResizeableDialog extends PolymerElement {

  ResizeableDialog.created() : super.created();
  @observable int selected = 0;

  notifyResize() {
    $['dialog'] as PaperDialog..notifyResize();
    print('"notifyResize" called.');
  }

  open() {
    $['dialog'] as PaperDialog..open();
  }

}

This is my dialog, I think you get the idea with the tabbar. My problem is that the <paper-dialog> calculates its dimensions at some point before it gets shown. However, since my <core-pages> can have different width & height, I have to resize the dialog whenever the user selects a tab to ensure, that the whole content of the current selected page is visible.

The method <paper-dialog>.notifyResize() does not exist in Dart for some reasons. It's specified here, in the paper-elements documentation but I cannot invoke it, since it does not exist in Dart.

How can I do this? How can I ask the dialog to re-measure its dimensions?

score 1 · Accepted Answer · answered May 03 '15 at 09:35

1

You should be able to work around like

import 'dart:js' as js;
...
new js.JsObject.fromBrowserObject($['dialog'])
   .callMethod('notifyResize', []);

or

import 'package:paper_elements/paper_dialog.dart';
...
($['dialog'] as PaperDialog).jsElement
    .callMethod('notifyResize', []);

Please create a bug report in the github.com/dart-lang/paper-elements repo (or core-elements, because I think this function should be inherited from core-overlay)

answered May 03 '15 at 09:35

Günter Zöchbauer

623,577
216
2,003
1,567

`$['dialog'] as PaperDialog..jsElement.callMethod('notifyResize', []);` results in `NoSuchMethodError: method not found: 'notifyResize'`. – Basic Coder May 03 '15 at 11:48
I don't get an error, when I use the code I posted or the code you posted in your comment. – Günter Zöchbauer May 03 '15 at 11:56
Which `` version are you using? Mine is: paper_elements: '>=0.6.1 <0.7.0' – Basic Coder May 03 '15 at 11:58
paper_elements 0.7.1, core_elements 0.7.1+2, polymer 0.16.3+1 (from pubspec.lock) – Günter Zöchbauer May 03 '15 at 12:03
Just upgraded to the latest version. `notifyResize` does exist now and I can call it without any errors, however, calling `notifyResize` has no effect at all. The dialog stays at the same size and doesn't get bigger to fit the content size. Is it because of the scroller which displays the content of a ``? – Basic Coder May 03 '15 at 12:08
Sorry, I don't know. I would need a complete example that allows to reproduce. – Günter Zöchbauer May 03 '15 at 12:13
The cause is that you set the the size on the content of the `` not on the `` itself. The `
`s where you set the size are positioned absolute and don't extend their container but the `` only gets the size from the container.
– Günter Zöchbauer May 03 '15 at 13:55
I've just added the width & height dimensions for testing purposes. In my real world case, the DIVs do not have a height or with specified. Removing the dimensions and calling `notifyResize` still doesn't have any effect :'( – Basic Coder May 03 '15 at 14:52
The pages are positioned absolutely and therefore don't expand the container. The only solution I can offer you is to set the width/height of `` dynamically when selection changes for example by acquiring the size of the current page (
) and applying it to ``. There might be a smarter way but I don't know (I didn't do much Polymer development the recent months so I might miss something)
– Günter Zöchbauer May 03 '15 at 14:58
That's what I thought too, but since the DIVs are in a scroller, their dimensions aren't really the ones I want. (hard to explain) Thus, I had to hardcode for every page its dimension, which seems to be pretty ugly. – Basic Coder May 03 '15 at 15:09

Resize when selecting inside the dialog

1 Answers1

Linked