Пустое пространство внизу диалогового окна Polymer Paper

У меня есть собственный полимерный диалог, который я использую для входа в систему, и я хочу, чтобы он выглядел так:

введите здесь описание изображения

Это код, который я использую для достижения этого:

<polymer-element name="login-dialog">
  <template>
    <paper-dialog heading="XYZ Login" vertical autoCloseDisabled="true" transition="paper-transition-center" opened="true">
      <p>{{feedback}}</p>
      <paper-input floatingLabel label="Username" inputValue="{{username}}" type="text"></paper-input>
      <paper-input floatingLabel label="Password" inputValue="{{password}}" type="password"></paper-input>

      <paper-button role="button" on-click="{{reset}}" class="noink" affirmative>
        Reset Password
      </paper-button>           
      <paper-button role="button" on-click="{{login}}" class="ink" affirmative>
        Login
      </paper-button>
    </paper-dialog>
  </template>
  <script type="application/dart" src="login-dialog.dart"></script>
</polymer-element>

Я не хочу, чтобы кнопки закрывали диалог, поэтому я убираю подтверждение с бумажных кнопок, чтобы я мог закрыть диалог сам, если были введены правильные данные для входа. Как только я удаляю подтверждение, появляется большое белое пространство. внизу диалога:

введите здесь описание изображения

Внутри кода дротика у меня есть следующее:

  login(event, detail, target) {
    print("Clicked Login");

    return false;
  }

  reset(event, detail, target) {
    print("Clicked Reset");

    return false;
  }

Я надеялся, что возврат false остановит закрытие диалога, если я использую утвердительный ответ, но он ничего не делает. Любые идеи о том, как заставить кнопки не закрывать диалоговое окно, если я не скажу ему сделать это в коде дротика и не иметь этого пробела внизу? (не заинтересован в том, чтобы взломать его с помощью css)


dart dialog polymer dart-polymer
person Jan Vladimir Mostert    schedule 31.12.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Возврат false ничего не делает. Вам нужно позвонить preventDefault() по поводу мероприятия.

login(event, detail, target) {
    print("Clicked Login");

    event.preventDefault();
    // event.stopPropagation();
  }

  reset(event, detail, target) {
    print("Clicked Reset");

    event.preventDefault();
    // event.stopPropagation();
  }

<paper-dialog> имеет специальный параметр для отключения автоматического закрытия, так что вы можете affirmative только для макета.

<paper-dialog closeSelector="" ....

см. также Предотвратить автоматическое закрытие бумажного диалогового окна

person Günter Zöchbauer    schedule 31.12.2014
comment
событие.preventDefault(); ничего не делает, если кнопка настроена утвердительно, если она не установлена ​​утвердительно, то я получаю поведение, которое ищу, но затем я также получаю большой белый пробел внизу. - person Jan Vladimir Mostert; 31.12.2014
comment
Пробовали ли вы добавить stopPropagation() (с affirmative), вы также можете попробовать вместо этого stopImmediatePropagation(). - person Günter Zöchbauer; 31.12.2014
comment
У меня действительно, он все еще закрывает диалог. Есть ли что-то кроме утвердительного/отрицательного, которое я могу использовать, чтобы убедиться, что кнопки сидят там, где они должны сидеть? - person Jan Vladimir Mostert; 31.12.2014
comment
Добавление ‹paper-dialog closeSelector= ...› исправляет это, спасибо, Гюнтер! Если вы можете обновить свой ответ, чтобы включить это, я приму его. - person Jan Vladimir Mostert; 31.12.2014
comment
Кроме того, этот event.preventDefault теперь кажется излишним, работает и без него. - person Jan Vladimir Mostert; 31.12.2014
comment
Я сохранил это в своем ответе, потому что вы использовали return false в своем вопросе, и это не работает даже в тех случаях, когда preventDefault() и stopPropagation() не работают. Я не знаю, почему это не работает с paper-dialog, обычно это способ подавить обработку события другими частями DOM. - person Günter Zöchbauer; 31.12.2014
comment
Должен ли я зарегистрировать ошибку для этого? - person Jan Vladimir Mostert; 01.01.2015