字段之间的垂直分隔符及其在 Odoo 中的值 Xml 视图

Question

我在 Odoo V13 中有一个视图 xml。我在 div 标签中有如下代码。我只想要一个垂直分隔的竖线或一条分隔字段名称及其值的线。

查看如下：

<group>
<div>
   <div class="row">
       <label string="Website" for="field_id" class="col-lg-5 font-weight-bold"/>
       <field name="web_site" id="field_id" class="oe_inline"/>
    </div>
   <div class="row">
       <label string="Apply on First" for="field_id" class="col-lg-5 font-weight-bold"/>
       <field name="Apply_First" id="field_id" class="oe_inline"/>
    </div>
    <div class="row">
       <label string="Start Date" for="field_id" class="col-lg-5 font-weight-bold"/>
       <field name="start_date" id="field_id" class="oe_inline"/>
    </div>
    <div class="row">
       <label string="End Date" for="field_id" class="col-lg-5 font-weight-bold"/>
       <field name="end_date" id="field_id" class="oe_inline"/>
    </div>
</div>
</group>

我的预期O/p：

目前，我还看到更多 space 字段名称及其值之间没有垂直分隔符，如图所示。我想减少字段及其值之间的 space。我只想了解我们是否有任何 css/bootstrap 样式。

Answer 1

我猜你可以使用 css border 来实现类似的目标。

1 - 第一种方法：

将 border 属性放在字段或标签上：

HTML:

<div>
  <div class=row>
    <label string="Website" for="field_id" class="col-lg-5 font-weight-bold label">Label 1</label>
    <field class="field">Field 1</field>
  </div>
   <div class=row>
    <label string="Website" for="field_id" class="col-lg-5 font-weight-bold label">Label 2</label>
    <field class="field">Field 2</field>
  </div>
   <div class=row>
    <label string="Website" for="field_id" class="col-lg-5 font-weight-bold label">Label 3</label>
    <field class="field">Field 3</field>
  </div>
</div>

CSS:

.label{
  padding-right: 8px;
  border-right: 1px solid grey;
}

.field{
  padding-left: 5px;
}

JSFiddle：https://jsfiddle.net/q6t1y3r7/4/

2 - 第二种实现方式：

Re-organise div 有一个列显示，并将 border 属性放在其中一个上：

HTML:

<div>
  <div class="column column-with-border">
    <label string="Website" for="field_id" class="col-lg-5 font-weight-bold label">Label 1</label><br>
    <label string="Website" for="field_id" class="col-lg-5 font-weight-bold label">Label 2</label><br>
    <label string="Website" for="field_id" class="col-lg-5 font-weight-bold label">Label 3</label><br>
  </div>
  <div class="column field">
   <field class="field">Field 1</field><br>
    <field class="field">Field 2</field><br>
    <field class="field">Field 3</field><br>
  </div>
</div>

CSS:

.column{
  display:inline-block;
}
.column-with-border{
  border-right: 2px solid grey;
}
.label{
  padding-right: 8px;
}
.field{
  padding-left: 1px;
}

JSFiddle：https://jsfiddle.net/dmwc9sk2/5/

字段之间的垂直分隔符及其在 Odoo 中的值 Xml 视图

Vertical separator in between field and its value in Odoo Xml Views

html

css

python

odoo

bootstrap-4