Autosized width overflows parent div in bootstrap 3.
Closed this issue · 10 comments
I'm submitting a Bug report
Your Environment
Software | Version(s) |
---|---|
Aurelia | 1.3.1 |
Aurelia-Slickgrid | 3.4.0 |
TypeScript | 4.2.3 |
Operating System | Windows 10 |
NPM/Node/Yarn | 14.15.1 |
Context
I'm upgrading from 2.X to 3.X. Previously we set the grid-width="100%" however this has been moved to the gridOptions in Javascript. We are using Typescript and the typings for this property requires it to be a number. If we leave it unset, the automatic sizing of the grid makes it too wide and it overflows outside of the col-sm-12 container div. We are using Bootstrap 3.
If, we update the grid width like this: (this.gridOpts as any).gridWidth = "100%" then it works perfectly and the grid fits within its container's bounds.
Expected Behavior
The grid shouldn't overflow the boundaries of its containing div.
Current Behavior
The grid overflows the with of its container.
Possible Solution
Either it should calculate the proper width based on the size and position of the container, or the typings should be updated to support strings for the width, or an additional parameter for the width units should be added.
Code Sample
I'm not sure how you got that to work by doing that hack you're doing because it really is defined as a number because it's all calculated in pixel and in the code it then adds px
on the width here
if (fixedGridDimensions?.width && gridParentContainerElm?.style) {
gridParentContainerElm.style.width = `${fixedGridDimensions.width}px`;
}
The only thing that I could see as maybe possible is to make it a string or number and if it's a string then leave it as it is but if it's a number then add the px
to it
if (fixedGridDimensions?.width && gridParentContainerElm?.style) {
gridParentContainerElm.style.width = typeof fixedGridDimensions.width === 'string' ? fixedGridDimensions.width : `${fixedGridDimensions.width}px`;
}
So I'm surprised your code (hack) actually works, I can only assume that it's probably skipping the px
when it sees the %
since HTML/JS are not too strict.
After looking at the code, I have no idea how this is working either! I've included the generated HTML below. I removed the actual data rows, but the column headers are there. I don't know if this helps track things down, but it looks like it's simply passing the 100% through. Not sure how that is happening given the code in the resizer though. I'll try stepping into it with a debugger if I get a chance.
Regardless, thank you for the change! Do you know when it might be available on npm? Ask an inch, take a mile? :) Thank you for this control, it's really awesome, and I appreciate all the work you put into it!
<div class="row">
<div class="col-sm-12">
<h3>Line Item Quantities</h3>
<aurelia-slickgrid grid-id="lineItemQuantityGrid"
column-definitions.bind="lineItemQuantityGridColumnDefinitions" grid-options.bind="lineItemGridOptions"
dataset.bind="customerOrderSummaryLineItemQuantities"
sg-on-context-menu.delegate="onContextMenu($event.detail.eventData, $event.detail.args)" class="au-target"
au-target-id="360">
<div class="grid-pane au-target" au-target-id="233" id="slickGridContainer-lineItemQuantityGrid"
style="height: 300px; width: 100%;">
<!-- Header slot if you need to create a complex custom header -->
<!--slot-->
<div id.bind="gridId" class="slickgrid-container au-target slickgrid_811303 ui-widget"
style="width: 100%; overflow: hidden; outline: 0px; height: 300px;"
focusout.delegate="commitEdit($event.target)" au-target-id="235" id="lineItemQuantityGrid">
<div tabindex="0" hidefocus="" style="position:fixed;width:0;height:0;top:0;left:0;outline:0;">
</div>
<div class="slick-pane slick-pane-header slick-pane-left" tabindex="0" style="width: 100%;"><button
class="slick-gridmenu-button fa fa-bars"></button>
<div class="slick-header ui-state-default slick-header-left" style="width: calc(100% - 16px)">
<div class="slick-header-columns slick-header-columns-left ui-sortable"
style="left: -1000px; width: 2127px;" unselectable="on">
<div class="ui-state-default slick-header-column slick-header-sortable ui-sortable-handle"
id="slickgrid_811303lineItemTypeDescription" title="" style="width: 98px;"><span
class="slick-column-name">Type</span><span
class="slick-sort-indicator"></span><span
class="slick-sort-indicator-numbered"></span>
<div class="slick-header-menubutton"></div>
<div class="slick-resizable-handle"></div>
</div>
<div class="ui-state-default slick-header-column slick-header-sortable ui-sortable-handle"
id="slickgrid_811303isEnterpriseLevel" title="" style="width: 98px;"><span
class="slick-column-name">Is Advanced</span><span
class="slick-sort-indicator"></span><span
class="slick-sort-indicator-numbered"></span>
<div class="slick-header-menubutton"></div>
<div class="slick-resizable-handle"></div>
</div>
<div class="ui-state-default slick-header-column slick-header-sortable ui-sortable-handle"
id="slickgrid_811303quantity" title="" style="width: 98px;"><span
class="slick-column-name">Quantity</span><span
class="slick-sort-indicator"></span><span
class="slick-sort-indicator-numbered"></span>
<div class="slick-header-menubutton"></div>
<div class="slick-resizable-handle"></div>
</div>
<div class="ui-state-default slick-header-column slick-header-sortable ui-sortable-handle"
id="slickgrid_811303unitPrice" title="" style="width: 97px;"><span
class="slick-column-name">Unit Price</span><span
class="slick-sort-indicator"></span><span
class="slick-sort-indicator-numbered"></span>
<div class="slick-header-menubutton"></div>
<div class="slick-resizable-handle"></div>
</div>
<div class="ui-state-default slick-header-column slick-header-sortable ui-sortable-handle"
id="slickgrid_811303fulfilledQuantity" title="" style="width: 97px;"><span
class="slick-column-name">Fulfilled Quantity</span><span
class="slick-sort-indicator"></span><span
class="slick-sort-indicator-numbered"></span>
<div class="slick-header-menubutton"></div>
<div class="slick-resizable-handle"></div>
</div>
<div class="ui-state-default slick-header-column slick-header-sortable ui-sortable-handle"
id="slickgrid_811303fulfilledPrice" title="" style="width: 97px;"><span
class="slick-column-name">Fulfilled Price</span><span
class="slick-sort-indicator"></span><span
class="slick-sort-indicator-numbered"></span>
<div class="slick-header-menubutton"></div>
<div class="slick-resizable-handle"></div>
</div>
<div class="ui-state-default slick-header-column slick-header-sortable ui-sortable-handle"
id="slickgrid_811303availableQuantity" title="" style="width: 97px;"><span
class="slick-column-name">Available Quantity</span><span
class="slick-sort-indicator"></span><span
class="slick-sort-indicator-numbered"></span>
<div class="slick-header-menubutton"></div>
<div class="slick-resizable-handle"></div>
</div>
<div class="ui-state-default slick-header-column slick-header-sortable ui-sortable-handle"
id="slickgrid_811303futureQuantity" title="" style="width: 97px;"><span
class="slick-column-name">Future Quantity</span><span
class="slick-sort-indicator"></span><span
class="slick-sort-indicator-numbered"></span>
<div class="slick-header-menubutton"></div>
<div class="slick-resizable-handle"></div>
</div>
<div class="ui-state-default slick-header-column slick-header-sortable ui-sortable-handle"
id="slickgrid_811303futureFulfilledQuantity" title="" style="width: 97px;"><span
class="slick-column-name">Future Fulfilled Quantity</span><span
class="slick-sort-indicator"></span><span
class="slick-sort-indicator-numbered"></span>
<div class="slick-header-menubutton"></div>
<div class="slick-resizable-handle"></div>
</div>
<div class="ui-state-default slick-header-column slick-header-sortable ui-sortable-handle"
id="slickgrid_811303futureAvailableQuantity" title="" style="width: 97px;"><span
class="slick-column-name">Future Available Quantity</span><span
class="slick-sort-indicator"></span><span
class="slick-sort-indicator-numbered"></span>
<div class="slick-header-menubutton"></div>
<div class="slick-resizable-handle"></div>
</div>
</div>
</div>
</div>
<div class="slick-pane slick-pane-header slick-pane-right" tabindex="0" style="display: none;">
<div class="slick-header ui-state-default slick-header-right">
<div class="slick-header-columns slick-header-columns-right ui-sortable"
style="left: -1000px; width: 0px;" unselectable="on"></div>
</div>
</div>
<div class="slick-pane slick-pane-top slick-pane-left" tabindex="0"
style="top: 44px; height: 257px; width: 100%;">
<div class="slick-headerrow ui-state-default" style="display: none; width: 100%;">
<div
style="display: block; height: 1px; position: absolute; top: 0px; left: 0px; width: 1110px;">
</div>
<div class="slick-headerrow-columns slick-headerrow-columns-left" style="width: 1093px;">
</div>
</div>
<div class="slick-top-panel-scroller ui-state-default" style="display: none;">
<div class="slick-top-panel" style="width:10000px"></div>
</div>
<div class="slick-viewport slick-viewport-top slick-viewport-left" tabindex="0" hidefocus=""
style="overflow: auto scroll; height: 257px; width: 100%;">
<div class="grid-canvas grid-canvas-top grid-canvas-left" tabindex="0" hidefocus=""
style="height: 490px; width: 1093px;">
</div>
</div>
</div>
<div class="slick-pane slick-pane-top slick-pane-right" tabindex="0" style="display: none;">
<div class="slick-headerrow ui-state-default" style="display: none;">
<div
style="display: block; height: 1px; position: absolute; top: 0px; left: 0px; width: 1110px;">
</div>
<div class="slick-headerrow-columns slick-headerrow-columns-right"></div>
</div>
<div class="slick-top-panel-scroller ui-state-default" style="display: none;">
<div class="slick-top-panel" style="width:10000px"></div>
</div>
<div class="slick-viewport slick-viewport-top slick-viewport-right" tabindex="0" hidefocus=""
style="overflow: auto scroll; height: 257px;">
<div class="grid-canvas grid-canvas-top grid-canvas-right" tabindex="0" hidefocus=""
style="height: 490px;"></div>
</div>
</div>
<div class="slick-pane slick-pane-bottom slick-pane-left" tabindex="0" style="display: none;">
<div class="slick-viewport slick-viewport-bottom slick-viewport-left" tabindex="0" hidefocus=""
style="overflow: auto scroll;">
<div class="grid-canvas grid-canvas-bottom grid-canvas-left" tabindex="0" hidefocus="">
</div>
</div>
</div>
<div class="slick-pane slick-pane-bottom slick-pane-right" tabindex="0" style="display: none;">
<div class="slick-viewport slick-viewport-bottom slick-viewport-right" tabindex="0" hidefocus=""
style="overflow: auto scroll;">
<div class="grid-canvas grid-canvas-bottom grid-canvas-right" tabindex="0" hidefocus="">
</div>
</div>
</div>
<div tabindex="0" hidefocus="" style="position:fixed;width:0;height:0;top:0;left:0;outline:0;">
</div>
</div>
<!-- Pagination section under the grid -->
<!--anchor-->
<!-- Custom Footer section under the grid -->
<!--anchor-->
<!-- Footer slot if you need to create a complex custom footer -->
<!--slot-->
</div>
</aurelia-slickgrid>
</div>
</div>
Hi there, you'll be able to pass a string and if that is the case the Resizer Service won't change it, so passing 100%
or anything else as a string will work. I'm aiming for sometime next week, I got other PRs to do in coming days.
closed by PR #284
This is now live with a few other things, see the new version Release 3.5.0
Cheers ⭐
So I actually just tried setting the gridWidth: '100%'
and wow I can't imagine why I waited so long to try it, I totally missed out, it's magic lol. Just too bad the height doesn't work the same, but I can live with that. Thanks for the tip
Setting the height to e.g. 100vh could work. I guess your container and or body,HTML dont have height:100% set so the grid doesnt know what the max could be
the thing is that I always enable the auto-resize (with Resizer Service) so I'm not sure if it conflict with that but I can try. I know setting gridHeight: '100%'
doesn't work because it only shows 1px bar lol.
I just tried it and 100vh
will calculate the height of your browser, that is not what I want since I am in a Tab container.
Thanks for the tip though, was worth a try 😉
Yeah thats what i meant, so from your grid all the Containers up to body and html need to have 100% height. The 100vh was just meant as example that applying fixed dimensions with viewport height work, so percentages should work as well if the containers allow for growth.
Oh and plus the display property could also matter
I think the height: 100%
doesn't work mostly because of how SlickGrid (core lib) relies on defined and fixed sizes which is also why I had to build this Resizer Service. There's method like grid.resizeCanvas()
that applies sizes directly on the style
of the grid container so we can't play too much with it (even the rows have defined style
directly on each of them, which is also why we can't do word wrapping in SlickGrid, everything is precalculated). But at least I'm happy with this width: 100%
that does the job pretty good, if it's only the height to control it's not the end of the world, I'm happy with this new width finding 😄
BTW, and slightly related to this, I'm currently working (and soon wrapping it up) on an opt-in resize column by their cell content (asked by the business on our side). The POC is done and working, mainly the unit tests left to write (painful part lol). Slickgrid-Universal PR #309. It's opt-in because it does loop through the dataset (first thousand rows) to calculate widths, so it takes CPU cycle hence the opt-in. The business have grids with so many columns sometime, it's crazy lol
Hey guys, latest release is out and the main feature is what I wrote earlier about, the "Resize Columns by Their Content".
Go check it out version 3.6.0 and also don't forget to always update all the @slickgrid-universal
at the same time.