Labels in the form is not showing

This is my model.py file code:

class Review(models.Model):
    VOTE_TYPE = (
        ('up','Up Vote'),
        ('down','Down Vote'),
    )
    owner = models.ForeignKey(Profile, on_delete=models.CASCADE, null = True)
    project = models.ForeignKey(Project, on_delete=models.CASCADE) # when the model is deleted, all the reviews should also be deleted.
    body = models.TextField(null = True, blank=True)
    value = models.CharField(max_length=200, choices = VOTE_TYPE)
    created = models.DateTimeField(auto_now_add=True)
    id = models.UUIDField(default=uuid.uuid4, unique=True,
                           primary_key=True, editable=False)

This is my forms.py code:

class ReviewForm(ModelForm):
    class Meta:
        model = Review
        fields = ['value', 'body']

        labels = {
            'value': 'Place your vote',
            'body': 'Add a comment with your code'
        }

    def __init__(self,*args,**kwargs):
        super(ReviewForm, self).__init__(*args, **kwargs)

        for name,field in self.fields.items():
            field.widget.attrs.update({'class':'input'})

This my html file code

<form class="form" action="{% url 'project' project.id %}" method="POST">
               {% for field in form %} 
               <!-- 'form' IS THE WORLD WE PUT IN CONTEXT DICT IN PROJECTS VIEW. -->
              <div class="form__field">
                <label for="formInput#textarea">{{ field.label }}</label> 
                {{ field }}
              </div>
              {% endfor %}
              <input class="btn btn--sub btn--lg" type="submit" value="Add Review" />
            </form>

The label's CSS is here:

 .comments {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 2px solid var(--color-light);
}

.comments .form label { 
  position: absolute;
  margin: -9999px; 
}

.commentList {
  margin: 3rem 0;
}

.comment {
  display: flex;
  gap: 2rem;
}

the problem is that Labels are not showing.Can anybody help me how to fix this issue? The picture's inspect will might help.

The image attached to this question will be very helpful.

enter image description here

it looks like your CSS is hiding the labels by positioning them absolutely and moving them off-screen with margin: -9999px

if you want the labels to be visible, remove or modify this rule

.comments .form label { 
  position: relative;  
  margin: 0; 
  display: block; 
  font-weight: bold; 
}

if modifying the css doesn’t work inspect the element using the browser dev tools and check if the labels are being rendered in the html if they exist in the dom but are hidden then css is the issue. If they are missing from the html, then django may not be rendering them properly

Вернуться на верх