From 256e63275edc87586e7ea0a428a6911e81d88b8c Mon Sep 17 00:00:00 2001
From: Oliver Bartsch <bo@cedev.de>
Date: Wed, 25 Aug 2021 11:51:12 +0200
Subject: [PATCH] [BUGFIX] Use auto column width in column selector
Depending on the backend localization, the action labels
might be "longer" than initially expected. To prevent the
action bar from breaking into another row, the columns
width is now automatically calculated while the fiter input
is set to flex-grow to automatically use the remaining space.
Resolves: #94988
Releases: master
Change-Id: I7d19fab9cacb52695c8385258a00f9fef38df33a
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/70753
Tested-by: core-ci <typo3@b13.com>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Jochen <rothjochen@gmail.com>
Tested-by: Oliver Bartsch <bo@cedev.de>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Reviewed-by: Jochen <rothjochen@gmail.com>
Reviewed-by: Oliver Bartsch <bo@cedev.de>
---
.../Resources/Private/Templates/ColumnSelector.html | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/typo3/sysext/recordlist/Resources/Private/Templates/ColumnSelector.html b/typo3/sysext/recordlist/Resources/Private/Templates/ColumnSelector.html
index 46f1afa0d119..feded6a58623 100644
--- a/typo3/sysext/recordlist/Resources/Private/Templates/ColumnSelector.html
+++ b/typo3/sysext/recordlist/Resources/Private/Templates/ColumnSelector.html
@@ -1,14 +1,14 @@
<form id="columnSelectorForm">
<div class="sticky-form-actions border-bottom">
- <div class="row">
- <div class="col-5">
+ <div class="row row-cols-auto justify-content-between">
+ <div class="col flex-grow-1">
<div class="input-group">
<span class="input-group-addon" id="columns-filter-label"><f:translate key="LLL:EXT:recordlist/Resources/Private/Language/locallang.xlf:columnsFilter" /></span>
<input type="search" name="columns-filter" class="form-control" value="" aria-labelledby="columns-filter-label" placeholder="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.enterSearchString')}">
</div>
</div>
- <div class="col-7">
+ <div class="col">
<div class="row row-cols-auto justify-content-end g-2 t3js-record-column-selector-actions">
<div class="col">
<button type="button" class="btn btn-default disabled" data-action="select-all">
--
GitLab