have a visual representation of maxitems

[TBschen]

I think it would be nice to have a visualization next to a column that display the amount of content elements used in a column if one is using maxitems.
For example "1/5" if maxitems is 5 and there's currently 1 content element in the column.

[riegeo]

Yeah that would be very useful - just like it is when gridelements is installed

[IchHabRecht]

Hi,

Maybe someone will have a look at #121

[KlickUndKlar]

Hi @IchHabRecht

Many thanks for the quick reaction. I've tested the issues and haven't found any bugs from a technical point of view. But I have a small design/UX objection. I find the signal colors quite okey in the context of error messages. But they are too annoying for this counter. In my example, only one content element is allowed in the header column. The user would therefore always see a badge with an error color on every page. This makes no sense and disturbs the UI. Let's make the counter a bit plainer so it takes less attention. I think gray would go well with it. Then I would also move the position a bit. If we place it relative to the column name, it flows nicely.

[IchHabRecht]

Hi @KlickUndKlar,

Thank you for your feedback. I like the idea to Grey out a full row. I will change it. According to your positioning purpose it would be great if you could provide additional css and check if this works in all 3 supported versions 10-12). As non-frontendler this was the best I came up with so far 😉

[mtness]

Hi there!
Is there any update on this ?

I would love to have the [+ content] buttons disabled somehow when necessary.

[xerc]

patch -p0 <<'EOF'
--- /tmp/typo3-12/cms-backend/Resources/Private/Partials/PageLayout/Grid/ColumnHeader.html	2025-10-14 13:01:11.000000000 +0200
+++ vendor/typo3/cms-backend/Resources/Private/Partials/PageLayout/Grid/ColumnHeader.html	2025-10-19 05:11:07.427714361 +0200
@@ -20,8 +20,19 @@
             <span id="{columnIdentifier}">{column.titleInaccessible}</span>
         </f:else>
     </f:if>
+    <f:if condition="{column.definition.maxitems}">
+        <f:if condition="{column.definition.maxitems} >= {column.items -> f:count()}">
+        <f:then>
+            <code><kbd>[{column.items -> f:count()}/{column.definition.maxitems}]</kbd></code>
+        </f:then>
+        <f:else>
+            <kbd><code>[{column.items -> f:count()}/{column.definition.maxitems}]</code></kbd>
+        </f:else>
+        </f:if>
+    </f:if>
 </div>
 <f:format.raw>{column.beforeSectionMarkup}</f:format.raw>
+<f:if condition="{column.definition.maxitems} == '' || {column.definition.maxitems} > {column.items -> f:count()}">
 <f:if condition="{allowEditContent} && {column.contentEditable} && {column.context.allowNewContent} && {column.active}">
     <div class="t3-page-ce t3js-page-ce" data-page="{column.context.pageId}" id="{column.uniqueId}">
         <div class="t3-page-ce-actions t3js-page-new-ce" id="colpos-{column.columnNumber}-page-{column.context.pageId}-{column.uniqueId}">
@@ -33,3 +44,4 @@
         <div class="t3-page-ce-dropzone t3js-page-ce-dropzone-available"></div>
     </div>
 </f:if>
+</f:if>
--- /tmp/typo3-12/cms-backend/Resources/Private/Partials/PageLayout/Grid/Column.html	2025-10-14 13:01:11.000000000 +0200
+++ vendor/typo3/cms-backend/Resources/Private/Partials/PageLayout/Grid/Column.html	2025-10-19 04:05:56.566966283 +0200
@@ -16,8 +16,11 @@
 </f:if>
 <td valign="top" colspan="{column.colSpan}" rowspan="{column.rowSpan}"
     data-colpos="{colpos}" data-language-uid="{column.context.siteLanguage.languageId}"
+    <f:if condition="{column.definition.maxitems} && {column.definition.maxitems} < {column.items -> f:count()}">style="background-color:var(--note-danger-header-bg)"</f:if>
     class="t3js-page-lang-column-{column.context.siteLanguage.languageId} t3js-page-column t3-grid-cell t3-page-column t3-page-column-{colpos}
         {f:if(condition: column.unassigned, then: 't3-grid-cell-unassigned')}
+        {f:if(condition: '{column.definition.maxitems} == \'0\'', then: 't3-grid-cell-unassigned')}
+        {f:if(condition: '{column.definition.maxitems} && {column.definition.maxitems} == {column.items -> f:count()}', then: 't3-grid-cell-restricted')}
         {f:if(condition: '!{column.active} && !{column.unused}', then: 't3-grid-cell-restricted')}
         {f:if(condition: '!{column.active} && {hideRestrictedColumns} && !{column.unused}', then: 't3-grid-cell-hidden')}
         t3-gridCell-width{column.colSpan}
--- /tmp/typo3-12/cms-backend/Resources/Private/Partials/PageLayout/Record.html	2025-10-14 13:01:11.000000000 +0200
+++ vendor/typo3/cms-backend/Resources/Private/Partials/PageLayout/Record.html	2025-10-19 04:47:08.497807051 +0200
@@ -28,6 +28,7 @@
             </div>
         </f:if>
     </div>
+    <f:if condition="{column.definition.maxitems} == '' || {column.definition.maxitems} > {column.items -> f:count()}">
     <f:if condition="{allowEditContent} && {item.column.contentEditable} && {column.context.allowNewContent} && {column.active}">
         <div class="t3-page-ce-actions t3js-page-new-ce" id="colpos-{item.column.columnNumber}-page-{item.context.pageId}-{item.column.uniqueId}">
             <typo3-backend-new-content-element-wizard-button class="btn btn-default btn-sm" url="{item.newContentAfterUrl}" subject="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:newContentElement')}">
@@ -36,5 +37,6 @@
             </typo3-backend-new-content-element-wizard-button>
         </div>
     </f:if>
+    </f:if>
     <div class="t3-page-ce-dropzone t3js-page-ce-dropzone-available"></div>
 </div>
EOF