如何减小Django框架中TextField字段的显示高度

你遇到的是Django默认将TextField渲染为多行textarea标签导致输入框过高的问题，可通过以下两种方案解决：

方案1：修改模型字段（最简方案） #

你的location字段仅设置了250字符的长度限制，属于短文本场景，直接将模型中的TextField替换为CharField即可，默认渲染为单行输入框，和其他输入框高度完全一致：

# 修改models.py中对应字段
location = models.CharField(max_length=250)

修改后执行数据库迁移命令即可生效。

方案2：保留TextField，修改表单控件属性 #

如果需要保留TextField的字段类型，可通过自定义表单修改控件的rows属性控制高度：

普通表单场景 #

在你的forms.py中定义表单时为location字段指定widget参数：

from django import forms
from .models import Lead

class LeadForm(forms.ModelForm):
    class Meta:
        model = Lead
        fields = ["first_name", "last_name", "location"] # 按需填写字段列表
        widgets = {
            # 设置rows=1即可得到单行输入框的高度
            "location": forms.Textarea(attrs={"rows": 1})
        }

如果需要更精细控制高度，还可以在attrs中添加style属性自定义，例如：
forms.Textarea(attrs={"rows":1, "style": "height: 30px;"})

Admin后台场景 #

如果是在Django admin中显示，可在admin.py中配置关联自定义表单即可：

from django.contrib import admin
from .models import Lead
from .forms import LeadForm

@admin.register(Lead)
class LeadAdmin(admin.ModelAdmin):
    form = LeadForm

效果对比 #

• 当前显示效果：
  
• 调整后期望效果：
  

内容的提问来源于stack exchange，提问作者Kirito-Kun