So I have recently started looking into the Django framework, but it appends some white space in the top of my views even though the layout.html and layout.css is the same for each view.
layout.html
<html>
<head>
<meta charset="utf-8" />
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'layout.css' %}" />
<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' />
</head>
<body>
<div class="content">
<div class="navbar">
Homepage.
Home
Projects
About
</div>
<div class="text">
{% block stuff %}
{% endblock %}
</div>
</div>
</body>
</html>
This is my views
def index(request):
return render(
request,
'home/index.html',
{
'greetings': "Welcome to my site!",
}
)
def about(request):
return render(
request,
'home/about.html',
{
'greetings': "Welcome to my site!",
}
)
home/index.html and home/about.html both look like
{% extends "layout.html" %}
{% block stuff %}
{{ greetings }}
{% endblock %}
about page pushed down
As seen in the image the view for the about.html page is push down, and I really cannot figure out why.
After inspecting the elements I found that for the about page, the header is added to the body tag.
inspecting the elements
Anyone who can help me out?
This is most likely because of CSS. To find out where the space is coming from, click on inspect element and choose select an element to inspect it. Then slightly move the mouse around the page until you find that space and click on it. You can then find out where the space is coming from in the Styles tab.
Also make sure there are no <br>tags in your html template
The view is certainly not the culprit here, it's just a python function which takes in a request and returns a response. The HTML looks fine too, check your CSS once again(or post it here) or you can always check the source code on your browser and inspect element the page through the Developer tools to check where the whitespace is coming from.
Related
Hi guys as you will see below, I am a complete newbie to jinja blocks and how to manage them and would highly appreciate your help
main.html
<html>
<head><head>
<body>
<li>about us</li>
<li>Our services</li>
<body>
</html>
The idea is to render a jinja content block on li clicked in the main body:
so for example, if the user clicks on the li named "about us", I would like to render the content block named "about us" which extends this base template
And if the user clicks our services, I would like to render the content block named "our services" which extends this base template.
the about us block content is an HTML file and looks like the one below:
about-us.html
{% extends main.html %}
{% block aboutus %}
<p> ABOUT US INFORMATION</p> <!-- for example -->
{% endblock %}
the our services block content is an HTML file and looks like the one below:
ourservices.html
{% extends main.html %}
{% block ourservices %}
<p> OUR SERVICES</p> <!-- for example -->
{% endblock %}
Finally, I would like to know if it's possible to change the URL of my page when I go to any of these options:
from application import app
from flask import render_template, request, Flask
#app.route("/main.html")
def main():
return render_template("main.html", index=True)
so the idea is if I click on about us, the URL will change to main/about-us and should render the following:
and the URL looking like main/about-us
<html>
<head><head>
<body>
<p> About us</p>
<body>
</html>
and services should look like main/services
<html>
<head><head>
<body>
<p> OUR SERVICES</p>
<body>
</html>
I would highly appreciate your help!!!!
It's not clear to me if you intend for these to be distinct pages or just sections on the same page.
If sections on the same page, then why not just render all the content and hide the sections you don't initially need. When user clicks a button, you can then unhide the relevant section.
I want to disable cahce in Flask-Admin panel, where i displaying some images. For exmaple, i have 1 image in my DB (actually, just uri to an image). If i delete this image, and then upload a new one, the cache will show me deleted image.
To escape this moment, i need disable caching. But, also, i want disable it on all Flask-Admin pages.
{% extends 'admin/master.html' %}
{% block head_meta %}
{{super()}}
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
{% endblock head_meta %}
I know if i save code above as index.html, it applies only to index admin page panel.
But, as i also said above, i want to disable caching on all pages.
Found some information about it. If you want to edit your CUSTOM view, you should add these variables:
list_template = 'list.html'
create_template = 'create.html'
edit_template = 'edit.html'
Where list.html responsible for list with all your records and so on.
Also, you should create template, where you put all your code to append to existing Flask-Admin. In my case, it looks like this:
{% extends 'admin/model/list.html' %}
{% block head_meta %}
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
{{ super() }}
{% endblock head_meta %}
above is example of disabling cache on page where all records are show
I work with templates in my application. I have the main part of the website styled in base.html, being the files that always will be the same (header, menu, footer...) properly coded in 'base.html' and also with the styles linked to it (in a link rel="stylesheet").
When I try to use the base template as it is, a base template, it works well while it lets me add content between de {% block content %} and also shows the 'permanent' parts (menu, header etc), but there have no style (CSS) on it. How could I also extend to these stylesheet to load the CSS styles??
Help would be appreciated, thank you.
EDIT 2: Here's my base.html head content:
<head>
<meta charset="utf-8">
{% load staticfiles %}
<title>{% block title %}Index{% endblock %}</title>
{% block style_base %}
<link href="{% static 'css/styles.css' %}" rel="stylesheet">
{% endblock %}
<meta name="description" content="{% block description %}{% endblock %}">
<link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,700,300' rel='stylesheet' type='text/css'>
<script src="static/myapp/jquery.min.js" type="text/javascript"></script>
<script src="static/myapp/main.js" type="text/javascript"></script>
</head>
This works on base.html, it gets the correct styles. However, when trying to get the same styles in the common part with another template, it doesn't gets the styles. The template code starts like this:
{% extends "base.html" %}
{% load staticfiles %}
{% load i18n %}
{% include "base.html" %}
{% block title %}{% trans "Main index" %}{% endblock %}
{% block content1 %}
It gets all the correct HTML from base.html but unstyled. I also try delete the 'include' tag or changing its position but there's no result. What can be wrong? Thank you.
Also, the console tells me this:
Not Found: /list/static/myapp/styles.css
[25/Mar/2016 01:03:03] "GET /list/static/myapp/styles.css HTTP/1.1" 404 3414
When I refresh the page (list is the page where there is the template I wanna get the styles from base) it keeps telling me this. List is not a directory in my project, but the /static/myapp/styles.css path is correct. What happens?
You have to call the CSS files within the base.html, so when you extend the base.hml in your other pages, the CSS will be called.
For me, I usually do this:
I have Head.html I call all Javascripts and CSS files I am using in the website inside it like this:
for CSS:
<link rel="stylesheet" type="text/css" href="/static/styles/example.css"/>
for javascript:
<script type="text/javascript" src="/static/js/example.js"></script>
then, in each page in the website, after the title tag I include this Head.html like this:
{% include "Head.html" %}
When you do this in every page, the CSS and javascripts files will be seen in all the pages and callable.
Also, the main urls.py file should be like this: "the answer is from here"
urlpatterns = [ # ... the rest of your URLconf goes here ...
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
On top of your html file add this:
{% extends "base.html" %}
It should work, maybe the css path is wrong, or try to delete your {%block style_base%}
i am using django endless pagination . its working normally that just shows the numbers at the bottom .
but, i tried to integrate twitter style into it:
http://django-endless-pagination.readthedocs.org/en/latest/twitter_pagination.html#pagination-on-scroll
I have followed exactly but didnt work .
When I looked at the js code, i have seen they have used .endless_more in js class, but the generated html file has only two classes for links :
1)endless_page_current
2)endless_page_link
but they used a.endless_more in js.
Can you tell me the correct way to implement?
Thanks
Views :
from endless_pagination.decorators import page_template
#page_template("my_index_page.html")
def myview(request,template='my_index.html', extra_context=None):
data = {}
if extra_context is not None:
data.update(extra_context)
myobj = Myobj.objects.all()
data['myobj'] = myobj
return render_to_response(template, data, context_instance=RequestContext(request))
Template :
my_index.html
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="{{ STATIC_URL }}js/endless.js"></script>
<script src="{{ STATIC_URL }}js/endless_on_scroll.js"></script>
{% include page_template %}
my_index_page.html
{% load templatetags %}
<center>
<div>
{% load endless %}
{% paginate myobj %}
{% for obj in myobj %}
{{ obj.name }}
{% endfor %}
{% show_pages %}
</div>
<center>
Here, I seriously beleive that i need to add some classes like endless_more , which the django-endless-documentation missed.
i'm using that on my portal, and it seems fine your code, you just missed one thing
{% show_more %}
that's what actually enables the twitter-style infinite pagination
edit here:
you may want to add this too:
<script type="text/javascript" charset="utf-8">
var endless_on_scroll_margin = 20;
</script>
where "20" is the number of pixels (from the bottom of the page) that triggers the scrolling
you may want to try more than one value till you get the perfect one for your project
see here and here
I have a web application written in Django that has one specific page I'd like to implement a mobile version of the template (and slightly different logic) for. I'd like to be able to implement it ala this sudo code:
def(myView)
do some stuff
if user-is-on-a-mobile-device:
do some stuff
return (my mobile template)
else:
do some stuff
return (my normal template)
I don't have a huge amount of time and I'm pretty early on in my coding learning curve :) - I found what looks to be a very powerful pluggable app called bloom for getting mobile device capablities - http://code.google.com/p/django-bloom/wiki/BloomDevice
However it seems to make a request via JSON to get lots of device specs I don't need, which seems a bit inefficient to me.
Does anyone have a suggest simpler method? My detection doesn't need to be 100%, just iPhone, iPod, android, and mainstream devices...
Does the http_user_agent string have some kind of mobile flag I can check for?
Update:
I just found: http://code.google.com/p/minidetector/
Which seems to do exactly what I want, I'm going to test now. Feel free to tell me i'm wrong!
best practice: use minidetector to add the extra info to the request, then use django's built in request context to pass it to your templates like so.
from django.shortcuts import render_to_response
from django.template import RequestContext
def my_view_on_mobile_and_desktop(request)
.....
render_to_response('regular_template.html',
{'my vars to template':vars},
context_instance=RequestContext(request))
then in your template you are able to introduce stuff like:
<html>
<head>
{% block head %}
<title>blah</title>
{% if request.mobile %}
<link rel="stylesheet" href="{{ MEDIA_URL }}/styles/base-mobile.css">
{% else %}
<link rel="stylesheet" href="{{ MEDIA_URL }}/styles/base-desktop.css">
{% endif %}
</head>
<body>
<div id="navigation">
{% include "_navigation.html" %}
</div>
{% if not request.mobile %}
<div id="sidebar">
<p> sidebar content not fit for mobile </p>
</div>
{% endif %>
<div id="content">
<article>
{% if not request.mobile %}
<aside>
<p> aside content </p>
</aside>
{% endif %}
<p> article content </p>
</aricle>
</div>
</body>
</html>
go for the fork of minidetecor called django-mobi, it includes documentation on how to use it.
https://pypi.python.org/pypi/django-mobi