Pythonic Django Form Charfield CSS

Question

I have a Django Charfield form that I would like to change via CSS. I want to change it in 2 ways.

 1. Width = 300 (solution below)
 2. Submit button inline with the input field (no idea)

forms.py:

class SheetForm(forms.Form):
    sheet_lookup = forms.CharField(max_length=30)

served in my index.html template:

{% extends "check/base.html" %}
{% block content %}

<div>
<form method="POST" class="post-form">
    {% csrf_token %}
    <h1>Scan Here:</h1>{{ form.as_p }}
    <button type="submit" class="save btn btn-default">Scan</button>

</form>
</div>
{% endblock %}

my base.html:

{% load staticfiles %}
<html>
<head>
    <title>Sheet Checker</title>
    <link href="http://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

    <link rel="stylesheet" href="{% static "css/main.css" %}">
</head>
<body>
    <div>
        <h1><a href="{% url 'index' %}">Sheet Check</a></h1>
    </div>
    <div>
        {% block content %}
        {% endblock %}
    </div>
</body>
</html>

I have a forms.py that works:

class SheetForm(forms.Form):
    sheet_lookup = forms.CharField(
                         max_length=30, 
                         widget=forms.TextInput(attrs={'style':'width:300;'}))

But I don't think this is the correct way to affect the width change.

Also I am completely stuck on making the button inline with the input field

widget=forms.TextInput(attrs={'style':'width:300px;'}) works for me. Note: "px" — Jason Liu
– Jason Liu, Commented Mar 19, 2020 at 0:33

Saurabh Goyal · Accepted Answer · 2015-08-27 18:30:20Z

1

For width, you can do either what you mentioned, i.e. setting widget attribute in form, or you can do that in the template as given below-

index.html

{% extends "check/base.html" %}
{% block content %}

<div>
<form method="POST" class="post-form">
    {% csrf_token %}
    <h1>Scan Here:</h1>
    {% for field in form %}
        {{ field.errors }}
        {{ field.label_tag }}
        <input type="text" maxlength="30" style="width:300;" id="{{ field.auto_id }}" name="{{ field.html_name }}"/>
    {% endfor %}
    <button type="submit" class="save btn btn-default">Scan</button>
</form>
</div>
{% endblock %}

This will help you understand it.

EDIT (doing the same with css sheet)- You just use a class instead of inline styling.

{% extends "check/base.html" %}
{% block content %}

<div>
<form method="POST" class="post-form">
    {% csrf_token %}
    <h1>Scan Here:</h1>
    {% for field in form %}
        {{ field.errors }}
        {{ field.label_tag }}
        <input type="text" maxlength="30" class="fixed-width" id="{{ field.auto_id }}" name="{{ field.html_name }}"/>
    {% endfor %}
    <button type="submit" class="save btn btn-default">Scan</button>
</form>
</div>
{% endblock %}

and in you style.css

.fixed-width {
    width: 300px,
}

OP Edit - Fixed the formatting of from {% field.errors %} to {{ field.errors }} and {% field.label_tag %} to {{field.label_tag}} to work in Django 1.8

edited Aug 27, 2015 at 18:30

answered Aug 26, 2015 at 18:49

Saurabh Goyal

6477 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TangoAlee Over a year ago

Awesome - thanks for your help! would there be a way to do this via a CSS sheet?

Collectives™ on Stack Overflow

Pythonic Django Form Charfield CSS

1 Answer 1

index.html

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

index.html

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related