4

My decimal ModelForm fields are being displayed with an "up/down arrows" within the field that increases/descrease the field's values.

Any feedback on how I could remove/hide those arrows?

Form:

class PriceAssessment1Form(forms.ModelForm):
    class Meta:
        model = Component
        fields = ['size_height','size_width','size_length','weight','base_material_price']

Model

class Component(models.Model):

    name = models.CharField(max_length=255)
    created_date= models.DateTimeField(default=datetime.now)
    user = models.ForeignKey(User)
    price_assessment_started = models.BooleanField(default=False)

    size_height = models.DecimalField(null=True,blank=True, max_digits=9, decimal_places=2)
    size_width = models.DecimalField(null=True,blank=True, max_digits=9, decimal_places=2)
    size_length = models.DecimalField(null=True,blank=True, max_digits=9, decimal_places=2)

    weight = models.DecimalField(null=True,blank=True, max_digits=9, decimal_places=2)

    base_material_price = models.DecimalField(null=True,blank=True, max_digits=9, decimal_places=2)

Template 

<form action="{% url 'portal_price_assessment' component_id %}" method="post"> {% csrf_token %}
            <div>
                <div>size_height {{ form.size_height }}</div>
                <div>size_width {{ form.size_width }}</div>
                <div>size_length {{ form.size_length }}</div>
                <div>weight {{ form.weight }}</div>
                <div>base_material_price {{ form.base_material_price }}</div>
             </div>
            <div style="margin-top:18px;">
                <a href="{% url 'portal_home' %}" class="btn btn-link">Cancel</a>
                <button class="btn" type="submit" >&nbsp;Save & Close</button>
            </div>
        </form>
bbrooke
  • 2,267
  • 10
  • 33
  • 41

2 Answers2

7

You can override the ModelForm field to use whatever widget you would prefer like so:

class AuthorForm(ModelForm):

    class Meta:
        model = Author
        fields = ('name', 'title', 'birth_date')
        widgets = {
            'name': TextInput(attrs={'placeholder': 'That dude cray'}),
        }
parsenz
  • 409
  • 5
  • 10
3

I found the answer here: Can I hide the HTML5 number input’s spin box?

The "arrows" are called "spinners"

Community
  • 1
  • 1
bbrooke
  • 2,267
  • 10
  • 33
  • 41