Safari and MIdori browser

[stickpro]

Hi some bug if use safari or midori(analog safari for linux)
header not have current height

[jiahengaa]

Hi some bug if use safari or midori(analog safari for linux)
header not have current height

I checked in midori that the latest version does not have this problem.

The environment is as follows:
win10
midori 1.1.4
Beegridtable v1.16

ubuntu
midori 1.1.4
Beegridtable v1.16

Please list your operating environment, Thanks!

[stickpro]

arch linux, midori 9.0

[stickpro]

safari, macOS Mojave

[stickpro]

Pls try install epiphany browser. In linux the problem is also present

[stickpro]

Thanks for fix! But there is one more bug with width row and header

[jiahengaa]

@stickpro please update to beegridtable v1.2.1, and need add import "beegridtable/dist/styles/beegridtable.css"; in main.js.

Installation: http://beegridtable.com/install

[stickpro]

ofc i update packege this bug works for custom header

[jiahengaa]

ofc i update packege this bug works for custom header

Wait a minute,I'll tell you why and how to fix.

[jiahengaa]

After referring to the following related cases, you can use minwidth to replace width in the column width definition

ElemeFE/element#3322 (comment)
ElemeFE/element#2207

your code should look like this:

export default {
  data() {
    return {
      columns: [
        {
          title: "编号",
          key: "code",
          minWidth: 150,
          resizable: true,
        },
        {
          title: "姓名",
          key: "name",
          minWidth: 150,
        },
        {
          title: "性别",
          slot: "sex",
          key: "sex",
          minWidth: 150,
          resizable: true,
        },
        { title: "年龄", key: "age", minWidth: 150, resizable: true },
        {
          title: "分组",
          slot: "group",
          key: "groupName",
          resizable: true,
        },
        {
          title: "观察状态",
          slot: "state",
          key: "state",
          minWidth: 200,
        },
        {
          title: "操作",
          slot: "op",
          key: "op",
          minWidth: 150,
        },
      ],
    };
  },
};

This will work in safari ！

I think this is caused by differences between browsers, and the column width will not be maintained in the component. For Safari compatibility, use minwidth instead of the width property.