Changeset 7443

Timestamp:

Feb 19, 2018, 1:42:01 PM (5 years ago)

Author:

Nicklas Nordborg

Message:

Fixes #2109: Name of item list in the item list filter is truncated

Location:

branches/3.11-stable/www/include

Files:

• scripts/main-2.js (modified) (8 diffs)
• styles/main.css (modified) (2 diffs)

branches/3.11-stable/www/include/scripts/main-2.js

@@ -3832 +3832 @@
     // Position the dropdown
     var pos = select.getFixedDropDownPosition(element);
-    dropdownDiv.style.width = (pos.width)+'px';
-    dropdownDiv.style.left = (pos.left)+'px';
-  
+    dropdownDiv.style.left = pos.left;
+    dropdownDiv.style.right = pos.right;
+    dropdownDiv.style.width = pos.width;
+    dropdownDiv.style.minWidth = pos.minWidth;
+    dropdownDiv.style.maxWidth = pos.maxWidth;
+
     // Show it
     Doc.addClass(element, 'active');
@@ -3852 +3855 @@
     // Position the dropdown div relative the  main element
     var fpos = Doc.getElementPosition(element);
-    
-    // Assume the same as the main element
+
     var dpos = {};
-    dpos.left = fpos.left+1;
-    dpos.width = fpos.width;
-    
-    if (dpos.width < 150)
-    {
-      // The dropdown should be at least 150px wide.
-      dpos.width = 150;
-      
+
+    // The default is to make the drop-down the same size as the filter
+    dpos.left = (fpos.left+1)+'px';
+    dpos.width = (fpos.width)+'px';
+    dpos.right = 'auto';
+    dpos.minWidth = (Math.max(fpos.width, 150))+'px';
+    dpos.maxWidth = 'auto';
+    
+    if (fpos.width < 300)
+    {
+      // If the width is smaller than 300 we should open up either
+      // to the left or to the right, we need to check how close we are to
+      // the right side
       try
       {
@@ -3874 +3881 @@
         }
         if (p==null) p = document.body;
-        
+
         // Get position data for the parent
-        // +30 should be safe to account for a scrollbar
+        // +16 should be safe to account for a scrollbar
         var ppos = Doc.getElementPosition(p);
-        var scrollbar = p.scrollHeight > p.clientHeight ? 30 : 0;
+        var scrollbar = p.scrollHeight > p.clientHeight ? 16 : 0;
         var maxRight = ppos.width + p.scrollLeft - scrollbar;
-        
-        // Right-align the dropdown if it overflows
-        if (dpos.left + dpos.width > maxRight)
+
+        dpos.width = 'auto';
+        dpos.maxWidth = '300px';
+        if (fpos.left + 300 > maxRight)
         {
-          dpos.left = fpos.right - 148;
+          // Align to right
+          dpos.left = 'auto';
+          dpos.right = (ppos.right-fpos.right-scrollbar)+'px';
           if (fpos.right > maxRight)
           {
@@ -3902 +3912 @@
       }
     }
-    
     return dpos;
   }
@@ -4061 +4070 @@
       optionDiv.innerHTML = options[i].value;
       options[i].div = optionDiv;
+      optionDiv.title = options[i].value;
       allOptionsDiv.appendChild(optionDiv);
       Events.addEventHandler(optionDiv, 'click', internal.optionOnClick);
@@ -4251 +4261 @@
     // Position the dropdown
     var pos = select.getFixedDropDownPosition(activeSelect);
-    dropdownDiv.style.width = (pos.width)+'px';
-    dropdownDiv.style.left = (pos.left)+'px';
+    dropdownDiv.style.left = pos.left;
+    dropdownDiv.style.right = pos.right;
+    dropdownDiv.style.width = pos.width;
+    dropdownDiv.style.minWidth = pos.minWidth;
+    dropdownDiv.style.maxWidth = pos.maxWidth;
   }
   
@@ -4296 +4309 @@
     // Position the dropdown
     var pos = MultiSelect.getFixedDropDownPosition(element);
-    dropdownDiv.style.width = (pos.width)+'px';
-    dropdownDiv.style.left = (pos.left)+'px';
+    dropdownDiv.style.left = pos.left;
+    dropdownDiv.style.right = pos.right;
+    dropdownDiv.style.width = pos.width;
+    dropdownDiv.style.minWidth = pos.minWidth;
+    dropdownDiv.style.maxWidth = pos.maxWidth;
     
     // Show it
@@ -4647 +4663 @@
     // Position the dropdown
     var pos = MultiSelect.getFixedDropDownPosition(activeEnum);
-    dropdownDiv.style.width = (pos.width)+'px';
-    dropdownDiv.style.left = (pos.left)+'px';
+    dropdownDiv.style.left = pos.left;
+    dropdownDiv.style.right = pos.right;
+    dropdownDiv.style.width = pos.width;
+    dropdownDiv.style.minWidth = pos.minWidth;
+    dropdownDiv.style.maxWidth = pos.maxWidth;
   }
   

branches/3.11-stable/www/include/styles/main.css

@@ -977 +977 @@
   margin-left: -2px;
   margin-top: 2px;
+  min-width: 150px;
 }
 
 div.smartenum
 {
-  height: 20em;
+  min-height: 15em;
+  max-height: 30em;
 }
 
@@ -1045 +1047 @@
 .multioptionoptions 
 {
-  height: 20em;
+  min-height: 15em;
+  max-height: 30em;
   overflow: auto;
 }