allow for max width in menus

source/Ox.UI/css/Ox.UI.css

@@ -1173,6 +1173,7 @@ Lists
     white-space: nowrap;
 }
 .OxTextList .OxHead .OxTitle img {
+    display: block;
     width: 10px;
     height: 10px;
     margin: 1px 0 0 -1px;
@@ -1248,6 +1249,7 @@ Lists
     padding: 0;
 }
 .OxTextList .OxItem .OxCell > img {
+    display: block;
     width: 16px;
     height: 16px;
     margin: -1px 0 0 -4px;
@@ -1528,6 +1530,8 @@ Menus
 }
 .OxMenu .OxItem .OxCell.OxTitle {
     padding-left: 4px;
+    text-overflow: ellipsis;
+    overflow: hidden;
     white-space: nowrap;
 }
 .OxMenu .OxItem .OxCell.OxModifiers {

source/Ox.UI/js/Form/Ox.Input.js

@@ -13,6 +13,7 @@ Ox.Input <f:Ox.Element> Input Element
         autocompleteReplaceCorrect  <b> if true, only valid values can be entered
         autocompleteSelect          <b> if true, menu is displayed
         autocompleteSelectHighlight <b> if true, value in menu is highlighted
+        autocompleteSelectMaxWidth  <n|0> Maximum width of autocomplete menu, or 0
         autocompleteSelectSubmit    <b> if true, submit input on menu selection
         autocorrect                 <s|r|f|null> ('email', 'float', 'int', 'phone', 'url'), or
                                     <r> regexp(value), or
@@ -73,6 +74,7 @@ Ox.Input = function(options, self) {
                 autocompleteSelect: false,
                 autocompleteSelectHighlight: false,
                 autocompleteSelectMax: 0,
+                autocompleteSelectMaxWidth: 0,
                 autocompleteSelectSubmit: false,
                 autovalidate: null,
                 changeOnKeypress: false,
@@ -424,6 +426,7 @@ Ox.Input = function(options, self) {
         var menu = Ox.Menu({
                 element: self.$input,
                 id: self.options.id + 'Menu', // fixme: we do this in other places ... are we doing it the same way? var name?,
+                maxWidth: self.options.autocompleteSelectMaxWidth,
                 offset: {
                     left: 4,
                     top: 0

source/Ox.UI/js/Menu/Ox.Menu.js

@@ -35,6 +35,7 @@ Ox.Menu = function(options, self) {
                 id: '',
                 items: [],
                 mainmenu: null,
+                maxWidth: 0,
                 offset: {
                     left: 0,
                     top: 0
@@ -198,6 +199,7 @@ Ox.Menu = function(options, self) {
             var position;
             if ('id' in item) {
                 that.items.push(Ox.MenuItem(Ox.extend(item, {
+                    maxWidth: self.options.maxWidth,
                     menu: that,
                     position: position = that.items.length
                 })).data('position', position).appendTo(that.$content)); // fixme: jquery bug when passing {position: position}? does not return the object?;

source/Ox.UI/js/Menu/Ox.MenuItem.js

@@ -32,6 +32,7 @@ Ox.MenuItem = function(options, self) {
                 id: '',
                 items: [],
                 keyboard: '',
+                maxWidth: 0,
                 menu: null, // fixme: is passing the menu to 100s of menu items really memory-neutral?
                 position: 0,
                 title: [],
@@ -70,6 +71,7 @@ Ox.MenuItem = function(options, self) {
         .append(
             that.$title = $('<td>', {
                 'class': 'OxCell OxTitle',
+                css: self.options.maxWidth ? {maxWidth: self.options.maxWidth} : {},
                 html: self.options.title[0]
             })
         )