search

PolymerElements / paper-dialog-scrollable

A scrollable area used in a Material Design dialog
15 stars 18 forks source link

paper-dropdown-menu inside paper-dialog / paper-dialog-scrollable #24

Closed valdrinkoshi closed 8 years ago

valdrinkoshi commented 8 years ago

From @manfield on September 30, 2015 21:31

Nesting paper-dropdown-menu (iron-dropdown based) inside dialogs cause some side effects:

  1. When dropdown is tapped to be opened, dialog changes position randomly
  2. If paper-dropdown-menu is nested inside a paper-dropdown-scrollable, when dropdown is tapped to be opened, dialog scrollbar jumps to start point

I attach an example could be used to test fastly these issues.

<!doctype html>
<html>

<head>
    <title>PTS</title>
    <script src="/bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="/bower_components/polymer/polymer.html">
    <link rel="import" href="/bower_components/paper-dialog/paper-dialog.html">
    <link rel="import" href="/bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
    <link rel="import" href="/bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
    <link rel="import" href="/bower_components/paper-menu/paper-menu.html">
    <link rel="import" href="/bower_components/paper-item/paper-item.html">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body class="fullbleed">
    <paper-dialog opened>
    <paper-dialog-scrollable style="width:300px;height:200px;">
        <div class="vertical layout">
        <paper-dropdown-menu label="Your favourite pastry">
          <paper-menu class="dropdown-content">
            <paper-item>Croissant</paper-item>
            <paper-item>Donut</paper-item>
            <paper-item>Financier</paper-item>
            <paper-item>Madeleine</paper-item>
          </paper-menu>
        </paper-dropdown-menu>
        <paper-dropdown-menu label="Your favourite pastry">
          <paper-menu class="dropdown-content">
            <paper-item>Croissant</paper-item>
            <paper-item>Donut</paper-item>
            <paper-item>Financier</paper-item>
            <paper-item>Madeleine</paper-item>
          </paper-menu>
        </paper-dropdown-menu>
        <paper-dropdown-menu label="Your favourite pastry">
          <paper-menu class="dropdown-content">
            <paper-item>Croissant</paper-item>
            <paper-item>Donut</paper-item>
            <paper-item>Financier</paper-item>
            <paper-item>Madeleine</paper-item>
          </paper-menu>
        </paper-dropdown-menu>
        <paper-dropdown-menu label="Your favourite pastry">
          <paper-menu class="dropdown-content">
            <paper-item>Croissant</paper-item>
            <paper-item>Donut</paper-item>
            <paper-item>Financier</paper-item>
            <paper-item>Madeleine</paper-item>
          </paper-menu>
        </paper-dropdown-menu>
        </div>
        </paper-dialog-scrollable>
    </paper-dialog>

</body>

</html>

Copied from original issue: PolymerElements/paper-dialog#42

valdrinkoshi commented 8 years ago

From @notwaldorf on September 30, 2015 21:39

