Xadmin后台表单优化

标签不对齐、输入框尺寸、整体视觉居中

标签不对齐

标签未对齐主要是BooleanField字段，在页面上展示出来是选择框的效果，但是与上下文不对齐，如图所示。

出现该问题原因是因为对应的label标签的class属性为空，正常情况下改label的class应该和其他输入项的相同，缺失了就导致不对齐。处理修改xadmin/templates/xadmin/views/model_form.html文件，使用下面的代码补上class属性。

<script type="text/javascript">
$(document).ready(function () {
    let lables = document.querySelectorAll(".checkbox label");
    for(let lable of lables){
    lable.className="control-label"
    }})
</script>

长文本输入框尺寸过大

长文本输入框的宽度是整体编辑区域的宽度，看起来并不美观，长本文的标签ID是id_introduce，在xadmin/templates/xadmin/views/model_form.html中为该ID增加一个样式，限制输入框的尺寸。

#id_introduce {
    width: 50% !important;
    height: 140px;
}

整体的布局效果不美观

整体布局存在的问题是输入项的label标签过宽，编辑区域在屏幕上偏右，同样还是model_form.html文件，增加标签ID：control-label、controls的样式。

.control-label {
    width: 10% !important;
}

.controls {
    margin-left: 11% !important;
}

整体效果如下：

声明：本博客原创内容，欢迎转发，转载请来源：www.py36.cn/info/116.html。