CODEWITHSUNDEEP
djangotwitter-bootstrap
davidtgq
davidtgq

Reputation: 4000

Bootstrap navbar inconsistent height when logged in Django

Using the default Jumbotron theme with Django in PTVS, when logged in, all of the templates that I create have more height in the navbar. The text doesn't change, just the bottom margin of the navbar is further down by a few pixels.

The problem doesn't exhibit when:

I tried copying the view code from a default, but that didn't fix the problem. Any idea what/where is the problem, and how can it be fixed? Thank you!

Update Here's the code within loginpartial.html causing the problem, it seems to only affect pages that I've created and not the default pages:

    <ul class="nav navbar-nav navbar-right">
        <li><span class="navbar-brand">{{ user.username }}</span></li>
        <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
    </ul>

views.py old

def places(request):
    places = Place.objects.all()
    return render(request, 'app/places.html',     {'title':'Places','places':places,'year':datetime.now().year})

views.py attempted unsuccessful fix

def places(request):
    assert isinstance(request, HttpRequest)
    return render(
        request,
        'app/places.html',
        context_instance = RequestContext(request,
        {
            'title':'Places',
            'places':places,
            'year':datetime.now().year,
        })
    )

loginpartial.html unchanged from default afaik

{% if user.is_authenticated %}
<form id="logoutForm" action="/logout" method="post" class="navbar-right">
    {% csrf_token %}
    <ul class="nav navbar-nav navbar-right">
        <li><span class="navbar-brand">{{ user.username }}</span></li>
        <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
    </ul>

</form>

{% else %}

<ul class="nav navbar-nav navbar-right">
    <li><a href="{% url 'login' %}">Log in</a></li>
</ul>

{% endif %}

Upvotes: 0

Views: 352

Answers (1)

chem1st
chem1st

Reputation: 1634

Looks like you get the problem because of the next two things:

  1. navbar-right class used twice in user.is_authenticated block. This class is used to set the position of navbar. To make other elements float right you should use pull-right class. So, try to delete this class from the form.
  2. Moreover, why is <ul> wrapped with the form? Form is just a part of your navbar, so it should be inside the navbar. I'd recommend to use a <div> as a navbar holder in your case and to place <ul> and <form> (if you need it) inside it.

Upvotes: 1

Related Questions