Django: Bootstrap группа ввода не отображает нужный HTML / CSS с формой - PullRequest
Новая
       5

Django: Bootstrap группа ввода не отображает нужный HTML / CSS с формой

0 голосов
/ 21 апреля 2020

Я относительно новичок в Django и у меня проблема с отображением формы в качестве группы ввода в Bootstrap. Форма для добавления сообщения в модель для чата.

Вот то, к чему я стремлюсь как группа ввода: Ожидаемая группа ввода

Это может быть достигается с помощью следующего HTML: 

<div class="input-group">
    <div class="input-group-append">
        <span class="input-group-text attach_btn"><i class="fas fa-paperclip"></i></span>
    </div>
    <textarea name="" class="form-control type_msg" placeholder="Type your message..."></textarea>
    <div class="input-group-append">
        <span class="input-group-text send_btn"><i class="fas fa-location-arrow"></i></span>
    </div>
</div>

Теперь с помощью Django для включения формы в группу ввода я использую следующее: 

<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text attach_btn"><i class="fas fa-paperclip"></i></span>
    </div>
    <form method="post" action=".">
        {% csrf_token %}
        {{ form.content }}
        <div class="input-group-append">
            <button class="send_btn" type="submit"><i class="fas fa-location-arrow"></i></button>
        </div>
    </form>
</div>

Это с использованием ниже forms.py:

class JobMessageForm(ModelForm):
content = forms.CharField(required=True, widget=forms.Textarea(attrs={
    'class': 'form-control type_msg',
    'placeholder': 'Type your message...'}), label=False)

class Meta:
    model = JobMessage
    fields = ('content',)

Это дает мне следующее: Текущая группа ввода

Любая помощь в достижении ожидаемого результата будет принята с благодарностью! Дайте мне знать, если какая-либо дополнительная информация поможет.

1 Ответ

0 голосов
/ 23 апреля 2020

Оказалось, что ответом было просто сделать саму форму входной группой:

<form class="input-group" method="post" action="."> <div class="input-group-prepend"> <span class="input-group-text attach_btn"><i class="fas fa-paperclip"></i></span> </div> {% csrf_token %} {{ form.content }} <div class="input-group-append"> <button class="send_btn" type="submit"><i class="fas fa-location-arrow"></i></button> </div> </form>

...