purecloudlabs / fixtable-angular

Angular wrapper for Fixtable grid
MIT License
3 stars 3 forks source link

Table layout breaks with all but one specified width columns #40

Closed hornetnz closed 7 years ago

hornetnz commented 8 years ago

Came across a unique case today. My latest table has all columns set to a defined width except the last one. I'm also using a checkbox template with an empty div to hide that column & keep the rows clickable. Here's my config & checkbox template...

this.options = {
                    data: 'data',
                    loading: 'loading',
                    paging: true,
                    pagingOptions: new PagingOptions(
                        1,
                        Constants.PAGE_SIZES[0],
                        0,
                        Constants.PAGE_SIZES,
                        'getPageData'),
                    columns: [
                        {
                            template: 'app/layout/flexGridInteractionType.tmpl.html',
                            width: 25
                        },
                        {
                            label: results["INTERACTIONS.TIME"],
                            property: 'interactionTime',
                            template: 'app/layout/flexGridInteractionDate.tmpl.html',
                            sortable: true,
                            width: 80
                        },
                        {
                            label: results["INTERACTIONS.CONTACT"],
                            property: 'interactionRemote',
                            template: 'app/layout/flexGridInteractionRemote.tmpl.html',
                            width: 175
                        },
                        {
                            property: 'interactionDirection',
                            template: 'app/layout/flexGridInteractionDirection.tmpl.html',
                            width: 30,
                            cellClass: 'noPadding'
                        },
                        {
                            label: results["INTERACTIONS.USER"],
                            template: 'app/layout/flexGridInteractionUser.tmpl.html',
                            width: 175
                        },
                        {
                            label: results["ORG.NOTES"],
                            template: 'app/layout/flexGridInteractionNotes.tmpl.html'
                        }
                    ],
                    checkboxHeaderTemplate: 'app/layout/flexGridCheckbox.tmpl.html',
                    checkboxCellTemplate: 'app/layout/flexGridCheckbox.tmpl.html',
                    footerTemplate: 'app/layout/flexGridMinPagingFooter.tmpl.html',
                    loadingTemplate: 'app/layout/flexGridLoading.tmpl.html',
                    emptyTemplate: 'app/layout/flexGridNothing.tmpl.html',
                    sort: {
                        property: 'interactionDate',
                        direction: DESC
                    },
                    tableClass: 'table interactionList hideCheckbox',
                    debugMode: false,
                    rowSelection: true,
                    selectedItems: 'selectedRows',
                    rowSelectionWithCheckboxOnly: false
                };

Template: <div class="flexHideCheckbox" style="width: 0;"></div>

I can only reproduce this when all but one (doesnt matter which) is set to a width, including the checkbox column. I think the heart of the issue is, I cant put a class on the checkbox column to set a static width. The column stays at 0 until I hit some minimum threshold. Then it starts flexing like a default checkbox column would.

Normal flex: untitled

Broken flex: untitled2

Could we get a static class added to the checkbox column table cell?

rbrcurtis commented 8 years ago

Nikolai, want to submit a PR for this?

hornetnz commented 8 years ago

I'll see if I can find some spare time to add the class. Tho, that doesnt really solve the root issue.

michaelmcauley commented 7 years ago

Fixed in fixtable-core v1.3.12