You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2018/09/17 21:29:22 UTC
[royale-asjs] branch develop updated: fix combobox size in IE11
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new 90209de fix combobox size in IE11
90209de is described below
commit 90209def75fce0856368f9e4135d19e6df083ca4
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Mon Sep 17 23:29:15 2018 +0200
fix combobox size in IE11
---
.../src/main/royale/ComboBoxPlayGround.mxml | 47 ++++++++++++++++++++++
.../projects/Jewel/src/main/resources/defaults.css | 4 ++
.../royale/jewel/beads/views/ComboBoxView.as | 7 +---
.../Jewel/src/main/sass/components/_combobox.sass | 1 +
.../Jewel/src/main/sass/components/_textinput.sass | 1 +
5 files changed, 55 insertions(+), 5 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/ComboBoxPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ComboBoxPlayGround.mxml
index 86e38d3..106e4a5 100644
--- a/examples/royale/JewelExample/src/main/royale/ComboBoxPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ComboBoxPlayGround.mxml
@@ -32,6 +32,13 @@ limitations under the License.
private function avengersComboBoxSelectedItem(event:Event):void {
avengersComboBoxResult.html = "<strong>ComboBox selectedItem:</strong> " + event.target.selectedItem.label;
}
+
+ // private function onValueChange(event:Event):void
+ // {
+ // // trace("onValueChange"); // if target IE11 you must use this event handler
+ // cmb.width = slider_w.value;
+ // // button.height = slider_h.value;
+ // }
]]>
</fx:Script>
@@ -119,4 +126,44 @@ limitations under the License.
</j:GridCell>
</j:Grid>
+ <!-- <j:Slider id="slider_w" width="250" value="250" minimum="100" maximum="500" valueChange="onValueChange(event)"/>
+ <j:Label text="combo.width='{watchmenComboBox.width}'"/>
+
+ <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
+ <j:ComboBox id="cmb" labelField="label" dataProvider="{listModel.avengers}"/>
+ <j:Label text="Some text 1"/>
+ </j:HGroup>
+ <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
+ <j:ComboBox width="10" labelField="label" dataProvider="{listModel.avengers}"/>
+ <j:Label text="Some text 2"/>
+ </j:HGroup>
+ <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
+ <j:ComboBox width="50" labelField="label" dataProvider="{listModel.avengers}"/>
+ <j:Label text="Some text 3"/>
+ </j:HGroup>
+ <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
+ <j:ComboBox width="150" labelField="label" dataProvider="{listModel.avengers}"/>
+ <j:Label text="Some text 4"/>
+ </j:HGroup>
+ <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
+ <j:ComboBox width="200" labelField="label" dataProvider="{listModel.avengers}"/>
+ <j:Label text="Some text 5"/>
+ </j:HGroup>
+ <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
+ <j:ComboBox width="250" labelField="label" dataProvider="{listModel.avengers}"/>
+ <j:Label text="Some text 6"/>
+ </j:HGroup>
+ <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
+ <j:ComboBox width="300" labelField="label" dataProvider="{listModel.avengers}"/>
+ <j:Label text="Some text 7"/>
+ </j:HGroup>
+ <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
+ <j:ComboBox width="350" labelField="label" dataProvider="{listModel.avengers}"/>
+ <j:Label text="Some text 8"/>
+ </j:HGroup>
+ <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
+ <j:ComboBox width="400" labelField="label" dataProvider="{listModel.avengers}"/>
+ <j:Label text="Some text 9"/>
+ </j:HGroup> -->
+
</j:SectionContent>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index d3d5ba9..a50114b 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -267,6 +267,9 @@ j|ControlBar {
.jewel.combobox {
display: inline-flex;
}
+.jewel.combobox .jewel.textinput {
+ display: block;
+}
.jewel.combobox .jewel.button::before {
margin: 0;
padding: 0;
@@ -3346,6 +3349,7 @@ j|TableItemRenderer {
appearance: none;
margin: 0;
padding: 0.68em 1.12em;
+ width: 100%;
max-width: 100%;
flex: 1 0 auto;
outline: none;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ComboBoxView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ComboBoxView.as
index 2da2721..fd0f8f7 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ComboBoxView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ComboBoxView.as
@@ -290,11 +290,8 @@ package org.apache.royale.jewel.beads.views
private var comboList:ComboBoxList;
/**
- * When set to "auto" this resize handler monitors the width of the app window
- * and switch between fixed and float modes.
- *
- * Note:This could be done with media queries, but since it handles open/close
- * maybe this is the right way
+ * Adapt the popup list to the right position taking into account
+ * if we are in DESKTOP screen size or in PHONE/TABLET screen size
*
* @langversion 3.0
* @playerversion Flash 10.2
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_combobox.sass b/frameworks/projects/Jewel/src/main/sass/components/_combobox.sass
index 8ee5659..80d88e0 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_combobox.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_combobox.sass
@@ -32,6 +32,7 @@ $combobox-button-yoffset: calc(50% - #{$combobox-button-size/2})
.jewel.textinput
// width: $combobox-input-width
+ display: block // this makes the combobox adapts to the right size in IE11
.jewel.button
// width: $combobox-button-width
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass b/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
index 20f20a7..8700191 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
@@ -34,6 +34,7 @@ $textinput-padding-horizontal: 1.12em !default
margin: $textinput-margin
padding: $textinput-padding-vertical $textinput-padding-horizontal
+ width: 100%
max-width: 100%
flex: 1 0 auto