diff --git a/README.md b/README.md
index 25a1c3d..9156945 100644
--- a/README.md
+++ b/README.md
@@ -5,32 +5,33 @@ Dropdown menu with search and multiple options selection
 ### Element properties
 
 
+* allowOutsideScroll - boolean, default: false
 * autoValidate - boolean
-* customObjectOptions - Boolean, Default: false
-* disabled - Boolean Default: false
-* dynamicAlign - Boolean Default: false
-* emptyValue - Boolean Default: false
+* customObjectOptions - Boolean, default: false
+* disabled - Boolean, default: false
+* dynamicAlign - Boolean, default: false
+* emptyValue - Boolean, default: false
 * errorMessage - string
-* falseValue - Boolean Default: false
-* hideSearch - Boolean Default: false
+* falseValue - Boolean, default: false
+* hideSearch - Boolean, default: false
 * invalid - boolean
 * label - String
-* menuOpened - Boolean Default: false – notifies
-* multi - Boolean Default: false
-* noChangeEvent - Boolean, Default: false
-* optionLabel - String, Default: label
+* menuOpened - Boolean, default: false – notifies
+* multi - Boolean, default: false
+* noChangeEvent - Boolean, default: false
+* optionLabel - String, default: label
 * options - Array
-* optionValue - String, Default: 'value'
+* optionValue - String, default: 'value'
 * placeholder - string
-* readonly - Boolean, Default: false
+* readonly - Boolean, default: false
 * required - boolean
 * search - String
 * selected - Number/Array - notifies
 * selectedValues - Object notifies
 * showLimitWarning - Boolean
 * shownItems - Array
-* shownItemsLimit - Number Default: 50
-* updateSelected - Boolean, Default: false
+* shownItemsLimit - Number, default: 50
+* updateSelected - Boolean, default: false
 * value - String
 
 ## Usage