I landed a fix yesterday (https://github.com/PolymerElements/paper-dialog-behavior/pull/30) that should have fixed this issue, as well as an example to test this to the paper-dialog demo. Would you mind making sure your dependencies are up to to date and giving it another try, please?

valdrinkoshi commented 8 years ago

From @manfield on September 30, 2015 22:12

Yes, everything is up to date. I tweaked your demo adding several dropdowns inside the scrollable area. I discovered two interesting behaviors/issues:

Try yourself:

  1. Dialog is set as "opened"
    <paper-dialog opened id="dropdown">
    <paper-dialog-scrollable style="height:250px">
    <div class="vertical layout">
    <paper-dropdown-menu label="Value">
      <paper-menu class="dropdown-content">
        <paper-item>1</paper-item>
        <paper-item>2</paper-item>
        <paper-item>3</paper-item>
        <paper-item>4</paper-item>
        <paper-item>5</paper-item>
        <paper-item>6</paper-item>
        <paper-item>7</paper-item>
        <paper-item>8</paper-item>
        <paper-item>9</paper-item>
        <paper-item>10</paper-item>
      </paper-menu>
    </paper-dropdown-menu>
    <paper-dropdown-menu label="Value">
      <paper-menu class="dropdown-content">
        <paper-item>1</paper-item>
        <paper-item>2</paper-item>
        <paper-item>3</paper-item>
        <paper-item>4</paper-item>
        <paper-item>5</paper-item>
        <paper-item>6</paper-item>
        <paper-item>7</paper-item>
        <paper-item>8</paper-item>
        <paper-item>9</paper-item>
        <paper-item>10</paper-item>
      </paper-menu>
    </paper-dropdown-menu>
    <paper-dropdown-menu label="Value">
      <paper-menu class="dropdown-content">
        <paper-item>1</paper-item>
        <paper-item>2</paper-item>
        <paper-item>3</paper-item>
        <paper-item>4</paper-item>
        <paper-item>5</paper-item>
        <paper-item>6</paper-item>
        <paper-item>7</paper-item>
        <paper-item>8</paper-item>
        <paper-item>9</paper-item>
        <paper-item>10</paper-item>
      </paper-menu>
    </paper-dropdown-menu>
    <paper-dropdown-menu label="Value">
      <paper-menu class="dropdown-content">
        <paper-item>1</paper-item>
        <paper-item>2</paper-item>
        <paper-item>3</paper-item>
        <paper-item>4</paper-item>
        <paper-item>5</paper-item>
        <paper-item>6</paper-item>
        <paper-item>7</paper-item>
        <paper-item>8</paper-item>
        <paper-item>9</paper-item>
        <paper-item>10</paper-item>
      </paper-menu>
    </paper-dropdown-menu>
    <paper-dropdown-menu label="Value">
      <paper-menu class="dropdown-content">
        <paper-item>1</paper-item>
        <paper-item>2</paper-item>
        <paper-item>3</paper-item>
        <paper-item>4</paper-item>
        <paper-item>5</paper-item>
        <paper-item>6</paper-item>
        <paper-item>7</paper-item>
        <paper-item>8</paper-item>
        <paper-item>9</paper-item>
        <paper-item>10</paper-item>
      </paper-menu>
    </paper-dropdown-menu>
    </div>
  </paper-dialog-scrollable>
  </paper-dialog>
  1. dialog is opened by the button in the demo page
    <paper-dialog id="dropdown">
    <paper-dialog-scrollable style="height:250px">
    <div class="vertical layout">
    <paper-dropdown-menu label="Value">
      <paper-menu class="dropdown-content">
        <paper-item>1</paper-item>
        <paper-item>2</paper-item>
        <paper-item>3</paper-item>
        <paper-item>4</paper-item>
        <paper-item>5</paper-item>
        <paper-item>6</paper-item>
        <paper-item>7</paper-item>
        <paper-item>8</paper-item>
        <paper-item>9</paper-item>
        <paper-item>10</paper-item>
      </paper-menu>
    </paper-dropdown-menu>
    <paper-dropdown-menu label="Value">
      <paper-menu class="dropdown-content">
        <paper-item>1</paper-item>
        <paper-item>2</paper-item>
        <paper-item>3</paper-item>
        <paper-item>4</paper-item>
        <paper-item>5</paper-item>
        <paper-item>6</paper-item>
        <paper-item>7</paper-item>
        <paper-item>8</paper-item>
        <paper-item>9</paper-item>
        <paper-item>10</paper-item>
      </paper-menu>
    </paper-dropdown-menu>
    <paper-dropdown-menu label="Value">
      <paper-menu class="dropdown-content">
        <paper-item>1</paper-item>
        <paper-item>2</paper-item>
        <paper-item>3</paper-item>
        <paper-item>4</paper-item>
        <paper-item>5</paper-item>
        <paper-item>6</paper-item>
        <paper-item>7</paper-item>
        <paper-item>8</paper-item>
        <paper-item>9</paper-item>
        <paper-item>10</paper-item>
      </paper-menu>
    </paper-dropdown-menu>
    <paper-dropdown-menu label="Value">
      <paper-menu class="dropdown-content">
        <paper-item>1</paper-item>
        <paper-item>2</paper-item>
        <paper-item>3</paper-item>
        <paper-item>4</paper-item>
        <paper-item>5</paper-item>
        <paper-item>6</paper-item>
        <paper-item>7</paper-item>
        <paper-item>8</paper-item>
        <paper-item>9</paper-item>
        <paper-item>10</paper-item>
      </paper-menu>
    </paper-dropdown-menu>
    <paper-dropdown-menu label="Value">
      <paper-menu class="dropdown-content">
        <paper-item>1</paper-item>
        <paper-item>2</paper-item>
        <paper-item>3</paper-item>
        <paper-item>4</paper-item>
        <paper-item>5</paper-item>
        <paper-item>6</paper-item>
        <paper-item>7</paper-item>
        <paper-item>8</paper-item>
        <paper-item>9</paper-item>
        <paper-item>10</paper-item>
      </paper-menu>
    </paper-dropdown-menu>
    </div>
  </paper-dialog-scrollable>
  </paper-dialog>

In the first example, dialog position goes crazy when using dropdown. In the second, position remain fixed, but overflow does not work properly.

valdrinkoshi commented 8 years ago

From @manfield on October 4, 2015 23:42

I suspect is an issue related to Google Chrome. It behaves correctly on Firefox.

valdrinkoshi commented 8 years ago

Hi @manfield, paper-dropdown-menu will overflow outside the paper-dialog, that is expected. paper-dropdown-menu uses the window size to calculate where is best to render the items, and uses the triggering element as origin point. If we set overflow: hidden to the paper-dialog, we might not be able to reach some items of the dropdown dialog-overflow

About the wrong positioning & sizing when using opened on the markup, that's a bug & we'll further investigate on that ;)

valdrinkoshi commented 8 years ago

so this is a problem of paper-dialog-scrollable, which should set height: 100% to .scrollable

valdrinkoshi commented 8 years ago

Fixed with https://github.com/PolymerElements/paper-dialog-scrollable/commit/ba973d2ddef8042ce08329be29efe723061ab68a

manfield commented 8 years ago

Great, thanks!

logadams commented 8 years ago

Hi I'm using the most recent version of paper-dialog-scrollable 1.1.4 and am still experiencing the issue of a menu-dropdown causing the scroll bar to go to the start position in both chrome and safari. Has this resolved the issue for everyone else?

valdrinkoshi commented 8 years ago

That has been fixed in iron-fit-behavior v1.2.2 by this PR https://github.com/PolymerElements/iron-fit-behavior/pull/49

logadams commented 8 years ago

Thank you.