Django Bootstrap 3 reagiert nicht mit Formular

Ich schreibe ein einfaches Formular in Django mit diesen Feldern: DateField, CharField, Textarea und Autocomplete-light (Abfrage der Datenbank zur automatischen Vervollständigung). Alle Felder funktionieren gut, aber wenn ich sie in HTML rendere, ändern sie sich nicht, wenn das Browserfenster klein wird. Ich setze Jumbotron in einen Container, nur der Button reagiert eigentlich ... Was ist das Problem der anderen Felder?Django Bootstrap 3 reagiert nicht mit Formular

html:

{% load staticfiles %} 
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type="text/css"/> 
<link rel="stylesheet" href="{% static 'css/custom.css' %}" type="text/css"/> 

<body> 
    <div class="container"> 
     <div class="jumbotron"> 
        <form method='POST' action'' enctype="multipart/form-data">{% csrf_token %} 
        <div class="form-group"> 
         <table class="rica"> 
           {{ form.as_table }} 
         </table> 
        </div> 
         <input type="submit" class="btn btn-light-blue btn-md btn-block" value="INVIA RICHIESTA"> 
        </form> 
     </div> 
    </div> 
</body>

Quelle

2017-05-08 lausent

Innerhalb Ihrer Form möchten Sie die CSS-Klasse geben Sie das Formularfeld zu nehmen. Es wird dann entsprechend formatiert. Bootstrap Formularfelder in der Regel class="form-control" verwenden, so wollen Sie ein Formular so etwas wie (dies ist meist ein Kopieren und Einfügen von einem tatsächlichen Formular I):

class MyModelForm(forms.ModelForm): 
    class Meta: 
     model = MyModel 
     exclude = ('id',) 
     widgets = { 
      'name' : forms.TextInput(attrs={'class' : 'form-control'}), 
      'image' : forms.FileInput(attrs={'class' : 'form-control'}), 
      'add1' : forms.TextInput(attrs={'class' : 'form-control'}), 
      'add2' : forms.TextInput(attrs={'class' : 'form-control'}), 
      'add3' : forms.TextInput(attrs={'class' : 'form-control'}), 
      'add4' : forms.TextInput(attrs={'class' : 'form-control'}), 
      'position' : forms.TextInput(attrs={'class' : 'form-control'}), 
      'hours' : forms.Select(attrs={'class' : 'form-control'}), 
      'salary' : forms.Select(attrs={'class' : 'form-control'}), 
      'website' : forms.URLInput(attrs={'class' : 'form-control'}), 
     }

Quelle

2017-05-08 19:51:20 HenryM

Ich füge 'Klasse' hinzu: 'form-control' und arbeitet jetzt mit forms.Textarea (der Textbereich ändert sich jetzt mit dem Browser, aber wenn der Benutzer die Breite und die Höhe mit der Maus steuert, blockiert der Textbereich nicht auf dem grauen Container Rand wie das obige Bild. Sowieso nicht funktioniert für Autocomplete.ModelSelect2 (URL = 'Fly-Autocomplete', Attrs = {'Klasse': 'Form-Control', 'Daten-Platzhalter': 'Par', 'Data-Minimum- Eingabedauer ': 3}), – lausent

Wenn yo Du willst nicht, dass der Benutzer die Größe der Textfläche ändert. benutze 'style =" resize: none "' – HenryM

Ich habe das Problem auf diese Weise teilweise gelöst: "pip install django-bootstrap-form". In der html ich oben einfügen {% laden Bootstrap%} und nachdem ich {{Form | Bootstrap}}. Jetzt reagieren alle Inhalte, außer für das Auto-Compile-Lichtfeld. In forms.py definiere ich auto = autocomplete.ModelSelect2 (url = 'fly-autocomplete', attrs = {'class': 'form-control', 'datenplatzhalter': 'Par', 'data-minimum-input' "Länge": 3}). Wie kann ich reagieren? – lausent

setzten class="form-control" auf Ihre Textfelder und setzte style="resize:none ", um Ihre Textarea

Quelle

2017-05-08 20:11:12

Django Bootstrap 3 reagiert nicht mit Formular

Antwort

Verwandte Themen