@@ -159,9 +160,9 @@ customObjOptions: {
         on-value-change="_singleSelectionChanged"></etools-searchable-multiselection-menu>
 ```
 
-If you need only select an option and get option ID (most use cases) or an array of IDs(for multiselection) 
-you can use `selected` property of the element. It only works for integer values, for other types use `selectedValues` property.
-Additionally you can chose to block the change event. Example:
+If you need only to bind a custom element property to the esmm dropdown use `selected` property 
+to update dropdown's selection or get selected value(s). 
+In this case change event is automatically disabled. Example:
 
 ```html
 <p>SelectedID: [[selectedId]]</p>
@@ -172,7 +173,7 @@ Additionally you can chose to block the change event. Example:
     option-value="id"
     option-label="option_label"
     selected="{{selectedId}}"
-    update-selected no-change-event>
+    update-selected>
 </etools-searchable-multiselection-menu>
 ```
 
diff --git a/bower.json b/bower.json
index 35d0e7e..05e0d74 100644
--- a/bower.json
+++ b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "etools-searchable-multiselection-menu",
   "description": "Dropdown menu with search and multiple options selection",
-  "version": "1.0.26",
+  "version": "1.0.27",
   "license": "https://github.com/unicef-polymer/etools-searchable-multiselection-menu/blob/master/LICENSE.md",
   "main": "etools-searchable-multiselection-menu.html",
   "dependencies": {
diff --git a/demo/demo-custom-objects-as-options.html b/demo/demo-custom-objects-as-options.html
index 92559ec..c89f5cd 100644
--- a/demo/demo-custom-objects-as-options.html
+++ b/demo/demo-custom-objects-as-options.html
@@ -3,11 +3,6 @@
 
 <dom-module id="demo-custom-objects-as-options">
   <template>
-    <h3>Old way type of objects with integer value and label string (still working)</h3>
-    <etools-searchable-multiselection-menu
-        label="Searchable menu"
-        options="[[realOptions]]"
-        on-value-change="_singleSelectionChanged"></etools-searchable-multiselection-menu>
 
     <h3>Single selection, custom objects as options</h3>
     <etools-searchable-multiselection-menu
@@ -16,15 +11,7 @@ <h3>Single selection, custom objects as options</h3>
         custom-object-options
         option-value="option_key"
         option-label="option_label"
-        on-value-change="_singleSelectionChanged"></etools-searchable-multiselection-menu>
-
-    <h3>Multiple selection. Old way type of objects with integer value and label string (still working)</h3>
-    <etools-searchable-multiselection-menu
-        label="Multi searchable menu"
-        options="[[realOptions]]"
-        placeholder="Please select the options"
-        on-value-change="_multiSelectionChanged"
-        multi></etools-searchable-multiselection-menu>
+        on-value-change="_singleSelectionChanged" dynamic-align></etools-searchable-multiselection-menu>
 
     <h3>Multiple selection, custom objects as options</h3>
     <etools-searchable-multiselection-menu
@@ -35,7 +22,7 @@ <h3>Multiple selection, custom objects as options</h3>
         option-label="option_label"
         placeholder="Please select the options"
         on-value-change="_multiSelectionChanged"
-        multi></etools-searchable-multiselection-menu>
+        multi dynamic-align></etools-searchable-multiselection-menu>
 
     <h3>Custom objects as options and selected property with no change events</h3>
 
@@ -47,7 +34,7 @@ <h3>Custom objects as options and selected property with no change events</h3>
         option-value="id"
         option-label="option_label"
         selected="{{selectedId}}"
-        update-selected no-change-event></etools-searchable-multiselection-menu>
+        update-selected dynamic-align style="width: 350px;"></etools-searchable-multiselection-menu>
 
     <p><span>SelectedIDs:</span> [[_returnIdsString(selectedIds)]]</p>
     <etools-searchable-multiselection-menu
@@ -57,32 +44,10 @@ <h3>Custom objects as options and selected property with no change events</h3>
         option-value="id"
         option-label="option_label"
         selected="{{selectedIds}}"
-        update-selected no-change-event
+        update-selected
         placeholder="Please select the options"
-        multi></etools-searchable-multiselection-menu>
-
-    <h3>A few options selected by default example</h3>
-    <etools-searchable-multiselection-menu
-        label="Searchable menu, custom objects"
-        options="[[customObjOptions]]"
-        value="[[selectedObjOptions]]"
-        custom-object-options
-        option-value="option_key"
-        option-label="option_label"
-        on-value-change="_singleSelectionChanged"></etools-searchable-multiselection-menu>
-
-    <etools-searchable-multiselection-menu
-        label="Multi searchable menu, custom objects"
-        options="[[customObjOptions]]"
-        value="[[selectedObjOptions]]"
-        custom-object-options
-        option-value="id"
-        option-label="option_label"
-        selected="{{selectedIds}}"
-        update-selected no-change-event
-        placeholder="Please select the options"
-        multi></etools-searchable-multiselection-menu>
-
+        multi
+        dynamic-align></etools-searchable-multiselection-menu>
 
   </template>
   <script>
@@ -108,48 +73,29 @@ <h3>A few options selected by default example</h3>
 
           customObjOptions: {
             type: Array,
-            value: function() {
-              var opt = [];
-              for(var i = 1; i <= 100; i++) {
-                opt.push({
-                  id: i,
-                  option_key: 'opt' + i,
-                  option_label: 'Option ' + i,
-                  some_other_property: 'dummy propery for objIdx' + (i -1)
-                });
-              }
-              return opt;
-            }
-          },
-
-          selectedObjOptions: {
-            type: Array,
-            value: function() {
-              var opt = [];
-              for(var i = 3; i <= 5; i++) {
-                opt.push({
-                  id: i,
-                  option_key: 'opt' + i,
-                  option_label: 'Option ' + i,
-                  some_other_property: 'dummy propery for objIdx' + (i -1)
-                });
-              }
-              return opt;
-            }
+            value: []
           },
 
           selectedId: {
-            type: Number,
-            value: null
+            value: 1001
           },
           selectedIds: {
             type: Array,
-            value: []
+            value: [3, 5, 7, 101, 102]
           }
         },
 
         ready: function() {
-//          this.set('selectedValues',  [{value: 2, label: 'Option 2'}]);
+          //  this.set('selectedValues',  [{value: 2, label: 'Option 2'}]);
+          // this.set('selectedId', 3);
+
+          setTimeout(function() {
+            this.set('customObjOptions', this.generateOptions());
+          }.bind(this), 3000);
+          
+          // setTimeout(function() {
+          //   this.set('selectedId', 3);
+          // }.bind(this), 3000);
         },
 
         _returnIdsString: function(vals) {
@@ -162,6 +108,18 @@ <h3>A few options selected by default example</h3>
 
         _multiSelectionChanged: function(event) {
           console.log('_multiSelectionChanged', event.detail);
+        },
+        generateOptions: function() {
+          var opt = [];
+          for(var i = 1; i <= 100; i++) {
+            opt.push({
+              id: i,
+              option_key: 'opt' + i,
+              option_label: 'Option ' + i,
+              some_other_property: 'dummy propery for objIdx' + (i -1)
+            });
+          }
+          return opt;
         }
       });
 
diff --git a/demo/index.html b/demo/index.html
index a0a5915..086da49 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -27,7 +27,7 @@
 
     <div class="vertical-section-container centered">
       <h1>etools-searchable-multiselection-menu demo</h1>
-
+      
       <h2>Single selection, with search</h2>
       <demo-snippet>
         <template is="dom-bind">
@@ -131,6 +131,7 @@ <h2>Error messages and validations</h2>
           <demo-error-messages-and-validations></demo-error-messages-and-validations>
         </template>
       </demo-snippet>
+      
 
       <h2>Custom objects as options. You can specify value and label properties from object option to be used.</h2>
 
diff --git a/etools-searchable-multiselection-menu.html b/etools-searchable-multiselection-menu.html
index 68e779f..7187ea6 100644
--- a/etools-searchable-multiselection-menu.html
+++ b/etools-searchable-multiselection-menu.html
@@ -6,7 +6,7 @@
 <link rel="import" href="../iron-icon/iron-icon.html">
 <link rel="import" href="../paper-input/paper-input-container.html">
 <link rel="import" href="../paper-input/paper-input-error.html">
-<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
+<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
 
 <link rel="import" href="deletable-option-list.html">
 <!--
@@ -36,7 +36,7 @@
 
 <dom-module id="etools-searchable-multiselection-menu">
   <template>
-    <style include="iron-flex iron-flex-alignment iron-flex-factors">
+    <style>
       :host {
         display: block;
         width: 100%;
@@ -78,6 +78,10 @@
           padding-right: 24px;
           box-sizing: border-box;
         };
+        --paper-input-container-label: {
+          padding-right: 24px;
+          box-sizing: border-box;
+        };
       }
 
       #dropdownMenu {
@@ -85,6 +89,9 @@
         right: 0;
         bottom: 0;
         padding: 0;
+
+        @apply(--layout-horizontal);
+        @apply(--layout-end-justified);
       }
 
       .dropdown-trigger {
@@ -269,7 +276,7 @@
         restore-focus-on-close$="{{falseValue}}"
         on-paper-dropdown-close="_valueSelected"
         on-paper-dropdown-open="_onDropdownOpen"
-        allow-outside-scroll
+        allow-outside-scroll="[[allowOutsideScroll]]"
         dynamic-align$="[[dynamicAlign]]"
         disabled="[[_disableMenuBtn(disabled, readonly)]]"
         hidden$=[[readonly]]>
@@ -315,6 +322,10 @@
                 More than [[shownItemsLimit]] items, use the search function to reveal more
               </paper-item>
 
+              <paper-item hidden$="[[!noOptionsAvailable]]" class="warning">
+                No options available
+              </paper-item>
+
             </paper-listbox>
           </div>
         </div>
@@ -369,6 +380,10 @@
             type: Boolean,
             computed: '_computeShowLimitWarning(shownItemsLimit, shownItems)'
           },
+          noOptionsAvailable: {
+            type: Boolean,
+            computed: '_computeNoOptionsAvailable(options)'
+          },
           emptyValue: {
             type: Boolean,
             value: false
@@ -412,6 +427,10 @@
             type: Boolean,
             value: false
           },
+          allowOutsideScroll: {
+            type: Boolean,
+            value: false
+          },
           dynamicAlign: {
             type: Boolean,
             value: false
@@ -429,21 +448,27 @@
             value: 'label'
           },
           selected: {
-            // this will be populated with integer value, in case of single selection,
-            // or will be an Array of integer values (example: you may need an array of integer values selected, IDs,
-            // without having the need to map the selectedValues in parent and convert to integer values)
-            // it will work only if optionValue is set to 'id'
             notify: true
           },
+          _prevSelectedValues: {
+            type: Object
+          },
           updateSelected: {
             type: Boolean,
-            value: false
+            value: false,
+            observer: '_updateSelectedFlagChanged'
           },
           noChangeEvent: {
             type: Boolean,
             value: false
           }
         },
+
+        observers: [
+          '_selectedChanged(selected, options)',
+          '_optionsLengthChanged(options.length)'
+        ],
+
         ready: function() {
           if (this.autoValidate === true && this.multi === true) {
             // autoValidate for multi selection will not work, we will use a new flag in this case
@@ -498,6 +523,13 @@
           return shownItems.length >= limit;
         },
 
+        _computeNoOptionsAvailable: function(options) {
+          if (!Array.isArray(options) || (Array.isArray(options) && options.length === 0)) {
+            return true;
+          }
+          return false;
+        },
+
         _simpleRequired: function(required) {
           return !this.multi && required;
         },
@@ -625,23 +657,115 @@
           return itemValue;
         },
 
+        _updateSelectedFlagChanged: function(updateSelected) {
+          if (updateSelected) {
+            // disable change events if this flag is `true`
+            this.set('noChangeEvent', true);
+          }
+        },
+
+        _selectedChanged: function(selected, options) {
+          if (!this.updateSelected) {
+            return;
+          }
+          var currentValue = null;
+          var notFoundValue = [];
+          if (this.multi) {
+            currentValue = [];
+            if (selected instanceof Array && selected.length > 0) {
+              if (options instanceof Array && options.length > 0) {
+                selected.forEach(function(selectedVal) {
+                  var s = this._prepareValue(selectedVal);
+                  notFoundValue.push(s);
+                  for (var i = 0; i < options.length; i++) {
+                    if (this._prepareValue(options[i][this.optionValue]) === s) {
+                      currentValue.push(options[i]);
+                      notFoundValue.splice(notFoundValue.indexOf(s), 1);
+                      break;
+                    }
+                  }
+                }.bind(this));
+              }
+            }
+            
+          } else {
+            if ((selected && (typeof selected === 'string' || typeof selected === 'number')) && 
+                options instanceof Array && options.length > 0) {
+              var selectedVal = this._prepareValue(selected);
+              notFoundValue.push(selectedVal);
+              for (var i = 0; i < options.length; i++) {
+                if (this._prepareValue(options[i][this.optionValue]) === selectedVal) {
+                  currentValue = options[i];
+                  notFoundValue.splice(notFoundValue.indexOf(selectedVal), 1);
+                  break;
+                }
+              }
+            }
+          }
+          
+          if (JSON.stringify(this.value) !== JSON.stringify(currentValue)) {
+            this.set('value', currentValue);
+          }
+
+          // not found selected values in options
+          if (notFoundValue.length > 0) {
+            var warnMsg = '[etools-esmm] Selected ';
+            if (notFoundValue.length === 1) {
+              warnMsg += 'value ';
+            } else {
+              warnMsg += 'values '
+            }
+            warnMsg += notFoundValue.join(', ') + ' not found in dropdown\'s options!' ;
+            console.warn(warnMsg);
+          }
+        },
+
         _updateSelected: function(selectedValues) {
-          if (!this.updateSelected || this.optionValue !== 'id'
-              || !selectedValues || Array.isArray(selectedValues) && selectedValues.length === 0) {
-            // do not update selected value
+          if (JSON.stringify(selectedValues) === JSON.stringify(this._prevSelectedValues)) {
             return;
           }
+          this.debounce('updateSelectedValue', function() {
+            if (!this.updateSelected || !selectedValues ||
+              Array.isArray(selectedValues) && selectedValues.length === 0) {
+              // do not update selected value
+              return;
+            }
+            var selectedVals = null;
+            if (this.multi && Array.isArray(selectedValues)) {
+              // multiselection
+              // selected will be empty array if selectedValues.length === 0
+              selectedVals = [];
+              if (selectedValues.length > 0) {
+                selectedVals = selectedValues.map(function(s) {
+                  return this._prepareValue(s);
+                }.bind(this));
+              }
+            }
 
-          if (this.multi && Array.isArray(selectedValues) && selectedValues.length > 0) {
-            var selectedVals = selectedValues.map(function(s) {
-              return parseInt(s, 10);
-            });
+            if (!this.multi) {
+              // single selection
+              if (selectedValues && !(typeof selectedValues === 'string' && selectedValues === '')) {
+                selectedVals = this._prepareValue(selectedValues);
+              }
+            }
+            this.set('_prevSelectedValues', selectedVals);
             this.set('selected', selectedVals);
-          }
+          }.bind(this), 50);
+        },
 
-          if (!this.multi) {
-            this.set('selected', parseInt(selectedValues, 10));
+        _prepareValue: function(value) {
+          if (typeof value === 'number') {
+            return value;
           }
+          if (typeof value === 'string') {
+            var val = parseInt(value, 10);
+            if (isNaN(val)) {
+              return value;
+            } else {
+              return val;
+            }
+          }
+          return value;
         },
 
         _removeItem: function(event, details) {
@@ -684,11 +808,31 @@
             return;
           }
           this.openedClass = 'dropdown-opened';
+          var ironDropdown = this._getIronDropdown();
+          if (ironDropdown) {
+            // set position target to align dropdown content properly
+            ironDropdown.set('positionTarget', this.$.main);
+            ironDropdown.style.width = this.$.main.offsetWidth + 'px';
+            var style = ironDropdown.querySelector('.dropdown-content').style;
+            style.overflow = 'hidden';
+          }
+        },
+
+        _getIronDropdown: function() {
           var dropDown = this.$.dropdownMenu;
-          dropDown.$.dropdown.style.width = this.$.main.offsetWidth + 'px';
-          var style = dropDown.$.dropdown.querySelector('.dropdown-content').style;
-          style.overflow = 'hidden';
-          style.marginTop = '-20px';
+          var ironDropdown = dropDown.$.dropdown;
+          return ironDropdown;
+        },
+
+        _resizeDropdown: function() {
+          var ironDropdown = this._getIronDropdown();
+          if (ironDropdown) {
+            ironDropdown.notifyResize();
+          }
+        },
+
+        _optionsLengthChanged: function(optionsLength) {
+          this._resizeDropdown();
         },
 
         _fireValueChangeEvent: function() {