如何解决字段之间的垂直分隔符及其在Odoo Xml视图中的值
我在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:
当前,我还看到“字段名称”与其值之间有更多空间,并且没有垂直分隔符,如图中所示。我想减少字段及其值之间的空间。 我只想了解我们是否为此使用任何CSS / bootstrap样式。
解决方法
我猜您可以使用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-实现此目标的第二种方法:
重新组织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/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。