CODEWITHSUNDEEP
pythonhtmltwitter-bootstrapflaskwtforms
Waqar Detho
Waqar Detho

Reputation: 1522

Flask WTF forms adding a glyphicon in a form field

I have a Flask Wtf form as follows:

class URL_Status(Form):
    url = URLField("Enter URL",
                       validators=[url(), DataRequired()],
                       render_kw={"placeholder": "http://www.example.com"},)
    submit = SubmitField('Search', render_kw={"onclick": "loading()"})

now I would like to add a bootstrap glyphicon in the input filed i.e. 'url'. As far as I know from this link. We need to write the code as follows:

<div class="form-group has-feedback">
    <label class="control-label">Username</label>
    <input type="text" class="form-control" placeholder="Username" />
    <i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>

When I call the form in HTMl my html creates all the code except this line:

<i class="glyphicon glyphicon-user form-control-feedback"></i>

Any suggestions how can I add this line from my class 'URL_Status' so that I am able to see a glyphicon with my input field. Thanks

Upvotes: 0

Views: 2655

Answers (3)

Lorenzo Tomaz
Lorenzo Tomaz

Reputation: 11

You can use jinja2 macros do render a glyphicon with your form, and then import the macro you've created in your current html

Example: 1. create an html (example: "_form_macro.html") file with this macro inside:

{% macro render_field(field) %}

    <dt>{{ field.label }}
    <dd>{{ field(**kwargs)|safe }}
            <span class="add-on form_input"><i class="icon-calendar fa-border form_input"></i></span>

    {% if field.errors %}
        <ul class=errors>
        {% for error in field.errors %}
            <li>{{ error }}</li>
        {% endfor %}
        </ul>
    {% endif %}
    </dd> 
{% endmacro %}
  1. import the macro in your current html using: 
{% from "_form_macro.html" import render_field %}
  1. Use the macro you've created to render your form like this:
{{ forms.form_name.label_tag }}
{{ render_field(forms.form_name, type="yourtype", class="yourclass") }}
  1. Check http://jinja.pocoo.org/docs/2.10/templates/ for more information about macros

Upvotes: 1

Grey Li
Grey Li

Reputation: 12772

Here is a little trick to solve this problem.

CSS:

.user-icon {
padding-left:30px;
background-repeat: no-repeat;
background-position-x: 4px;
background-position-y: 4px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAWCAYAAAArdgcFAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA+5pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ1dWlkOjY1RTYzOTA2ODZDRjExREJBNkUyRDg4N0NFQUNCNDA3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIzOUVGMUYxMDY3MTExRTI5OUZEQTZGODg4RDc1ODdCIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkIzOUVGMUYwMDY3MTExRTI5OUZEQTZGODg4RDc1ODdCIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowMTgwMTE3NDA3MjA2ODExODA4M0ZFMkJBM0M1RUU2NSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowNjgwMTE3NDA3MjA2ODExODA4M0U3NkRBMDNEMDVDMSIvPiA8ZGM6dGl0bGU+IDxyZGY6QWx0PiA8cmRmOmxpIHhtbDpsYW5nPSJ4LWRlZmF1bHQiPmdseXBoaWNvbnM8L3JkZjpsaT4gPC9yZGY6QWx0PiA8L2RjOnRpdGxlPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkX/peQAAACrSURBVHja7JSLCYAwDEQbJ3AER+kouoFu0FEcqSM4gk4QE4ggVRPxg1A8OFCSvkqC5xDRaSZ5ciTjyvzuzbMnwKjY34FHAx618yCQXQHAcVFE5+GoVijgyt3UN1/+hPKFd0a9ubxQa6naMjOdOY2jJAdjZIH7tJ8gzRNuZuho5MriUfpLNbhINXk4Cd27pN3AJVqvQlMPSxSz+oegqXuQhz9bNvDpJfY0CzAA6Ncngv5RALIAAAAASUVORK5CYII=);}

Template:

<form class="form form-horizontal" method="POST">
    {{ form.hidden_tag() }}
    {{ form.username(class_="form-control user-icon") }}
    {{ form.password }}
    {{ form.submit }}
</form>

This solution based on this answer. It just embedding the image representation of the glyphicon directly in the CSS using base64 URI encoding.

You can get base64 data of glyphicon on this site. Besides, You can also use image(25*25) to replace the base64 data. Like this:

background-image: url({{ url_for('static', filename='user.png') }});

Upvotes: 2

snahor
snahor

Reputation: 1201

I haven't used wtforms in a while. I think you need a custom widget:

class CustomURLInput(URLInput):
    ...
    def __call__(self,....):
        ...

Take a look at this https://github.com/wtforms/wtforms/blob/9be964158fbcd1af52b345451bbd14751127dd37/wtforms/widgets/core.py#L159 for details.

and your url field:

url = URLField(
    "Enter URL",
    validators=[url(), DataRequired()],
    render_kw={"placeholder": "http://www.example.com"},
    widget=CustomURLWidget()
)

Or you can do it in your template.

Upvotes: 1

Related Questions