fix dropdown list width in JS
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/7d030904 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/7d030904 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/7d030904 Branch: refs/heads/develop Commit: 7d030904cc44adaa4e71eb0efc67dd338faa65ac Parents: 2fb5a50 Author: Alex Harui <[email protected]> Authored: Mon Sep 14 23:36:58 2015 -0700 Committer: Alex Harui <[email protected]> Committed: Mon Sep 14 23:36:58 2015 -0700 ---------------------------------------------------------------------- frameworks/projects/Flat/as/defaults.css | 8 ++++ .../js/src/org/apache/flex/flat/DropDownList.js | 43 +++++++++++++++++--- 2 files changed, 45 insertions(+), 6 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7d030904/frameworks/projects/Flat/as/defaults.css ---------------------------------------------------------------------- diff --git a/frameworks/projects/Flat/as/defaults.css b/frameworks/projects/Flat/as/defaults.css index 213f31f..32ca37d 100644 --- a/frameworks/projects/Flat/as/defaults.css +++ b/frameworks/projects/Flat/as/defaults.css @@ -291,6 +291,14 @@ DateField { transition: border-color .25s, color .25s; } +.dropdown-label { + color: inherit; + background-color: inherit; + font: inherit; + text-align: left; + display: inline-block; + } + HContainer { IBeadView: ClassReference("org.apache.flex.html.beads.ContainerView"); http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7d030904/frameworks/projects/Flat/js/src/org/apache/flex/flat/DropDownList.js ---------------------------------------------------------------------- diff --git a/frameworks/projects/Flat/js/src/org/apache/flex/flat/DropDownList.js b/frameworks/projects/Flat/js/src/org/apache/flex/flat/DropDownList.js index 1916d5b..9b242d8 100644 --- a/frameworks/projects/Flat/js/src/org/apache/flex/flat/DropDownList.js +++ b/frameworks/projects/Flat/js/src/org/apache/flex/flat/DropDownList.js @@ -16,6 +16,7 @@ goog.provide('org.apache.flex.flat.DropDownList'); goog.require('org.apache.flex.core.ListBase'); goog.require('org.apache.flex.html.beads.models.ArraySelectionModel'); +goog.require('org.apache.flex.utils.CSSUtils'); goog.require('org.apache.flex.utils.Language'); @@ -47,7 +48,7 @@ org.apache.flex.flat.DropDownList.prototype.FLEXJS_CLASS_INFO = */ org.apache.flex.flat.DropDownList.prototype.createElement = function() { - var button, input; + var button, caret; this.element = document.createElement('div'); @@ -58,7 +59,11 @@ org.apache.flex.flat.DropDownList.prototype.createElement = goog.events.listen(button, 'click', goog.bind(this.buttonClicked, this)); this.element.appendChild(button); - var caret = document.createElement('span'); + this.label = document.createElement('span'); + this.label.className = 'dropdown-label'; + button.appendChild(this.label); + this.caret = caret = document.createElement('span'); + button.appendChild(caret); caret.className = 'dropdown-caret'; this.positioner = this.element; @@ -71,6 +76,7 @@ org.apache.flex.flat.DropDownList.prototype.createElement = button.flexjs_wrapper = this; this.element.flexjs_wrapper = this; + this.label.flexjs_wrapper = this; caret.flexjs_wrapper = this; return this.element; @@ -181,6 +187,31 @@ org.apache.flex.flat.DropDownList.prototype.buttonClicked = }; +/** + * @override + */ +org.apache.flex.flat.DropDownList.prototype.addedToParent = function() { + org.apache.flex.flat.DropDownList.base(this, 'addedToParent'); + var el = /** @type {Element} */ (this.button); + var cv = window.getComputedStyle(el); + var s = /** @type {string} */ (cv.paddingLeft); + var pl = org.apache.flex.utils.CSSUtils.toNumber(s); + s = /** @type {string} */ (cv.paddingRight); + var pr = org.apache.flex.utils.CSSUtils.toNumber(s); + s = /** @type {string} */ (cv.borderLeftWidth); + var bl = org.apache.flex.utils.CSSUtils.toNumber(s); + s = /** @type {string} */ (cv.borderRightWidth); + var br = org.apache.flex.utils.CSSUtils.toNumber(s); + var caretWidth = this.caret.offsetWidth; + // is 4 for spacing between spans? + var fluff = pl + pr + bl + br + caretWidth + 1 + 4; + var labelWidth = this.width - fluff; + var strWidth = labelWidth.toString(); + strWidth += 'px'; + this.label.style.width = strWidth; +}; + + Object.defineProperties(org.apache.flex.flat.DropDownList.prototype, { /** @export */ className: { @@ -238,9 +269,9 @@ Object.defineProperties(org.apache.flex.flat.DropDownList.prototype, { this.model.selectedIndex = value; var lf = this.labelField; if (lf) - this.button.innerHTML = this.selectedItem[lf] + '<span class="dropdown-caret"/>'; + this.label.innerHTML = this.selectedItem[lf]; else - this.button.innerHTML = this.selectedItem + '<span class="dropdown-caret"/>'; + this.label.innerHTML = this.selectedItem; } }, /** @export */ @@ -257,9 +288,9 @@ Object.defineProperties(org.apache.flex.flat.DropDownList.prototype, { this.model.selectedItem = value; var lf = this.labelField; if (lf) - this.button.innerHTML = this.selectedItem[lf] + '<span class="dropdown-caret"/>'; + this.label.innerHTML = this.selectedItem[lf]; else - this.button.innerHTML = this.selectedItem + '<span class="dropdown-caret"/>'; + this.label.innerHTML = this.selectedItem; } } });
