Our blazing fast Grid component built with pure JavaScript
Dear Team,
We are currently using Bryntum Grid version 5.6.10 and are facing an issue related to the horizontal scrollbar's position. By default, the scrollbar appears at the bottom of the grid, but we would like to shift it to the top.
We have reviewed the documentation but were unable to find a solution for this requirement. Could you please guide us on how we can achieve this?
For reference, we've attached a screenshot to help illustrate the scenario.
Screenshot 2025-04-23 at 5.30.05 PM.png (288.71 KiB) Viewed 358 times
try
.b-grid-header-container {
order : 0;
}
.b-grid-body-container {
order : 1;
}
I’ve tried implementing the approach you provided, but unfortunately, it doesn’t seem to be working as expected on our end. The horizontal scrollbar still appears at the bottom of the grid, and we haven’t been able to shift it to the top.
What does the DOM of the .b-grid-panel-body look like when you examine it in the debugger?
Animal wrote: ↑ Thu Apr 24, 2025 6:16 am What does the DOM of the .b-grid-panel-body look like when you examine it in the debugger?
Screenshot 2025-04-24 at 9.55.28 AM.png (566.91 KiB) Viewed 332 times
This is just to show where the class is placed.
<div class="b-widget b-container b-panel b-gridbase b-grid grid-container b-vue-grid-container b-panel-has-top-toolbar b-panel-has-bottom-toolbar b-vbox b-grid-translate b-grid-notextselection b-fill-last-column b-outer b-mac b-overlay-scrollbar b-chrome b-resize-monitored b-quickfind b-split b-filter-bar b-rowexpander b-columnautowidth b-columnpicker b-column-reorder b-columnresize b-group b-row-copypaste b-sort b-responsive-large"
id="b-grid-1" style="height: 90vh; min-height: 10em;"><!--POWERED BY BRYNTUM (https://bryntum.com)-->
<div aria-hidden="true" tabindex="0" class="b-focus-trap" data-owner-cmp="b-grid-1"></div>
<div class="b-vbox b-box-center b-panel-body-wrap b-grid-body-wrap" role="presentation" data-owner-cmp="b-grid-1">
<div class="b-widget b-container b-toolbar b-dock-top b-top-toolbar b-hbox b-resize-monitored"
role="presentation" id="b-toolbar-1" data-ref="tbar">
<div data-owner-cmp="b-toolbar-1"
class="b-box-center b-toolbar-content b-content-element b-box-container b-hbox b-single-child b-overflow"
role="presentation">
<div class="b-widget b-field b-textfield b-pickerfield b-combo b-label-before b-has-label b-resize-monitored b-not-editable b-box-item b-first-visible-child b-last-visible-child"
role="presentation" id="b-combo-1" data-item-index="0"
style="float: right; position: absolute; top: 10px; right: 10px; width: 200px;"><label
data-owner-cmp="b-combo-1" class="b-label b-align-start" for="b-combo-1-input">Item Per
Page</label>
<div data-owner-cmp="b-combo-1" class="b-field-inner" role="presentation"><input
data-owner-cmp="b-combo-1" type="text" name="b-combo-1" id="b-combo-1-input"
autocomplete="off" role="combobox" aria-expanded="false" aria-haspopup="listbox"
readonly="">
<div class="b-widget b-fieldtrigger b-icon-picker b-align-end b-icon" aria-hidden="true"
id="b-fieldtrigger-1" data-ref="expand"></div>
</div>
</div>
</div><button class="b-widget b-button b-overflow-button b-row-menu b-icon-align-start b-hidden"
type="button" id="b-button-6" role="presentation" aria-label="Show overflowing items"
aria-haspopup="false" data-ref="overflowMenuButton"><i data-owner-cmp="b-button-6"
class="b-icon-menu b-icon" aria-hidden="true"></i></button>
</div>
<div class="b-grid-panel-body" role="grid" data-owner-cmp="b-grid-1" aria-colcount="18" aria-rowcount="51">
<header role="row" aria-rowindex="1" class="b-grid-header-container" data-owner-cmp="b-grid-1"
data-max-depth="0">
<div class="b-grid-header-scroller b-grid-header-scroller-normal b-widget b-bar b-header"
role="presentation" id="b-grid-1-normalSubgrid-header" style="flex: 1 1 0%;">
<div data-region="normal" data-max-depth="0" data-owner-cmp="b-grid-1-normalSubgrid-header"
class="b-grid-headers b-grid-headers-normal b-widget-scroller b-resize-monitored b-hide-scroll b-horizontal-overflow"
role="presentation" style="overflow-x: auto;">
<div class="b-grid-header b-level-0 b-depth-0 b-grid-header-align-center" role="columnheader"
aria-sort="none" aria-label="SPACE for context menu" tabindex="0"
data-column-id="expanderActionColumn46" data-column="expanderActionColumn"
style="min-width: 30px; flex-basis: 50px;" aria-colindex="1">
<div class="b-grid-header-text" role="presentation">
<div id="b-grid-1-column-expanderActionColumn46" class="b-grid-header-text-content"
role="presentation"></div>
</div>
<div class="b-grid-header-resize-handle" role="presentation"></div>
</div>
<div class="b-grid-header b-level-0 b-depth-0 b-grid-header-resizable b-filter-bar-enabled b-sortable"
role="columnheader" aria-sort="none"
aria-label="Adjustment Date column. SPACE for context menu, ENTER to sort" tabindex="-1"
data-column-id="AdjustmentDate1" data-column="AdjustmentDate" aria-colindex="2"
style="min-width: 60px; flex-basis: 95px;">
<div class="b-grid-header-text" role="presentation">
<div id="b-grid-1-column-AdjustmentDate1" class="b-grid-header-text-content"
role="presentation">Adjustment Date</div>
<div class="b-sort-icon" role="presentation"></div>
</div>
<div class="b-grid-header-resize-handle" role="presentation"></div>
<div class="b-widget b-field b-textfield b-filter-bar-field b-empty" role="presentation"
id="b-textfield-1" data-column="AdjustmentDate">
<div data-owner-cmp="b-textfield-1" class="b-field-inner" role="presentation"><input
data-owner-cmp="b-textfield-1" class="b-filter-bar-field-input" type="text"
name="AdjustmentDate" id="b-textfield-1-input" autocomplete="off"
role="presentation" aria-disabled="false">
<div class="b-widget b-fieldtrigger b-icon-remove b-align-end b-icon b-hidden"
aria-hidden="true" id="b-fieldtrigger-2" data-ref="clear"></div>
</div>
</div>
</div>
</div>
</div>
<div data-region="normal" class="b-grid-splitter b-hide-display" role="presentation">
<div class="b-grid-splitter-inner" role="presentation"></div>
</div>
<div class="b-yscroll-pad" role="presentation">
<div class="b-yscroll-pad-sizer" role="presentation"></div>
</div>
</header>
<div class="b-grid-body-container b-widget-scroller b-resize-monitored b-vertical-overflow" tabindex="-1"
role="presentation" data-owner-cmp="b-grid-1" style="overflow-y: auto;">
<div class="b-grid-vertical-scroller b-single-child b-resize-monitored" role="presentation"
data-owner-cmp="b-grid-1" style="height: 2300px;">
<div data-region="normal"
class="b-grid-subgrid b-grid-subgrid-normal b-widget b-subgrid b-resize-monitored b-widget-scroller b-hide-scroll b-first-visible-child b-last-visible-child b-horizontal-overflow"
aria-label="normal" role="presentation" id="b-grid-1-normalSubgrid" data-ref="normal"
data-item-index="0" style="flex: 1 1 0%; --total-column-width: 1755px; overflow-x: auto;">
<div class="b-scroller-stretcher b-horizontal-stretcher" role="presentation"
style="transform: translateX(1754px);"></div>
<div class="b-empty-text" role="presentation">No records to display</div>
<div class="b-grid-row" role="row" data-index="0" aria-rowindex="2"
data-id="_generatedModelClass_0b460e53-537f-4676-bc05-f86166479182"
style="transform: translate(0px, 0px); height: 46px;">
<div data-column="expanderActionColumn" data-column-id="expanderActionColumn46"
class="b-grid-cell b-action-cell b-grid-cell-align-center" role="gridcell"
aria-colindex="1" tabindex="-1" style="min-width: 30px; width: 50px;">
<div class="b-action-ct" role="presentation"><button data-btip="Expand" data-index="0"
aria-label="Expand"
class="b-tool b-action-item b-icon b-icon-collapse-down"></button></div>
</div>
<div data-column="AdjustmentDate" data-column-id="AdjustmentDate1" class="b-grid-cell"
role="gridcell" aria-colindex="2" tabindex="-1" style="min-width: 60px; width: 95px;">
04/01/25 06:21 AM</div>
<div data-column="Source" data-column-id="Source2" class="b-grid-cell" role="gridcell"
aria-colindex="3" tabindex="-1" style="min-width: 60px; width: 65px;">Cycle Count</div>
<div data-column="Adjustment" data-column-id="Adjustment3" class="b-grid-cell"
role="gridcell" aria-colindex="4" tabindex="-1" style="min-width: 60px; width: 90px;">
AA107023480:01</div>
<div data-column="PrtId" data-column-id="PrtId4"
class="b-grid-cell text-primary pointer-cursor" role="gridcell" aria-colindex="5"
tabindex="-1" style="min-width: 60px; width: 95px; text-decoration: underline;">
G/BC3Z6587A</div>
<div data-column="Description" data-column-id="Description5" class="b-grid-cell"
role="gridcell" aria-colindex="6" tabindex="-1" style="min-width: 60px; width: 120px;">
GASKET</div>
<div data-column="QtyOld" data-column-id="QtyOld6"
class="b-grid-cell b-grid-cell-align-right" role="gridcell" aria-colindex="7"
tabindex="-1" style="min-width: 60px; width: 5px;">240</div>
<div data-column="QtyNew" data-column-id="QtyNew7"
class="b-grid-cell b-grid-cell-align-right" role="gridcell" aria-colindex="8"
tabindex="-1" style="min-width: 60px; width: 5px;">280</div>
<div data-column="QtyVar" data-column-id="QtyVar8"
class="b-grid-cell b-grid-cell-align-right" role="gridcell" aria-colindex="9"
tabindex="-1" style="min-width: 60px; width: 5px;">-40</div>
<div data-column="$ Variance" data-column-id="$ Variance9"
class="b-grid-cell b-grid-cell-align-right" role="gridcell" aria-colindex="10"
tabindex="-1" style="min-width: 60px; width: 55px; color: red;">($316.40)</div>
<div data-column="QtyOHCurrent" data-column-id="QtyOHCurrent10"
class="b-grid-cell b-grid-cell-align-right" role="gridcell" aria-colindex="11"
tabindex="-1" style="min-width: 60px; width: 5px;">280</div>
<div data-column="Adjuster" data-column-id="Adjuster11" class="b-grid-cell" role="gridcell"
aria-colindex="12" tabindex="-1" style="min-width: 60px; width: 80px;">JOSHUA R B</div>
<div data-column="CurrentResearcher" data-column-id="CurrentResearcher13"
class="b-grid-cell" role="gridcell" aria-colindex="13" tabindex="-1"
style="min-width: 60px; width: 80px;"></div>
<div data-column="LastNote_Des" data-column-id="LastNote_Des18" class="b-grid-cell"
role="gridcell" aria-colindex="14" tabindex="-1" style="min-width: 60px; width: 200px;">
DevTestNote23042025</div>
<div data-column="LastNoteUpdater" data-column-id="LastNoteUpdater19" class="b-grid-cell"
role="gridcell" aria-colindex="15" tabindex="-1" style="min-width: 60px; width: 180px;">
Test Employee</div>
<div data-column="LastNote_DateCreate" data-column-id="LastNote_DateCreate20"
class="b-grid-cell" role="gridcell" aria-colindex="16" tabindex="-1"
style="min-width: 60px; width: 180px;">04/23/25 04:27 AM</div>
<div data-column="NotesCount" data-column-id="NotesCount21" class="b-grid-cell"
role="gridcell" aria-colindex="17" tabindex="-1" style="min-width: 60px; width: 100px;">
1</div>
<div data-column="Bins" data-column-id="Bins22" class="b-grid-cell" role="gridcell"
aria-colindex="18" tabindex="-1" style="min-width: 60px; width: 120px;">H021B</div>
</div>
<div class="b-grid-row" role="row" data-index="1" aria-rowindex="3"
data-id="_generatedModelClass_88a79e1a-4bae-44d6-bcae-ff87f261ea39"
style="transform: translate(0px, 46px); height: 46px;">
<div data-column="expanderActionColumn" data-column-id="expanderActionColumn46"
class="b-grid-cell b-action-cell b-grid-cell-align-center" role="gridcell"
aria-colindex="1" tabindex="-1" style="min-width: 30px; width: 50px;">
<div class="b-action-ct" role="presentation"><button data-btip="Expand" data-index="0"
aria-label="Expand"
class="b-tool b-action-item b-icon b-icon-collapse-down"></button></div>
</div>
<div data-column="AdjustmentDate" data-column-id="AdjustmentDate1" class="b-grid-cell"
role="gridcell" aria-colindex="2" tabindex="-1" style="min-width: 60px; width: 95px;">
04/01/25 06:21 AM</div>
<div data-column="Source" data-column-id="Source2" class="b-grid-cell" role="gridcell"
aria-colindex="3" tabindex="-1" style="min-width: 60px; width: 65px;">Cycle Count</div>
<div data-column="Adjustment" data-column-id="Adjustment3" class="b-grid-cell"
role="gridcell" aria-colindex="4" tabindex="-1" style="min-width: 60px; width: 90px;">
AA107023480:01</div>
<div data-column="PrtId" data-column-id="PrtId4"
class="b-grid-cell text-primary pointer-cursor" role="gridcell" aria-colindex="5"
tabindex="-1" style="min-width: 60px; width: 95px; text-decoration: underline;">
G/LC2Z9448A</div>
<div data-column="Description" data-column-id="Description5" class="b-grid-cell"
role="gridcell" aria-colindex="6" tabindex="-1" style="min-width: 60px; width: 120px;">
GASKET</div>
<div data-column="QtyOld" data-column-id="QtyOld6"
class="b-grid-cell b-grid-cell-align-right" role="gridcell" aria-colindex="7"
tabindex="-1" style="min-width: 60px; width: 5px;">15</div>
<div data-column="QtyNew" data-column-id="QtyNew7"
class="b-grid-cell b-grid-cell-align-right" role="gridcell" aria-colindex="8"
tabindex="-1" style="min-width: 60px; width: 5px;">35</div>
<div data-column="QtyVar" data-column-id="QtyVar8"
class="b-grid-cell b-grid-cell-align-right" role="gridcell" aria-colindex="9"
tabindex="-1" style="min-width: 60px; width: 5px;">-20</div>
<div data-column="$ Variance" data-column-id="$ Variance9"
class="b-grid-cell b-grid-cell-align-right" role="gridcell" aria-colindex="10"
tabindex="-1" style="min-width: 60px; width: 55px; color: red;">($181.80)</div>
<div data-column="QtyOHCurrent" data-column-id="QtyOHCurrent10"
class="b-grid-cell b-grid-cell-align-right" role="gridcell" aria-colindex="11"
tabindex="-1" style="min-width: 60px; width: 5px;">27</div>
<div data-column="Adjuster" data-column-id="Adjuster11" class="b-grid-cell" role="gridcell"
aria-colindex="12" tabindex="-1" style="min-width: 60px; width: 80px;">GALICIA</div>
<div data-column="CurrentResearcher" data-column-id="CurrentResearcher13"
class="b-grid-cell" role="gridcell" aria-colindex="13" tabindex="-1"
style="min-width: 60px; width: 80px;"></div>
<div data-column="LastNote_Des" data-column-id="LastNote_Des18" class="b-grid-cell"
role="gridcell" aria-colindex="14" tabindex="-1" style="min-width: 60px; width: 200px;">
</div>
<div data-column="LastNoteUpdater" data-column-id="LastNoteUpdater19" class="b-grid-cell"
role="gridcell" aria-colindex="15" tabindex="-1" style="min-width: 60px; width: 180px;">
</div>
<div data-column="LastNote_DateCreate" data-column-id="LastNote_DateCreate20"
class="b-grid-cell" role="gridcell" aria-colindex="16" tabindex="-1"
style="min-width: 60px; width: 180px;"></div>
<div data-column="NotesCount" data-column-id="NotesCount21" class="b-grid-cell"
role="gridcell" aria-colindex="17" tabindex="-1" style="min-width: 60px; width: 100px;">
0</div>
<div data-column="Bins" data-column-id="Bins22" class="b-grid-cell" role="gridcell"
aria-colindex="18" tabindex="-1" style="min-width: 60px; width: 120px;">H021D,H021E
</div>
</div>
</div>
<div data-region="normal" data-reference="splitterElement" class="b-grid-splitter b-hide-display"
role="presentation">
<div class="b-grid-splitter-inner b-grid-splitter-main" role="presentation">
<div data-reference="splitterButtons" class="b-grid-splitter-buttons" role="presentation"
style="top: 128.5px;">
<div class="b-grid-splitter-button-collapse" role="presentation"><svg
class="b-grid-splitter-button-icon b-gridregion-collapse-arrow" version="1.1"
viewBox="0 0 256 512" role="presentation">
<path
d="M192 448c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l137.4 137.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448z"
role="presentation"></path>
</svg></div>
<div class="b-grid-splitter-button-expand" role="presentation"><svg
class="b-grid-splitter-button-icon b-gridregion-expand-arrow" version="1.1"
viewBox="0 0 256 512" role="presentation">
<path
d="M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z"
role="presentation"></path>
</svg></div>
</div>
</div>
</div>
</div>
<div class="b-scroller-stretcher" role="presentation" style="transform: translateY(2299px);"></div>
</div>
<div class="b-virtual-scrollers" role="presentation" data-owner-cmp="b-grid-1">
<div data-region="normal" data-reference="virtualScrollerElement"
class="b-virtual-scroller b-widget-scroller b-resize-monitored b-horizontal-overflow"
role="presentation" tabindex="-1" style="flex: 1 1 0%; overflow-x: auto;">
<div data-reference="virtualScrollerWidth" class="b-virtual-width" role="presentation"
style="width: 1755px;"></div>
</div>
<div data-region="normal" class="b-grid-splitter b-hide-display" role="presentation">
<div class="b-grid-splitter-inner" role="presentation"></div>
</div>
<div class="b-yscroll-pad" role="presentation">
<div class="b-yscroll-pad-sizer" role="presentation"></div>
</div>
</div>
<footer class="b-grid-footer-container b-hidden" role="presentation" data-owner-cmp="b-grid-1">
<div class="b-grid-footer-scroller b-grid-footer-scroller-normal b-widget b-bar b-footer"
role="presentation" id="b-grid-1-normalSubgrid-footer" style="flex: 1 1 0%;">
<div class="b-grid-footers b-grid-footers-normal b-widget-scroller b-resize-monitored b-hide-scroll"
data-region="normal" role="presentation" data-owner-cmp="b-grid-1-normalSubgrid-footer"
style="overflow-x: auto;">
<div class="b-grid-footer b-grid-footer-align-center " data-column="expanderActionColumn"
data-column-id="expanderActionColumn46" data-all-index="0" role="presentation"
style="min-width: 30px; flex-basis: 50px;"></div>
<div class="b-grid-footer " data-column="AdjustmentDate" data-column-id="AdjustmentDate1"
data-all-index="1" role="presentation" style="min-width: 60px; flex-basis: 95px;"></div>
</div>
</div>
<div data-region="normal" class="b-grid-splitter b-hide-display" role="presentation">
<div class="b-grid-splitter-inner" role="presentation"></div>
</div>
<div class="b-yscroll-pad" role="presentation">
<div class="b-yscroll-pad-sizer" role="presentation"></div>
</div>
</footer>
</div>
<div class="b-widget b-container b-toolbar b-pagingtoolbar b-dock-bottom b-bottom-toolbar b-hbox b-resize-monitored"
role="presentation" id="b-pagingtoolbar-1" data-ref="bbar">
<div data-owner-cmp="b-pagingtoolbar-1"
class="b-box-center b-toolbar-content b-content-element b-box-container b-hbox b-overflow"
role="presentation"><button
class="b-widget b-button b-icon-align-start b-box-item b-first-visible-child b-disabled"
type="button" id="b-button-1" role="presentation" aria-haspopup="false" data-ref="firstPageButton"
data-item-index="0" aria-describedby="b-button-1-aria-desc-el" data-btip="true" aria-disabled="true"
disabled=""><i data-owner-cmp="b-button-1" class="b-icon-first b-icon" aria-hidden="true"></i>
<div class="b-aria-desc-element" id="b-button-1-aria-desc-el" role="presentation">
L{PagingToolbar.firstPage}</div>
</button><button class="b-widget b-button b-icon-align-start b-box-item b-disabled" type="button"
id="b-button-2" role="presentation" aria-haspopup="false" data-ref="previousPageButton"
data-item-index="1" aria-describedby="b-button-2-aria-desc-el" data-btip="true" aria-disabled="true"
disabled=""><i data-owner-cmp="b-button-2" class="b-icon-previous b-icon" aria-hidden="true"></i>
<div class="b-aria-desc-element" id="b-button-2-aria-desc-el" role="presentation">
L{PagingToolbar.prevPage}</div>
</button>
<div class="b-widget b-field b-numberfield b-label-before b-has-label b-box-item b-field-no-hint"
role="presentation" id="b-numberfield-1" data-ref="pageNumber" data-item-index="2"><label
data-owner-cmp="b-numberfield-1" class="b-label b-align-start"
for="b-numberfield-1-input">Page</label>
<div data-owner-cmp="b-numberfield-1" class="b-field-inner" role="presentation"><input
data-owner-cmp="b-numberfield-1" name="b-numberfield-1" id="b-numberfield-1-input" max="1"
min="1" autocomplete="off" role="presentation" aria-disabled="false"></div>
</div>
<div class="b-widget b-pagecount b-toolbar-text b-html b-box-item" id="b-widget-1" role="presentation"
data-ref="pageCount" data-item-index="3" aria-disabled="false">of 5</div><button
class="b-widget b-button b-icon-align-start b-box-item" type="button" id="b-button-3"
role="presentation" aria-haspopup="false" data-ref="nextPageButton" data-item-index="4"
aria-describedby="b-button-3-aria-desc-el" data-btip="true" aria-disabled="false"><i
data-owner-cmp="b-button-3" class="b-icon-next b-icon" aria-hidden="true"></i>
<div class="b-aria-desc-element" id="b-button-3-aria-desc-el" role="presentation">
L{PagingToolbar.nextPage}</div>
</button><button class="b-widget b-button b-icon-align-start b-box-item" type="button" id="b-button-4"
role="presentation" aria-haspopup="false" data-ref="lastPageButton" data-item-index="5"
aria-describedby="b-button-4-aria-desc-el" data-btip="true" aria-disabled="false"><i
data-owner-cmp="b-button-4" class="b-icon-last b-icon" aria-hidden="true"></i>
<div class="b-aria-desc-element" id="b-button-4-aria-desc-el" role="presentation">
L{PagingToolbar.lastPage}</div>
</button>
<div class="b-widget b-toolbar-separator b-box-item" id="b-widget-2" role="presentation"
data-ref="separator" data-item-index="6" aria-disabled="false"></div><button
class="b-widget b-button b-icon-align-start b-box-item" type="button" id="b-button-5"
role="presentation" aria-haspopup="false" data-ref="reloadButton" data-item-index="7"
aria-describedby="b-button-5-aria-desc-el" data-btip="true" aria-disabled="false"><i
data-owner-cmp="b-button-5" class="b-icon-reload b-icon" aria-hidden="true"></i>
<div class="b-aria-desc-element" id="b-button-5-aria-desc-el" role="presentation">
L{PagingToolbar.reload}</div>
</button>
<div class="b-widget b-toolbar-fill b-box-item" id="b-widget-3" role="presentation" data-ref="spacer"
data-item-index="8" aria-disabled="false"></div>
<div class="b-widget b-toolbar-text b-html b-box-item b-last-visible-child" id="b-widget-4"
role="presentation" data-ref="dataSummary" data-item-index="9" aria-disabled="false">Displaying
records 1 - 50 of 215</div>
</div><button class="b-widget b-button b-overflow-button b-row-menu b-icon-align-start b-hidden"
type="button" id="b-button-7" role="presentation" aria-label="Show overflowing items"
aria-haspopup="false" data-ref="overflowMenuButton" aria-disabled="false"><i data-owner-cmp="b-button-7"
class="b-icon-menu b-icon" aria-hidden="true"></i></button>
</div>
</div>
<div aria-hidden="true" tabindex="0" class="b-focus-trap b-end-focus-trap" data-owner-cmp="b-grid-1"></div>
<!-- Container for Vue components used in cells, hidden from view -->
<div style="display: none;"><!-- Vue components rendered in the grid cells --></div>
</div>
And so are your new order styles applying to the items within that as they are here?
Screenshot 2025-04-24 at 07.07.18.png (578.15 KiB) Viewed 328 times
Animal wrote: ↑ Thu Apr 24, 2025 7:08 am And so are your new order styles applying to the items within that as they are here?
Screenshot 2025-04-24 at 07.07.18.png
It's still not working. Please check the video below for reference.
Hi,
Could you please try the same in our demos to make sure all worked correctly out of your app environment, in this case we will know that something else affect on it and not the solution itself.
All the best,
How to ask for help? Please read our Support Policy
We do not write the code in bounds of forum support. If you need help with development, contact us via bryntum.com/services
