diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index c7dd2cb3..09d2739e 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/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 { diff --git a/source/Ox.UI/js/Form/Ox.Input.js b/source/Ox.UI/js/Form/Ox.Input.js index ce5c622d..83fda05a 100644 --- a/source/Ox.UI/js/Form/Ox.Input.js +++ b/source/Ox.UI/js/Form/Ox.Input.js @@ -13,6 +13,7 @@ Ox.Input Input Element autocompleteReplaceCorrect if true, only valid values can be entered autocompleteSelect if true, menu is displayed autocompleteSelectHighlight if true, value in menu is highlighted + autocompleteSelectMaxWidth Maximum width of autocomplete menu, or 0 autocompleteSelectSubmit if true, submit input on menu selection autocorrect ('email', 'float', 'int', 'phone', 'url'), or 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 diff --git a/source/Ox.UI/js/Menu/Ox.Menu.js b/source/Ox.UI/js/Menu/Ox.Menu.js index 38c65657..dfacad0f 100644 --- a/source/Ox.UI/js/Menu/Ox.Menu.js +++ b/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?; diff --git a/source/Ox.UI/js/Menu/Ox.MenuItem.js b/source/Ox.UI/js/Menu/Ox.MenuItem.js index e86fe9c0..8daa2a72 100644 --- a/source/Ox.UI/js/Menu/Ox.MenuItem.js +++ b/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 = $('', { 'class': 'OxCell OxTitle', + css: self.options.maxWidth ? {maxWidth: self.options.maxWidth} : {}, html: self.options.title[0] }) )