Marcello B.
Reputation: 4440
Why will my form not work when extending a template
Hello all my form does not work when I am extending a template with jinja2. How can I get the form to function with the template?
The goal is to be able to have one parent file that I can then add in all my child files into instead of having to add in the header and footer every time. This time now that I am trying to add in a form will not let the form be interactive. The form is acting like an image where you cannot select anything or interact with anything.
My parent file is:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="/static/img/favicon.ico" type="image/x-icon">
<link rel="icon" href="/static/img/favicon.ico" type="image/x-icon">
<title>On Deck Shooting Apps</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="/static/CSS/layout.css" type="text/css" />
</head>
<body id="top">
<div class="wrapper col1">
<div id="header">
<div id="logo">
<h1><a href="/#">OnDeckShooting</a></h1>
<p><strong>Advanced event management</strong></p>
</div>
<h1> </h1>
<br class="clear" />
</div>
</div>
{% block head %}
<div class="wrapper col2">
<div id="topbar">
<div id="topnav">
<ul>
<ul>
<li><a href="/">Home</a></li>
<li><a href="sign-up">Sign in/up</a></li>
<li><a href="#">Admin console</a>
<ul>
<li><a href="/WelcomeAdmin/">Console</a></li>
<li><a href="staffman">Staff Management</a></li>
<li><a href="AlertConsole">ALERTS</a></li>
<li><a href="shootersign">Sign up Shooters</a></li>
</ul>
</li>
<li ><a href="contact-us">Contact Us</a></li>
<li class="last"><a href="/Logout">logout</a></li>
</ul>
</div>
<br class="clear" />
</div>
<hr>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul>
{% for message in messages %}
<li>{{ message }} </li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
</div>
{% endblock %}
<div class="wrapper col5">
<div id="container">
<div id="content">
{% block content %}{% endblock %}
</div>
</div>
</div>
<div class="wrapper col6">
<div id="footer">
<br class="clear" />
</div>
</div>{% block footer %}
<div class="wrapper col7">
<div id="copyright">
<p class="fl_left">Copyright © 2015 - All Rights Reserved - <a href="#">ondeckshootingapps.com</a></p>
<!-- <p class="fl_right">Template by <a target="_blank" href="http://www.os-templates.com/" ></a></p>-->
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="encrypted" value="PAYPALSTUFF
">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
<br class="clear" />
</div>
</div>
</body>
</html>
{% endblock %}
My child file is:
{% extends "Header.html" %}
{% block content %}
<h1>CREATE SHOOT</h1>
<form action="" method="post" name="form">
{{ form.hidden_tag() }}
<p>
<h2>Name of shoot:</h2>
{{ form.nameofshoot(size=40) }}<br>
<h2>Number of days in shoot:</h2>
{{ form.day}}
<p><input type="submit" value="Create Shoot"></p>
</form>
</div>
{% endblock %}
My css is:
@charset "utf-8";
/*
Template Name: BusinessToday
Author: <a href="http://www.os-templates.com/">OS Templates</a>
Author URI: http://www.os-templates.com/
Licence: Free to use under our free template licence terms
Licence URI: http://www.os-templates.com/template-terms
File: Layout CSS
*/
@import url("navi.css");
@import url("forms.css");
@import url("tables.css");
html{overflow-y:scroll;}
body{margin:0; padding:0; font-size:12px; font-family:verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#29313C;}
.justify{text-align:justify;}
.bold{font-weight:bold;}
.center{text-align:center;}
.right{text-align:right;}
.nostart{margin:0; padding:0; list-style-type:none;}
.clear{clear:both;}
br.clear{clear:both; margin-top:-15px;}
a{outline:none; text-decoration:none;}
.fl_left, .imgl{float:left;}
.fl_right, .imgr{float:right;}
img{display:block; margin:0; padding:0; border:0;}
.imgl, .imgr{border:1px solid #DFDFDF; padding:5px; color:#666666; background-color:#FFFFFF;}
.imgl{margin:0 8px 8px 0; clear:left;}
.imgr{margin:0 0 8px 8px; clear:right;}
/* ----------------------------------------------Wrapper------------------------------------- */
div.wrapper{display:block; width:100%; margin:0; text-align:left;}
div.wrapper h1, div.wrapper h2, div.wrapper h3, div.wrapper h4, div.wrapper h5, div.wrapper h6{margin:0 0 20px 0; padding:0 0 8px 0; font-size:20px; font-weight:normal; font-family:Georgia, "Times New Roman", Times, serif; border-bottom:1px dotted #DDDDDD;}
.col1{color:#666666; background-color:#E3F1F9;}
.col2{color:#FFFFFF; background-color:#000000;}
.col3, .col4, .col5{color:#666666; background-color:#FFFFFF;}
.col6{color:#999999; background-color:#F3F3F3;}
.col6 a{color:#2684B7; background-color:#F3F3F3;}
.col7, .col7 a{color:#FFFFFF; background-color:#29313C;}
/* ----------------------------------------------Generalise------------------------------------- */
#header, #topbar, #intro, #services, #breadcrumb, #container, #footer, #copyright{display:block; position:relative; width:960px; margin:0 auto;}
/* ----------------------------------------------Header------------------------------------- */
#header{padding:30px 0; font-family:Georgia, "Times New Roman", Times, serif;}
#header #logo{display:block; float:left; width:300px; margin-top:7px;}
#header #logo h1, #header #logo p{margin:0; padding:0; line-height:normal;}
#header #logo h1{margin:0 0 10px 0; padding:0; font-size:36px; border:none;}
#header h1 a{color:#3A6C86; background-color:#E3F1F9;}
#header #newsletter{float:right; padding:10px 10px 12px 10px; color:#000000; background-color:#ADD6ED;}
#header #newsletter p{margin:0 0 8px 0; font-family:Verdana, Arial, Helvetica, sans-serif;}
/* ----------------------------------------------Topbar------------------------------------- */
#topbar{z-index:1000;}
#topbar #search{display:block; float:right; width:242px; height:36px; margin:0; padding:10px 0 0 17px; color:#FFFFFF; background-color:#000000; border-left:1px dotted #666666; overflow:hidden;}
/* ----------------------------------------------Homepage Intro------------------------------------- */
#intro{padding:30px 0 5px 0; font-size:16px; font-family:Georgia, "Times New Roman", Times, serif;}
#intro .fl_left{display:block; float:left; width:515px; height:240px; margin:0; padding:30px; color:#FFFFFF; background-color:#2684B7;}
#intro .fl_left h2{font-size:46px; margin:0 0 15px 0; padding:0; border:none; color:#FFFFFF; background-color:#2684B7;}
#intro .fl_left p{margin:0; padding:0; line-height:1.6em;}
#intro .fl_left p.readmore{display:block; width:100%; margin:20px 0 0 0; padding:0; text-align:right; line-height:normal;}
#intro .fl_left p.readmore a{padding:8px 15px; font-size:18px; color:#FFFFFF; background-color:#1C5E82;}
#intro .fl_right{float:right;}
/* ----------------------------------------------Services------------------------------------- */
#services ul, #services p, #services h2, #services img{margin:0; padding:0; list-style:none;}
#services li{display:block; float:left; width:294px; height:180px; margin:0 9px 0 0; padding:10px; color:#666666; background-color:#EFEFEF;}
#services li:hover, #services li:hover h2{color:#666666; background-color:#E5E5E5;}
#services li.last{margin-right:0;}
#services .fl_right{display:block; float:right; width:185px; padding:10px 0 0 0;}
#services h2{margin:0 0 5px 0; padding:0 0 3px 0; font-size:14px; font-weight:bold; color:#666666; background-color:#EFEFEF; border-bottom-color:#666666;}
#services p{margin:0; padding:0; line-height:1.6em;}
#services p.readmore{display:block; width:100%; margin:15px 0 0 0; padding:0; text-align:right; line-height:normal;}
#services p.readmore a{padding:8px 15px; font-weight:bold; color:#FFFFFF; background-color:#666666;}
/* ----------------------------------------------BreadCrumb------------------------------------- */
#breadcrumb{padding:30px 0; border-bottom:1px solid #CCCCCC;}
#breadcrumb a{color:#2684B7; background-color:#FFFFFF;}
#breadcrumb ul{margin:0; padding:0; list-style:none;}
#breadcrumb ul li{display:inline;}
#breadcrumb ul li.current a{text-decoration:underline;}
/* ----------------------------------------------Content------------------------------------- */
#container{padding:30px 0; line-height:1.4em;}
#container a{color:#2684B7; background-color:#FFFFFF;}
#container h1, #container h2, #container h3, #container h4, #container h5, #container h6{padding-bottom:8px; border-bottom:1px dotted #CCCCCC;}
#content{display:block; float:left; width:600px;}
/* Comments */
#comments{margin-bottom:40px;}
#comments .commentlist{margin:0; padding:0;}
#comments .commentlist ul{margin:0; padding:0; list-style:none;}
#comments .commentlist li.comment_odd, #comments .commentlist li.comment_even{margin:0 0 10px 0; padding:15px; list-style:none;}
#comments .commentlist li.comment_odd{color:#666666; background-color:#FFFFFF;}
#comments .commentlist li.comment_odd a{color:#3E7060; background-color:#FFFFFF;}
#comments .commentlist li.comment_even{color:#666666; background-color:#E8E8E8;}
#comments .commentlist li.comment_even a{color:#3E7060; background-color:#E8E8E8;}
#comments .commentlist .author .name{font-weight:bold;}
#comments .commentlist .submitdate{font-size:smaller;}
#comments .commentlist p{margin:10px 5px 10px 0; padding:0; font-weight:normal; text-transform:none;}
#comments .commentlist li .avatar{float:right; border:1px solid #EEEEEE; margin:0 0 0 10px;}
/* ----------------------------------------------Column------------------------------------- */
#column{display:block; float:right; width:300px;}
.flickrbox ul{margin:0; padding:0; list-style:none;}
.flickrbox li{display:block; float:left; width:80px; height:80px; margin:0 15px 15px 0; padding:4px; color:#666666; background-color:#FFFFFF; border:1px solid #CCCCCC;}
.flickrbox li.last{margin-right:0;}
#column .holder, #column #featured{display:block; width:300px; margin-bottom:20px;}
#column .holder h2.title{display:block; width:100%; height:65px; margin:0; padding:15px 0 0 0; font-size:20px; line-height:normal; border-bottom:1px dashed #666666;}
#column .holder h2.title img{float:left; margin:-15px 8px 0 0; padding:5px; border:1px solid #666666;}
#column div.imgholder{display:block; width:290px; margin:0 0 10px 0; padding:4px; color:#666666; background-color:#FFFFFF; border:1px solid #CCCCCC;}
#column .holder p.readmore{display:block; width:100%; font-weight:bold; text-align:right; line-height:normal;}
/* Featured Block */
#column #featured a{color:#666666; background-color:#F9F9F9;}
#column #featured ul, #column #featured h2, #column #featured p{margin:0; padding:0; list-style:none;}
#column #featured a{color:#2684B7; background-color:#F9F9F9;}
#column #featured li{display:block; width:250px; margin:0; padding:20px 25px; color:#666666; background-color:#F9F9F9;}
#column #featured li p.imgholder{display:block; width:240px; height:90px; margin:20px 0 15px 0; padding:4px; border:1px solid #CCCCCC;}
#column #featured li h2{margin:0; padding:0 0 14px 0; font-weight:normal; font-family:Georgia, "Times New Roman", Times, serif; line-height:normal; border-bottom:1px dashed #666666;}
#column #featured p.readmore{display:block; width:100%; margin-top:15px; font-weight:bold; text-align:right; line-height:normal;}
#column #latestnews{display:block; width:100%; margin:0; padding:0; list-style:none;}
#column #latestnews li{display:block; margin:0 0 20px 0; padding:0 0 15px 0; border-bottom:1px dotted #DDDDDD;}
#column #latestnews li.last{margin-bottom:0;}
#column #latestnews p{margin:0; padding:0; line-height:normal;}
#column #latestnews .imgl{margin:0 10px 10px 0; padding:4px;}
/* ----------------------------------------------Footer------------------------------------- */
#footer{padding:30px 0;}
#footer h2{margin-bottom:10px; border-bottom:1px dotted #999999;}
#footer p, #footer ul, #footer a{margin:0; padding:0; font-weight:normal; list-style:none; line-height:normal;}
#footer .footbox{display:block; float:right; width:190px; margin:0 0 0 30px; padding:0;}
#footer li{margin-bottom:3px; line-height:1.6em;}
#footer .last{margin:0;}
#login{display:block; float:left; width:300px;}
/* ----------------------------------------------Copyright------------------------------------- */
#copyright{padding:20px 0;}
#copyright p{margin:0; padding:0;}
Upvotes: 1
Views: 105
Answers (2)
Marcello B.
Reputation: 4440
The problem is where my {{block contents}} is located. It is in the footer css class move your {{block contents}} to the container class
Upvotes: 1
dirn
Reputation: 20739
Your CSS is the problem. A style is being applied to an element defined in Header.html that is causing your form to be hidden underneath another element. If you inspect the page you will see that div.col6 is sitting on top of div#content. This is caused by the following two lines in layout.css:
#content{display:block; float:left; width:600px;}
#header, #topbar, #intro, #services, #breadcrumb, #container, #footer, #copyright{display:block; position:relative; width:960px; margin:0 auto;}
The float:left; in the first line coupled with the position:relative; in the second is causing this.
Without knowing the ultimate goal of your design, it's hard to say what the correct solution is, but you have three choices:
- Remove the
float:left;. - Remove the
position:relative;, or at least rearrange your CSS so it isn't applied to#footer. - Clear the float. You can do this with something like:
<div class="wrapper col5">
<div id="container">
<div id="content">
{% block content %}{% endblock %}
<div class="clear"></div>
</div>
</div>
</div>
Upvotes: 2
Related Questions
- Flask jinja2.exceptions.UndefinedError: 'form' is undefined* [RESOLVED]
- Flask WTF giving me jinja2.exceptions.UndefinedError: 'form' is undefined
- Python | Flask, using request.form in a class to POST data and update Jinja Template
- Rendering template gives "jinja2.exceptions.UndefinedError: 'form' is undefined"
- jinja2.exceptions.UndefinedError: 'form' is undefined error in python, Flask
- jinja2.exceptions.UndefinedError: 'form' is undefined even after passing 'form' in render_template
- How to request.form from a jinja2 loop in an html template
- How to render a WTF Form in flask from a template that is included in another template?
- Flask: How do I place Forms in Base jinja2 Template?
- jinja2 form include won't work