Rendering Template leaves large blank space between header and table

Using Django Templates & Frontend
1

I’m not sure this is a django issue but I have a template that renders the items properly except there is a large blank space between teh <1> tag item and the

. Not sure why, and I have tried moving tags, changing css styles, etc but it always renders the same.

CleanShot 2024-10-15 at 17.09.28@2x
CleanShot 2024-10-15 at 17.09.28@2x2824×936 84.3 KB

css for table and text area used in table:

  table{
    width: 90vw;
    margin-right: auto;
    margin-left: auto;
    margin-top: auto;
    margin-bottom: auto;
  }

textarea {
  padding-top: 15px;
  text-align: center;
  display: inline-block;
  border: 1px solid #382c2c;
  border-radius: 10px;
  box-sizing: border-box;
  vertical-align: middle;
}

template

{% load static %}

<!DOCTYPE html>
<html lang = "en">

    <link rel="stylesheet" href="{% static 'css/styles.css' %}">
<head>
  <title>Project Management</title>
</head>
<body>
  <h1>Strategy Map</h1>
    <form method="POST" "{% url "home" %}" enctype="multipart/form-data">
      {% csrf_token %}
      <table>
          <tr>
          <th>Project</th>
          {% for n in objectives %}
          <th>Objective</th>
          {% endfor %}
          <th>Outcome</th>


            {{ formset.management_form }}
              {% for formset in formset_list %}
                   <div>
                      <tr>
                                {% for form in formset %}
                                <th>  {{ form.objective_text }} </th>
                                {% endfor %}
                      </tr>                        
                    </div>
                  <br></br>
              {% endfor %}
      
      </table> 
        <div>
          <input type="submit" value="Update Objectives">
        </div>
  </form>
  </body>
  </html>
2

You can use your browser’s developer tools to look at the elements on the page to see what css is styling those elements. That’ll help you identify what’s causing the excess spacing to appear.

1 Like
3

This won’t be a Django issue. As Ken said, use the browser developer tools to see what’s going on. I would start with the table margins - is there a reason you’re setting the top and bottom margins to auto? There’s also some invalid HTML within the table - you typically have a series of th elements within a tr at the top of the table - these are the table column headers. Then you start a new row with tr and then have a series of table data cells (td) for the data. I can’t quite tell what you’re trying to achieve with the HTML you’ve shown above, but I can say for sure that you shouldn’t be wrapping a table row in a div element. Nor should you use <br></br> - that’s invalid HTML, so you can remove that.

Take a look at the following link to see what a valid HTML table should look like: <table>: The Table element - HTML: HyperText Markup Language | MDN

1 Like
4

Thanks for the help. Found the issue:

The (br) was rendering before the table, causing the spacing issue. As I side note, I forgot (br) is an empty tag and added (/br) out of habit. Also fixed the invalid (th) tags, and removed the (div). One bad programming habit I have is once I get the program to do what I want I tend not to remove code that has no effect and should not be left in.

In this case (th) and (td) had the same effect, which was to layout a 6x0 grid of textareas.

The top & bottom margins set to auto was just a shot in the dark to try to fix the problem and I didn’t bother to remove it from the css.

5

If in doubt, copying the page’s HTML from the View Source panel in your browser and pasting it into something like The W3C Markup Validation Service can reveal things you’ve overlooked.

1 Like
6

Thanks. Picked up some things, allow it seems not to like Django forms tags, which is to be expected.

7

Yes, so that’s why to use the rendered HTML page from your browser, not the Django template (which will never be valid).

8

Side note: The “View Source” only shows the original page as retrieved from the server. If you have any JavaScript modifying the page, it is not reflected by “View Source” - that’s why I recommend people getting the current page from the developer tools.

1 Like
9

Hmm. I was using “View Source” from Safari’s Developer menu; which resulted in various errors due to how things like POST are rendered such as / in a url.

10

If you mean this:

I think it’s because you’re missing the action attribute. It should be:

1 Like