[TikiWiki-commits] [Git][tikiwiki/tiki][master] [ENH][UX] Object selector: add a scrollable container for the search results...

Adrien Mbuya Maloba pushed to branch master at Tiki Wiki CMS Groupware / Tiki


Commits:
d0be4a02 by NasserNgandu at 2026-07-25T00:55:13+03:00
[ENH][UX] Object selector: add a scrollable container for the search results of the object selector widget
---
* [ENH] Setting a maximum height for the search results of the object selector widget.

See merge request tikiwiki/tiki!10643

- - - - -


4 changed files:

- templates/object_selector.tpl
- templates/object_selector_multi.tpl
- templates/object_selector_multi_extra.tpl
- themes/base_files/scss/_tiki-search.scss


Changes:

=====================================
templates/object_selector.tpl
=====================================
@@ -52,25 +52,27 @@
             </div>
         </div>
         <div class="card-body">
-            <div class="results">
-                <p class="too-many">{tr}Search and select what you are looking for from the options that appear.{/tr}</p>
-                <div class="form-check">
-                    <input name="{$object_selector.id|escape}_sel" class="form-check-input protected" type="radio" value="" {if ! $object_selector.current_selection} checked="checked" {/if} value="" id="{$object_selector.id|escape}_sel_empty">
-                    <label class="form-check-label" for="{$object_selector.id|escape}_sel_empty">&mdash;</label>
-                </div>
-                {if !empty($object_selector.current_selection)}
+            <div class="object-selector-result-scroll">
+                <div class="results">
+                    <p class="too-many">{tr}Search and select what you are looking for from the options that appear.{/tr}</p>
                     <div class="form-check">
-                        <input type="radio" class="form-check-input" checked="checked" value="{$object_selector.current_selection|escape}" name="{$object_selector.id|escape}_sel" id="{$object_selector.id|escape}_sel_selected">
-                        <label class="form-check-label" for="{$object_selector.id|escape}_sel_selected">
-                            {$object_selector.current_selection.title|escape}
-                            {if !empty($object_selector.current_selection.metadata)}
-                                <a href="{bootstrap_modal controller=tracker action=update_item trackerId=$object_selector.current_selection.metadata.trackerId itemId=$object_selector.current_selection.metadata.itemId skipRefresh=1 size='modal-lg'}" title="edit metadata"|tra class="btn btn-link">{icon name="clipboard-list"}</a>
-                            {elseif $object_selector.relationshipTrackerId}
-                                <a href="{bootstrap_modal controller=tracker action=insert_item trackerId=$object_selector.relationshipTrackerId skipRefresh=1 refreshMeta=$object_selector.name refreshObject=$object_selector.current_selection|escape size='modal-lg'}" title="add metadata"|tra class="btn btn-link metadata-insert-item" data-object="{$object_selector.current_selection|escape}">{icon name="clipboard-list"}</a>
-                            {/if}
-                        </label>
+                        <input name="{$object_selector.id|escape}_sel" class="form-check-input protected" type="radio" value="" {if ! $object_selector.current_selection} checked="checked" {/if} value="" id="{$object_selector.id|escape}_sel_empty">
+                        <label class="form-check-label" for="{$object_selector.id|escape}_sel_empty">&mdash;</label>
                     </div>
-                {/if}
+                    {if !empty($object_selector.current_selection)}
+                        <div class="form-check">
+                            <input type="radio" class="form-check-input" checked="checked" value="{$object_selector.current_selection|escape}" name="{$object_selector.id|escape}_sel" id="{$object_selector.id|escape}_sel_selected">
+                            <label class="form-check-label" for="{$object_selector.id|escape}_sel_selected">
+                                {$object_selector.current_selection.title|escape}
+                                {if !empty($object_selector.current_selection.metadata)}
+                                    <a href="{bootstrap_modal controller=tracker action=update_item trackerId=$object_selector.current_selection.metadata.trackerId itemId=$object_selector.current_selection.metadata.itemId skipRefresh=1 size='modal-lg'}" title="edit metadata"|tra class="btn btn-link">{icon name="clipboard-list"}</a>
+                                {elseif $object_selector.relationshipTrackerId}
+                                    <a href="{bootstrap_modal controller=tracker action=insert_item trackerId=$object_selector.relationshipTrackerId skipRefresh=1 refreshMeta=$object_selector.name refreshObject=$object_selector.current_selection|escape size='modal-lg'}" title="add metadata"|tra class="btn btn-link metadata-insert-item" data-object="{$object_selector.current_selection|escape}">{icon name="clipboard-list"}</a>
+                                {/if}
+                            </label>
+                        </div>
+                    {/if}
+                </div>
             </div>
             <p class="no-results d-none">
                 {tr}No matching results.{/tr}


=====================================
templates/object_selector_multi.tpl
=====================================
@@ -51,23 +51,25 @@
                 <b class="text-warning">{tr}Please note:{/tr}</b>
                 {tr}Depending on your current Tiki configuration you might not see all the options available. Adjust the 'Object selector threshold' in the 'Pagination' settings to show them all.{/tr}
             </p>
