I want to change the label or something on the edge

[Gemini-0529]

Now，the .vue-flow__edge-textbg width is 49.53px, but the .vue-flow__edge-text width is 62.56，this will result in a shorter background, What am I going to do? I tried to modify his style,for example

.vue-flow__edge-textbg {
  padding: 10px
}

But there was no response.

const edgeDetail = reactive({
  detail: {},
});
const nodeDetail = reactive({
  detail: {}
})


onNodeDragStop((e) => {
  nodeDetail.detail = e.node
})

onEdgeClick((e) => {
  edgeDetail.detail = e.edge
})

<el-form :model="edgeDetail.detail">
        <el-form-item label="Label：">
          <el-input v-model="edgeDetail.detail.label" @blur="blur"></el-input>
        </el-form-item>
        <el-form-item label="Type：">
          <el-select v-model="edgeDetail.detail.type">
            <el-option label="默认" value="default"></el-option>
            <el-option label="阶梯边缘" value="step"></el-option>
            <el-option label="平滑边缘" value="smoothstep"></el-option>
            <el-option label="直线" value="straight"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

...node form

Is this the right way to modify the label? Please point out my problem,thanks! --<-<-<@ (<-- rose ^_^)

[bcakmakoglu]

It's not the right way to modify the label styles.
The label isn't a regular HTML element, it's an svg element thus using padding as a css rule will do nothing here.
There are dedicated label props for this (like labelBgPadding).

If you want to use a regular html element, use the EdgeLabelRenderer instead.
You can find an example on the docs.

Open up the file CustomEdge.vue and see how it's used.

[Gemini-0529]

thanks a lot! I'll try again.