Merge pull request #1671 from girder/filter-in-item-list-dialog

Fix filter input appearance in item lists in dialogs

CHANGELOG.md

@@ -11,7 +11,7 @@
 - Update item lists check for large images when toggling recurse ([#1654](../../pull/1654))
 - Support named item lists ([#1665](../../pull/1665))
 - Add options to group within item lists ([#1666](../../pull/1666))
-- Make the filter field in item lists wider ([#1669](../../pull/1669))
+- Make the filter field in item lists wider ([#1669](../../pull/1669), [#1671](../../pull/1671))
 - Add a navigate option to item lists ([#1659](../../pull/1659))
 
 ### Changes

girder/girder_large_image/web_client/stylesheets/itemList.styl

@@ -116,16 +116,6 @@ ul.g-item-list[metadata-columns="0"]
 
 .li-item-list-filter
   padding-left 12px
-  flex 1
-  display flex
-  align-items baseline
-
-  input
-    flex 1
-
-  .li-item-list-filter-clear
-    cursor pointer
-    margin-right 20px
 
 @media (min-width 768px)
   .modal-dialog.li-item-list-dialog
@@ -145,9 +135,27 @@ ul.g-item-list[metadata-columns="0"]
     padding-left 5px
     font-weight normal
 
-.g-hierarchy-widget .g-hierarchy-actions-header
+.g-hierarchy-widget .g-hierarchy-actions-header.li-item-list-filter-parent
   display flex
   align-items baseline
 
   button.g-checked-actions-button
     float unset
+
+  .li-item-list-filter
+    flex 1
+    display flex
+    align-items baseline
+
+    input
+      flex 1
+
+    .li-item-list-filter-clear
+      cursor pointer
+      margin-right 20px
+
+.g-hierarchy-widget .g-hierarchy-breadcrumb-bar ol.breadcrumb.li-item-list-filter-parent
+  white-space wrap
+
+  .li-item-list-filter
+    white-space nowrap

girder/girder_large_image/web_client/views/itemList.js

@@ -506,6 +506,7 @@ wrap(ItemListWidget, 'render', function (render) {
                 base = root.find('.g-hierarchy-breadcrumb-bar>.breadcrumb>div').eq(0);
             }
             if (base.length) {
+                base.parent().addClass('li-item-list-filter-parent');
                 base[func]('<span class="li-item-list-filter">Filter:&nbsp;<input class="li-item-list-filter-input" title="' +
                     'All specified terms must be included.  ' +
                     'Surround with single quotes to include spaces, double quotes for exact value match.  ' +