-            <div class="results">
-                {foreach from=$object_selector_multi.current_selection item=object name=ix}
-                    <div class="form-check">
-                        <input id="{$object_selector_multi.id|escape}_selected_{$smarty.foreach.ix.index}" class="form-check-input" type="checkbox" value="{$object|escape}" checked>
-                        <label class="form-check-label" for="{$object_selector_multi.id|escape}_selected_{$smarty.foreach.ix.index}">
-                            {if $object|substring:0:11 eq 'trackeritem'}
-                                {tracker_item_status_icon item=$object|substring:12}
-                            {/if}
-                            {$object->getTitle($object_selector_multi.format)|escape}
-                            {if isset($object.metadata) && $object.metadata}
-                                <a href="{bootstrap_modal controller=tracker action=update_item trackerId=$object.metadata.trackerId itemId=$object.metadata.itemId skipRefresh=1 size='modal-lg'}" title="edit metadata"|tra class="btn btn-link">{icon name="clipboard-list"}</a>
-                            {elseif $object_selector_multi.relationshipTrackerId}
-                                <a href="{bootstrap_modal controller=tracker action=insert_item trackerId=$object_selector_multi.relationshipTrackerId skipRefresh=1 refreshMeta=$object_selector_multi.name refreshObject=$object|escape size='modal-lg'}" title="add metadata"|tra class="btn btn-link metadata-insert-item" data-object="{$object|escape}">{icon name="clipboard-list"}</a>
-                            {/if}
-                        </label>
-                    </div>
-                {/foreach}
+            <div class="object-selector-result-scroll">
+                <div class="results">
+                    {foreach from=$object_selector_multi.current_selection item=object name=ix}
+                        <div class="form-check">
+                            <input id="{$object_selector_multi.id|escape}_selected_{$smarty.foreach.ix.index}" class="form-check-input" type="checkbox" value="{$object|escape}" checked>
+                            <label class="form-check-label" for="{$object_selector_multi.id|escape}_selected_{$smarty.foreach.ix.index}">
+                                {if $object|substring:0:11 eq 'trackeritem'}
+                                    {tracker_item_status_icon item=$object|substring:12}
+                                {/if}
+                                {$object->getTitle($object_selector_multi.format)|escape}
+                                {if isset($object.metadata) && $object.metadata}
+                                    <a href="{bootstrap_modal controller=tracker action=update_item trackerId=$object.metadata.trackerId itemId=$object.metadata.itemId skipRefresh=1 size='modal-lg'}" title="edit metadata"|tra class="btn btn-link">{icon name="clipboard-list"}</a>
+                                {elseif $object_selector_multi.relationshipTrackerId}
+                                    <a href="{bootstrap_modal controller=tracker action=insert_item trackerId=$object_selector_multi.relationshipTrackerId skipRefresh=1 refreshMeta=$object_selector_multi.name refreshObject=$object|escape size='modal-lg'}" title="add metadata"|tra class="btn btn-link metadata-insert-item" data-object="{$object|escape}">{icon name="clipboard-list"}</a>
+                                {/if}
+                            </label>
+                        </div>
+                    {/foreach}
+                </div>
             </div>
             <p class="no-results d-none">
                 {tr}No matching results.{/tr}


=====================================
templates/object_selector_multi_extra.tpl
=====================================
@@ -35,13 +35,15 @@
         </div>
         <div class="card-body">
             <p class="too-many">{tr}Search and select what you are looking for from the options that appear.{/tr}</p>
-            <div class="results">
-                {foreach from=$object_selector_multi.current_selection item=object name=ix}
-                    <div class="form-check">
-                        <input id="{$object_selector_multi.id|escape}_selected_{$smarty.foreach.ix.index}" class="form-check-input" type="checkbox" value="{$object|escape}" checked>
-                        <label class="form-check-label" for="{$object_selector_multi.id|escape}_selected_{$smarty.foreach.ix.index}">{$object.title|escape}</label>
-                    </div>
-                {/foreach}
+            <div class="object-selector-result-scroll">
+                <div class="results">
+                    {foreach from=$object_selector_multi.current_selection item=object name=ix}
+                        <div class="form-check">
+                            <input id="{$object_selector_multi.id|escape}_selected_{$smarty.foreach.ix.index}" class="form-check-input" type="checkbox" value="{$object|escape}" checked>
+                            <label class="form-check-label" for="{$object_selector_multi.id|escape}_selected_{$smarty.foreach.ix.index}">{$object.title|escape}</label>
+                        </div>
+                    {/foreach}
+                </div>
             </div>
             <p class="no-results d-none">
                 {tr}No matching results.{/tr}


=====================================
themes/base_files/scss/_tiki-search.scss
=====================================
@@ -7,6 +7,10 @@
 .searchresults li {
     margin: 10px 0 0;
 }
+.object-selector-result-scroll {
+  max-height: 80vh;
+  overflow-y: auto;
+}
 
 .search-with-facets {
     &::after {



View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/d0be4a02b5450238b49ec9ff5cfb79aaff462468

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/d0be4a02b5450238b49ec9ff5cfb79aaff462468
You're receiving this email because of your account on gitlab.com. Manage all notifications: https://gitlab.com/-/profile/notifications | Help: https://gitlab.com/help

_______________________________________________
TikiWiki-cvs mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs