Fix for #2157 - ComboBox size problems

svn changeset:5685/svn branch:trunk

WebContent/ITMILL/themes/default/select/select.css

@@ -74,9 +74,10 @@
 
 .i-filterselect-input {
 	background: transparent url(img/bg-left-filter.png) no-repeat;
+	float: left;
 	border: none;
 	height: 20px;
-	margin: 0;
+	margin: 0px;
 	padding: 3px 0 0 4px;
 	font-size: 13px;
 }
@@ -87,12 +88,10 @@
 
 .i-filterselect-button {
 	float: right;
-	margin-left: -23px;
 	width: 25px;
 	height: 23px;
 	cursor: pointer;
 	background: transparent url(img/bg-right-filter.png);
-	position: relative;
 }
 .i-filterselect-button:hover {
 	background-position: bottom left;
@@ -220,20 +219,14 @@
 * html .i-filterselect {
 
 }
-* html .i-filterselect-input {
-	margin-top: -1px;
-}
 
 *+html .i-filterselect-input {
 	margin-top: -1px;
 }
-* html .i-filterselect-button {
-	position: static;
-	margin-top: -24px;
-}
+
+
 *+html .i-filterselect-button {
-	position: static;
-	margin-top: -24px;
+		margin-top: -1px;
 }
 
 

src/com/itmill/toolkit/terminal/gwt/client/Util.java

@@ -46,8 +46,8 @@ public class Util {
         Map<Container, Set<Paintable>> childWidgets = new HashMap<Container, Set<Paintable>>();
 
         for (Widget widget : widgets) {
-//            ApplicationConnection.getConsole().log(
-//                    "Widget " + Util.getSimpleName(widget) + " size updated");
+            // ApplicationConnection.getConsole().log(
+            // "Widget " + Util.getSimpleName(widget) + " size updated");
             Widget parent = widget.getParent();
             while (parent != null && !(parent instanceof Container)) {
                 parent = parent.getParent();
@@ -199,6 +199,9 @@ public class Util {
         String originalWidth = DOM.getStyleAttribute(element, "width");
         int originalOffsetWidth = element.getOffsetWidth();
         int widthGuess = (originalOffsetWidth - paddingGuess);
+        if (widthGuess < 1) {
+            widthGuess = 1;
+        }
         DOM.setStyleAttribute(element, "width", widthGuess + "px");
         int padding = element.getOffsetWidth() - widthGuess;
 
@@ -211,9 +214,13 @@ public class Util {
         if (BrowserInfo.get().isIE6()) {
             String originalWidth = DOM.getStyleAttribute(element, "width");
             int originalOffsetWidth = element.getOffsetWidth();
+            if (originalOffsetWidth < 1) {
+                originalOffsetWidth = 10;
+            }
+
             DOM.setStyleAttribute(element, "width", originalOffsetWidth + "px");
-            borders = element.getOffsetWidth()
-                    - element.getPropertyInt("clientWidth");
+            int cw = element.getPropertyInt("clientWidth");
+            borders = element.getOffsetWidth() - cw;
 
             DOM.setStyleAttribute(element, "width", originalWidth);
         } else {

src/com/itmill/toolkit/terminal/gwt/client/ui/IFilterSelect.java

@@ -482,6 +482,8 @@ public class IFilterSelect extends Composite implements Paintable, Field,
     // This handles the special case where are not filtering yet and the
     // selected value has changed on the server-side. See #2119
     private boolean popupOpenerClicked;
+    private String width = null;
+    private int elementPadding = -1;
     private static final String CLASSNAME_EMPTY = "empty";
     private static final String ATTR_EMPTYTEXT = "emptytext";
 
@@ -635,6 +637,15 @@ public class IFilterSelect extends Composite implements Paintable, Field,
 
         popupOpenerClicked = false;
 
+        if (width == null) {
+            /*
+             * When the width is not specified we must specify width for root
+             * div so the popupopener won't wrap to the next line and also so
+             * the size of the combobox won't change over time.
+             */
+            int w = tb.getOffsetWidth() + popupOpener.getOffsetWidth();
+            super.setWidth(w + "px");
+        }
     }
 
     public void onSuggestionSelected(FilterSelectSuggestion suggestion) {
@@ -815,11 +826,32 @@ public class IFilterSelect extends Composite implements Paintable, Field,
 
     @Override
     public void setWidth(String width) {
+        if (width == null || width.equals("")) {
+            this.width = null;
+        } else {
+            this.width = width;
+        }
+
         super.setWidth(width);
 
-        int padding = Util.measureHorizontalPadding(tb.getElement(), 4);
-        tb.setWidth((getOffsetWidth() - padding - popupOpener.getOffsetWidth())
-                + "px");
+        if (this.width != null) {
+            /*
+             * When the width is specified we also want to explicitly specify
+             * widths for textbox and popupopener
+             */
+            int textboxWidth = getOffsetWidth() - getElementPadding()
+                    - popupOpener.getOffsetWidth();
+            if (textboxWidth < 0) {
+                textboxWidth = 0;
+            }
+            tb.setWidth(textboxWidth + "px");
+        }
+    }
 
+    public int getElementPadding() {
+        if (elementPadding < 0) {
+            elementPadding = Util.measureHorizontalPadding(tb.getElement(), 4);
+        }
+        return elementPadding;
     }
 }

src/com/itmill/toolkit/tests/tickets/Ticket2157.java

@@ -0,0 +1,107 @@
+package com.itmill.toolkit.tests.tickets;
+
+import com.itmill.toolkit.Application;
+import com.itmill.toolkit.ui.ComboBox;
+import com.itmill.toolkit.ui.OrderedLayout;
+import com.itmill.toolkit.ui.Panel;
+import com.itmill.toolkit.ui.Window;
+
+public class Ticket2157 extends Application {
+
+    public void init() {
+        Window w = new Window(getClass().getSimpleName());
+        setMainWindow(w);
+        // setTheme("tests-tickets");
+        createUI((OrderedLayout) w.getLayout());
+    }
+
+    private void createUI(OrderedLayout layout) {
+        OrderedLayout ol;
+        Panel p;
+        ComboBox cb;
+
+        ol = new OrderedLayout();
+        p = new Panel(ol);
+        p.setCaption("Combobox without width");
+        // p.setWidth("100px");
+        cb = new ComboBox();
+        // cb.setCaption("A combobox");
+        // cb.setWidth("100%");
+        p.addComponent(cb);
+        layout.addComponent(p);
+
+        ol = new OrderedLayout();
+        p = new Panel(ol);
+        p.setCaption("Combobox without width with caption");
+        // p.setWidth("100px");
+        cb = new ComboBox();
+        cb.setCaption("A combobox");
+        // cb.setWidth("100px");
+        p.addComponent(cb);
+        layout.addComponent(p);
+
+        //
+        ol = new OrderedLayout();
+        p = new Panel(ol);
+        p.setCaption("Combobox 100px wide");
+        // p.setWidth("100px");
+        cb = new ComboBox();
+        // cb.setCaption("A combobox");
+        cb.setWidth("100px");
+        p.addComponent(cb);
+        layout.addComponent(p);
+
+        ol = new OrderedLayout();
+        p = new Panel(ol);
+        p.setCaption("Combobox 100px wide with caption");
+        // p.setWidth("100px");
+        cb = new ComboBox();
+        cb.setCaption("A combobox");
+        cb.setWidth("100px");
+        p.addComponent(cb);
+        layout.addComponent(p);
+
+        ol = new OrderedLayout();
+        p = new Panel(ol);
+        p.setCaption("Combobox 500px wide");
+        // p.setWidth("500px");
+        cb = new ComboBox();
+        // cb.setCaption("A combobox");
+        cb.setWidth("500px");
+        p.addComponent(cb);
+        layout.addComponent(p);
+
+        ol = new OrderedLayout();
+        p = new Panel(ol);
+        p.setCaption("Combobox 500px wide with caption");
+        // p.setWidth("500px");
+        cb = new ComboBox();
+        cb.setCaption("A combobox");
+        cb.setWidth("500px");
+        p.addComponent(cb);
+        layout.addComponent(p);
+
+        ol = new OrderedLayout();
+        p = new Panel(ol);
+        p.setCaption("Combobox 100% wide");
+        p.setWidth("200px");
+        ol.setWidth("100%");
+        cb = new ComboBox();
+        // cb.setCaption("A combobox");
+        cb.setWidth("100%");
+        p.addComponent(cb);
+        layout.addComponent(p);
+
+        ol = new OrderedLayout();
+        p = new Panel(ol);
+        p.setCaption("Combobox 100% wide with caption");
+        p.setWidth("200px");
+        ol.setWidth("100%");
+        cb = new ComboBox();
+        cb.setCaption("A combobox");
+        cb.setWidth("100%");
+        p.addComponent(cb);
+        layout.addComponent(p);
+
+    }
+}