web-dev-qa-db-fra.com

Contrôlez la taille du widget TextArea dans Django admin

J'ai réussi à remplacer l'apparence d'un widget TextArea dans l'interface d'administration Django de deux manières différentes:

en utilisant formfield_overrides

dans admin.py:

class RulesAdmin(admin.ModelAdmin):
formfield_overrides = {
    models.TextField: {'widget': Textarea(
                       attrs={'rows': 1,
                              'cols': 40})},
}

...
admin.site.register(Rules, RulesAdmin)

Cette façon est un peu exagérée, car elle changera tous les TextField pour ce modèle.

avec un formulaire personnalisé:

dans forms.py:

from Django.forms import ModelForm, Textarea
from TimePortal.models import Rules


class RulesModelForm(ModelForm):
    class Meta:
        model = Rules
        widgets = {
            'parameters': Textarea(attrs={'cols': 30, 'rows': 1}),
   }

dans admin.py

from AppName.forms import RulesModelForm

class RulesAdmin(admin.ModelAdmin):

    form = RulesModelForm

Les deux solutions redimensionnent le TextArea. Cependant, dans les deux solutions, la taille réelle de la zone de texte est supérieure à 1 ligne (en fait 2 lignes). Voici à quoi ressemble le HTML rendu:

    <div class="form-row field-parameters">
            <div>
                <label for="id_parameters" class="required">Parameters:</label>
                <textarea id="id_parameters" rows="1" cols="30" name="parameters">{}</textarea> 
           <p class="help">Enter a valid Python Dictionary</p>
         </div>
    </div>

Et voici un aperçu:

Form

Selon référence W3C pour la zone de texte :

La taille d'une zone de texte peut également être spécifiée par les propriétés CSS height et width.

Donc, mes questions sont:

  • Est-ce que le thème css de Django est le responsable ici du comportement "étrange" de ce widget?
  • Certains peuvent-ils suggérer un moyen de résoudre ce problème?
32
Oz123

Il s'agit d'un problème spécifique au navigateur.

Selon le fil la hauteur de la zone de texte ne correspond pas aux lignes de Firefox :

Firefox ajoute toujours une ligne supplémentaire après le champ de texte. Si vous voulez qu'il ait une hauteur constante, utilisez CSS ...

Vous pouvez définir un attribut style de la zone de texte:

from Django.db import models
from Django.forms import Textarea

class RulesAdmin(admin.ModelAdmin):
    formfield_overrides = {
        models.TextField: {'widget': Textarea(
                           attrs={'rows': 1,
                                  'cols': 40,
                                  'style': 'height: 1em;'})},
    }

Fonctionne pour moi - testé sur Firefox v.23 et Chrome v.29.

J'espère que cela pourra aider.

34
alecxe