Is it possible to influence when Tabs are shown as dropdown

tommueller · February 9, 2021, 4:14pm

Using the groupname field in the options of each field in a singleton it is possible to very conveniently group fields. I am very happy with the tab view, but realized that even on very wide screens, with definitely enough space to show the groups as tabs, it is already shown as a dropdown instead.

Is there any way to influence this behavior and only show the dropdown when there really is not enough space for tabs?

Thanks!

fafn · February 10, 2021, 5:05pm

You could modify the source code to change the threshold before the dropdown is activated. The tabs are managed in modules/Singletons/views/form.php, line 44-61:

github.com

agentejo/cockpit/blob/next/modules/Singletons/views/form.php#L44-L61


      
          <ul class="uk-tab header-sub-panel-tab uk-flex uk-flex-center" divider="true" if="{ App.Utils.count(_groups) > 1 && App.Utils.count(_groups) < 6 }">
              <li class="{ !group && 'uk-active'}"><a class="uk-text-capitalize" onclick="{ toggleGroup }">{ App.i18n.get('All') }</a></li>
              <li class="{ group==parent.group && 'uk-active'}" each="{group, idx in _groups}" show="{ parent.groups[group].length }"><a class="uk-text-capitalize" onclick="{ toggleGroup }">{ App.i18n.get(group) }</a></li>
          </ul>
          
          <ul class="uk-tab header-sub-panel-tab uk-flex uk-flex-center" divider="true" if="{ App.Utils.count(_groups) > 5 }">
              <li class="uk-active" data-uk-dropdown="mode:'click', pos:'bottom-center'">
                  <a>{ App.i18n.get(group || 'All') } <i class="uk-margin-small-left uk-icon-angle-down"></i></a>
                  <div class="uk-dropdown uk-dropdown-scrollable uk-dropdown-close">
                      <ul class="uk-nav uk-nav-dropdown">
                      <li class="uk-nav-header">@lang('Groups')</li>
                      <li class="{ !group && 'uk-active'}"><a class="uk-text-capitalize" onclick="{ toggleGroup }">{ App.i18n.get('All') }</a></li>
                      <li class="uk-nav-divider"></li>
                      <li class="{ group==parent.group && 'uk-active'}" each="{group in _groups}" show="{ parent.groups[group].length }"><a class="uk-text-capitalize" onclick="{ toggleGroup }">{ App.i18n.get(group) }</a></li>
                      </ul>
                  </div>
              </li>
          </ul>

If you want to show 10 tabs before switching over to the dropdown change “< 6” at the end of line 44 to “< 11” and “> 5” at the end of line 49 to “> 10”.

I’m don’t think there is an easy way of doing it, maybe you can add some script below line 184 to change the threshold dynamically/on window load? Also this would have to be done for Collections and other modules individually.

tommueller · March 1, 2021, 9:56am

Thanks @fafn but editing the source is not really an option for us at the moment. I take it, that there is no simple way for this, so we will stick with the dropdown for now.

Topic		Replies	Views
SelectRequestOptions addon - display as dropdown select Support	3	694	May 6, 2020
More Example and Screenshot about cockpit V2 Cockpit v2	5	670	January 13, 2023
Routing? add a option / value	0	227	September 26, 2022
Dynamic select field Support	9	1405	September 24, 2021
How does the concept of field options work? General	1	443	October 28, 2021

Is it possible to influence when Tabs are shown as dropdown

Related Topics