Search code examples
dartdart-polymermaterial-designpaper-elements

Forcing a paper-dialog to be the topmost window

I created a dialog and it renders. However, it can be hidden by its parent if the window is small. I tried the layered attribute on PaperDialog layered attribute it does not seem to help.

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

import '

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 is the contents of the dialog - the latter is hosted in the ssss_form.html file. When the 'Others' checkbox in the 'Specimen' dropdown is clicked, this triggers the dialog.

I also get the following when the application is run

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)

Please see attached graphic.

Thanksenter image description here

Solution

  • I think you just need to set a higher value for the zIndex CSS property than every other HTML element on that page.