Prepend or append icon in field of django-crispy-forms

Question

I have the following field in a Form:

<div class="form-group ">
 <div class="input-group">
  <input class="form-control" id="To" name="To" placeholder="To" type="text"/>
  <i class="glyphicon glyphicon-map-marker form-control-feedback"></i>
 </div>
</div>

which looks like

and I am trying to have a similar result using crispy-forms.

I tried

self.helper.layout = Layout(
            Fieldset(
                'Title',
                PrependedText(
                    'From',
                    <i class="glyphicon glyphicon-map-marker"></i>
                    ),
                'To',
                'Date',
                ButtonHolder(
                    Submit('submit', 'Search', css_class='button white')
                )
            )
        )

but I get a SyntaxError: invalid syntax.

Is it possible to add an icon as PrependedText in crispy-forms? If not, is there any alternative?

(Edit)

Trying

self.helper.layout = Layout(
                        Field(PrependedText('From', HTML('<span class="glyphicon glyphicon-map-marker"></span>')), placeholder='From'),
                        'To',
                        'Date',
                        ButtonHolder(
                            Submit('submit', 'Search', css_class='button white')
                        )
                    )

does not raise any error, but no icon is shown.

score 3 · Answer 1 · edited Dec 19 '16 at 16:48

3

self.helper.layout = Layout(
   Div(HTML('''
       <div class="input-group"> 
         <input class="form-control" id="To" name="To" placeholder="To" type="text"/>
         <i class="glyphicon glyphicon-map-marker form-control-feedback"></i> 
       </div>'''), 
      class="form-group")

edited Dec 19 '16 at 16:48

J0ANMM

7,849
10
56
90

answered Dec 19 '16 at 14:48

Neeraj Kumar

3,851
2
19
41

Thanks for your answer @NeErAj . This seems like hardcoding the complete html for that field into crispy-forms, which to me does not make that much sense. Is there not a more elegant way where only modifying the info about the icon itself would be needed? – J0ANMM Dec 19 '16 at 16:00
Crispy-form is not good for custom form design. You have to use HTML hardcode for design form. – Neeraj Kumar Dec 19 '16 at 16:19

score 3 · Answer 2 · answered Jul 21 '18 at 09:49

This works with placeholders:

self.helper = FormHelper()
self.helper.form_show_labels = False

self.helper.layout = Layout(
    Field(
        PrependedText('email',
                      mark_safe('<span class="glyphicon glyphicon-envelope"></span>'),
                      placeholder=_("Enter Email"), autofocus="")
    ),
    Field(
        PrependedText('name',
                      mark_safe('<span class="glyphicon glyphicon-user"></span>'),
                      placeholder=_("Enter Full Name"))
    ),

score 1 · Answer 3 · edited May 23 '17 at 11:53

An alternative to using glyphicons would be using similar unicode symbols:

self.helper.layout = Layout(
            Field(PrependedText('From', '&#x1f4cc'), placeholder='From'),
            Field(PrependedText('To', '&#x1f4cc'), placeholder='To'),
            Field(PrependedText('Date', '&#x1f4c5'), placeholder='Date'),
            FormActions(ButtonHolder(Submit('submit', 'Search', css_class='btn btn-primary')))
        )

Problem here is that placer holder is for some reason not working...

Note also that appending '︎' to the unicode symbols to force that it is not rendered to emojis, as suggested here, does not seem to work.

score 1 · Answer 4 · answered May 28 '18 at 02:50

1

just use django's mark_safe helper like this:

from django.utils.safestring import mark_safe
Field(PrependedText('From',
                    mark_safe('<span class="glyphicon glyphicon-map-marker"></span>')),
      placeholder='From')

answered May 28 '18 at 02:50

user2287459

11
1

Prepend or append icon in field of django-crispy-forms

4 Answers4