I'm submitting a Bug report Your Environment <table role="

closed by PR <a href="https://github.com/ghiscoding/slickgrid-universal/pull/284" data

So I actually just tried setting the gridWidth: '100%'</code

Autosized width overflows parent div in bootstrap 3.,about ghiscoding/aurelia-slickgrid

Comments (10)

ghiscoding commented on May 26, 2024 1

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

from aurelia-slickgrid.

ghiscoding commented on May 26, 2024 1

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.

from aurelia-slickgrid.

ghiscoding commented on May 26, 2024

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.

from aurelia-slickgrid.

ItWorksOnMyMachine commented on May 26, 2024

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>

from aurelia-slickgrid.

ghiscoding commented on May 26, 2024

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.

from aurelia-slickgrid.

ghiscoding commented on May 26, 2024

closed by PR #284

This is now live with a few other things, see the new version Release 3.5.0

Cheers ⭐

from aurelia-slickgrid.

ghiscoding commented on May 26, 2024

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

from aurelia-slickgrid.

zewa666 commented on May 26, 2024

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

from aurelia-slickgrid.

ghiscoding commented on May 26, 2024

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 😉

from aurelia-slickgrid.

zewa666 commented on May 26, 2024

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

from aurelia-slickgrid.

Autosized width overflows parent div in bootstrap 3. about aurelia-slickgrid HOT 10 CLOSED

Comments (10)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent