Question

我创建了一个对话框并进行渲染。但是，如果窗口很小，它可以被其父级隐藏。我在PaperDialog分层属性上尝试了分层属性，似乎没什么帮助。

others.html

<!DOCTYPE html>

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

<link href='../../../../packages/bwu_datagrid/bwu_datagrid.html' rel='import' >
<link href='../../../../packages/paper_elements/paper_input.html' rel='import' >

<polymer-element name='others-form'>
  <template>   
    <paper-input floatinglabel multiline
      id = 'description'>
    </paper-input>   
  </template>

  <script type='application/dart' src='others_form.dart'></script>
</polymer-element>

others.dart

import 'package:polymer/polymer.dart';

import 'package:vacuum_persistent/persistent.dart' show PersistentMap;
import 'package:clean_data/clean_data.dart' show DataMap;


import 'package:epimss_shared/shared_event.dart' show eventBus,
  PersistentMapEvent;


@CustomTag( 'others-form' )
class OthersForm extends PolymerElement
{

  @observable String z = '3';

  @observable DataMap<String, dynamic> selections;

  String errorMsg;


  OthersForm.created() : super.created();

  @override
  void attached()
  {
     super.attached();

     selections = new DataMap<String, dynamic>.from({});

     eventBus.on( PersistentMapEvent, ( event )
       {
         switch( event.topic )
         {
           case 'shared|description-form --> lab|routine-culture-rqst':
           selections[ 'other' ] = event.pmap[ 'description' ];
             break;
         }
       });

     /*
     selections.onChange.listen( (changeset)
       {
         if ((selections.length == 1 && !selections.containsKey( 'other' )) ||
              selections.containsKey( 'other' ))
         {
             eventBus.signal(
               new PersistentMapEvent (
                 new PersistentMap<String, String>.fromMap( selections ))
                   ..topic = this.dataset[ 'topic' ]);
         }
     });
     *
      */
  }
}

ssss_form.html

        <!DOCTYPE html>

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

        <link href='../../../../packages/paper_elements/paper_icon_button.html' rel='import' >
        <link href='../../../../packages/paper_elements/paper_shadow.html'  rel='import'>
        <link href='../../../../packages/paper_elements/paper_button.html' rel='import'>
        <link href='../../../../packages/paper_elements/paper_dialog_transition.html' rel='import'>
        <link href='../../../../packages/paper_elements/paper_dialog.html' rel='import'>

        <link href='../../../../packages/html_components/input/select_item.html'  rel='import'>
        <link href='../../../../packages/html_components/input/select_checkbox_menu.html'  rel='import'>

        <link href='others_form.html'  rel='import'>

        <polymer-element name='ssss-form'>

          <template>    

            <div layout horizontal>
              <div layout vertical 
                id='specimen-div'
                class='card'>

                  <h-select-checkbox-menu
                     label='Specimen'
                     on-selectionchanged='{{onSelectionChangedFiredSpecimen}}'>
                     <template repeat='{{key in specimens.keys}}'>
                       <h-select-item 
                        label='{{key}}' 
                        value='{{specimens[key]}}'>
                       </h-select-item>
                     </template>
                  </h-select-checkbox-menu>
              </div>

                <paper-shadow z='{{z}}'></paper-shadow>
              </div>

               <paper-dialog
                id='other-dialog'
                heading='Other' 
                transition='paper-dialog-transition-center'>
                <others-form> </others-form>

                <paper-button dismissive 
                  label='More Info...' >
                </paper-button>
                <paper-button affirmative 
                  label='Cancel'>
                </paper-button>
                <paper-button affirmative autofocus 
                  label='Accept'>
                </paper-button>
              </paper-dialog>
          </template>
          <script type='application/dart' src='ssss_form.dart'></script>
        </polymer-element>

ssss_form.dart

导入'

package:polymer/polymer.dart';

import 'dart:html';

import 'package:paper_elements/paper_dialog.dart';

import 'package:html_components/html_components.dart' show SelectCheckboxMenuComponent;

import 'package:vacuum_persistent/persistent.dart' show PersistentMap;
import 'package:clean_data/clean_data.dart';

import 'package:epimss_shared/shared_transformers.dart' show CheckboxMenuItemsConverter;


@CustomTag( 'ssss-form' )
class SsssForm extends PolymerElement with CheckboxMenuItemsConverter
{
  DataSet<DataMap> selections;
  DataMap<String, dynamic> specimenSelections;
  PersistentMap<String, Map>  pmap;

  @observable
  Map<String, dynamic> specimens = toObservable(
    {
      'CSF': 'CSF',
      'Other': 'Other'
    });

  @observable String specimen = '';
  @observable String z = '3';

  var sideForm;

  SsssForm.created() : super.created();

  void onSelectionChangedFiredSpecimen( Event event, var detail,
                                SelectCheckboxMenuComponent target)
  {
    var list = getItemModels( target.selectedItems );

    specimenSelections.clear();

    list.forEach( (item)
      {
        specimenSelections[item.label] = item.selected;

        /// Checks if [item] selected is equal to 'Other' and if so creates a
        /// a dialogue to make the selection
        if ( item.label == 'Other')
        { toggleDialog( 'paper-dialog-transition-center' ); }

      });
  }

  toggleDialog( transition ) => $['other-dialog'].toggle();



  @override
  void attached()
  {
    super.attached();

    specimenSelections = new DataMap<String, dynamic>.from({});

    selections = new DataSet<DataMap>.from( [specimenSelections] );
  }
}

others.html是对话框的内容 - 后者托管在ssss_form.html文件中。单击“样本”下拉列表中的“其他”复选框时，将触发对话框。

运行应用程序时，我也会得到以下信息

Attributes on ssss-form were data bound prior to Polymer upgrading the element. This may result in incorrect binding types. (:1)
The "label" property is deprecated. (http://localhost:8080/polymer_bug.html:7467)
The "label" property is deprecated. (http://localhost:8080/polymer_bug.html:7467)
The "label" property is deprecated. (http://localhost:8080/polymer_bug.html:7467)
The "label" property is deprecated. (http://localhost:8080/polymer_bug.html:7467)
The "label" property is deprecated. (http://localhost:8080/polymer_bug.html:7467)
The "label" property is deprecated. (http://localhost:8080/polymer_bug.html:7467)

请参阅附图。

感谢 enter image description here

Answer 1

我认为你只需要为zIndex CSS属性设置一个比该页面上每个其他HTML元素更高的值。

强制纸质对话框成为最顶层的窗口

1 个答案: