Fixed data table row cells overlapping on left hand columns

[HDShabe]

Development Relevant Information:

• BalmUI version: 10.9.0
• Browser: Chrome
• Operating System: Windows 10

Hi @elf-mouse

I'm seeing an issue where i've got a datatable where i'm fixing the first and last column left and right, with each of the columns inbetween a slot with a text field in it.

For the last column, it sticks to the right just fine and the columns go under it as expected, however for the first column the 2nd column overlaps it.

Here we can see column 3 going under column 4.

However on the left hand side, column 1 seems to just go on top of column 2

The table column header seems fine, just the row itself overlapping.

I've simplified some example code here.

    thead = [
            'Row ID',
            'Column 2',
            'Column 3',
            'Column 4',
        ]

        tbody = [
            {
                field: 'rowID',
                fixed: 'left',
                width: 100,
                class: 'table-row-with-control'
            },
            {
                slot: 'slot1',
                width: 150
            },
            {
                slot: 'slot2',
            },
            {
                slot: 'actions',
                width: 100,
                fixed: 'right'
            }
        ]

<ui-table 
                          :data="tableData"
                          :thead="thead"
                          :tbody="tbody"
                          class="data-table"
                          :default-col-width="200"
                          fullwidth>

                    <template slot1="{ data }">
                        <ui-textfield v-model="data.column1"
                                      :type=1>
                        </ui-textfield>
                    </template>

                    <template slot2="{ data }">
                        <ui-textfield v-model="data.column2"
                                      :type=1>
                        </ui-textfield>
                    </template>

                    <template #actions="{ data }">
                        <ui-icon @click="delete(data)">delete</ui-icon>
                    </template>
                </ui-table>

Let me know if you need any further information!

Cheers.

[elf-mouse]

It's css bug. It has been fixed in 10.9.2.

Thanks a lot~

[HDShabe]

Perfect, looks good!

Cheers.