I have an overlay containing a django form and the background image doesn't show up. I have a silhouette image in the background and that fills the page, and ideally moves with the page size. Then a table on top in the centre of it containing my form which I have tried to make transparent.
I was blindly fiddling with the css yesterday and it has disappeared!
{% extends 'prodman/basenew.html' %}
{% load staticfiles %}
{% block pagetitle %}Time and Expenses{% endblock %}
{% block content %}
<iframe name="hiddenFrame" class="hide"></iframe>
<div id="overlay">
<form id= "person-form" target='hiddenFrame' method = 'POST' action="" class="overlay-form" enctype="multipart/form-data">{% csrf_token %}
<table id="add-person-form" class="overlay-table">
<tr></br></br>{{ personform.first_name }}</tr>
<tr></br></br>{{ personform.surname }}</tr>
<tr></br></br>{{ personform.email }}</tr>
<tr></br></br>{{ personform.position }}</tr>
<tr></br></br>{{ personform.contract_type }}</tr>
<tr></br></br>{{ personform.mentor }}</tr>
<tr></br></br><font color="white">Assign as a coach? </font>{{ personform.make_person_coach }}</tr>
</table>
</br>
<input type = "submit" id = "save" value = "Add person">
</br>
</br>
<strong>Click here to [<a href='#' onclick='overlay()'>close</a>]</strong>
</form>
</div>
<a href='#' class='class1' onclick='overlay()'>Add person</a>
<p>Some more html here....</p>
{% endblock %}
In my basenew.html I have
{% load staticfiles %}
<head>
<link rel='stylesheet' href="{% static 'tande/newtimesheets.css' %}" type='text/css' media='all'/>
</head>
...
Here is my stylesheet
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1000;
background-image:url('{% static 'tande/images/silhouette.png' %}');
background-repeat: no-repeat;
background-size: 90%;
background-position: center;
}
#overlay div {
width:800px;
margin: 100px auto;
background: #cccccc;
border: 1px solid #000;
padding:15px;
text-align:center;
}
form.overlay-form {
width:800px;
margin: 350px auto;
}
table.overlay-table tr td {
background: rgb(54, 25, 25);
background: rgba(54, 25, 25, 0);
border-style: none;
margin-right: 40%;
margin-bottom: 30%;
position: relative;
text-align: center;
width: 800px;
}
add-person {
text-align: right;
margin-right: 10px;
width: 10px;
}
body {
height:100%;
margin:0;
padding:0;
}
Just in case it's helpful here is how the overlay is triggered:
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
Thanks!
Related
I am pretty new to CSS, however I have a django modelformset_factory which i need to render and align all rendered fields in same line for each field, it has TextArea and Textinput, the problem as per the attached picture i tried to aligned all but they never get aligned together.
here my view:
from django.forms import modelformset_factory
def form_employee(request, employee_id):
employee = Employee.objects.get(pk=employee_id)
Employee_PM = PMF.objects.filter(badge=employee_id)
for pm in Employee_PM:
form_reference = pm.form_ref
emp_form = PMF_Form.objects.filter(form_ref=form_reference)
emp_summary = PMF_Summary.objects.filter(badge=employee_id)
PMF_formset = modelformset_factory(PMF_Form, fields=('objective','obj_desc','rating',), extra=0)
formset = PMF_formset(queryset=PMF_Form.objects.filter(form_ref=form_reference))
if request.method == "POST":
formset = PMF_formset(request.POST, queryset=PMF_Form.objects.filter(form_ref=form_reference))
if formset.is_valid():
formset.save()
return redirect('/')
for form in formset:
form.fields['objective'].widget.attrs['disabled'] = True
form.fields['obj_desc'].widget.attrs['disabled'] = True
context = {"Employee_PM":Employee_PM,"employee":employee,"emp_form":emp_form,"emp_summary":emp_summary,"formset":formset}
return render(request, 'PMS/form_employee.html',context)
\* {
padding: 2px;
margin: 0px;
margin-bottom: 4px;
background-color: black;
color: aliceblue;
box-sizing:border-box;
flex-direction: column;
}
.container {
background-color: black;
}
body {
background-color: black;
}
.form2 {
margin: 20px;
box-sizing: border-box;
width:100%;
resize: none;
overflow-wrap: break-word;
/\* display: flex; \*/
margin: auto;
}
input {
/\* width: 50%; \*/
display: inline-block;
width:15rem;
height: 70px;
position: relative;
}
textarea {
width: 50rem;
height: 70px;
resize: none;
}
}
span {
justify-content: center ;
display: flex;
}
<div class="container">
<h2>formset</h2>
<form method="POST" class="form2" enctype="multipart/form-data">
{% csrf_token %}
{{ formset.management_form }}
{% for form in formset %}
{% for field in form %}
{{field}}
{% endfor %}
{% endfor %}
<button type="submit">Submit</button>
</form>
a photo from the output
the main problem is mainly I need to give them all the same height and align them to same line
i think you should use css property called 'vertical-align'
This is the html file that i'm trying to add a star rating for
book_detail.html
{% extends "base.html" %}
{% load static %}
{% block title %}
Block Detail Page
{% endblock title %}
{% block sidenav %}
{% for item in item_list %}
<li>
{{ item.item }}
</li>
{% endfor %}
{% endblock sidenav %}
{% block content %}
<h1 align="center"> Book Detail </h1>
<table align="center" border="2" width="400">
<tr>
<td>
{{ book.name }}
</td>
</tr>
<tr>
<td>
<img src="{% static book.pic_path %}" width="100">
</td>
</tr>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
<td>
{{ book.username }}
<div id="full-stars-example">
<div class="rating-group">
<input class="rating__input rating__input--none" name="rating" id="rating-none" value="0"
type="radio">
<label aria-label="No rating" class="rating__label" for="rating-none"><i
class="rating__icon rating__icon--none fa fa-ban"></i></label>
<label aria-label="1 star" class="rating__label" for="rating-1"><i
class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating" id="rating-1" value="1" type="radio">
<label aria-label="2 stars" class="rating__label" for="rating-2"><i
class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating" id="rating-2" value="2" type="radio">
<label aria-label="3 stars" class="rating__label" for="rating-3"><i
class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating" id="rating-3" value="3" type="radio" checked>
<label aria-label="4 stars" class="rating__label" for="rating-4"><i
class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating" id="rating-4" value="4" type="radio">
<label aria-label="5 stars" class="rating__label" for="rating-5"><i
class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating" id="rating-5" value="5" type="radio">
</div>
</div>
</td>
</tr>
</table>
{% endblock content %}
This is the css file that i trying to connect with the star rating on my html file on main.css
#charset "utf-8";
#header {
border-style: none;
width: 800px;
height: auto;
}
#wrapper {
margin-top: 8px;
margin-left: auto;
margin-right: auto;
background-color: #FFFFFF;
width: 800px;
}
#leftsidebar {
width: 180px;
height: 350px;
float: left;
}
#nav li {
padding-top: 10px;
padding-bottom: 10px;
list-style-type: none;
border-bottom: thin solid #5F5F5F;
color: #4C4C4C
left: 8px;
list-style-position: inside;
margin-left: -10px;
}
#main{
width: 560px;
float: left;
margin-left: 20px;
margin-right: 10px;
padding-right:10px;
}
#footer{
text-align: center;
margin-top: 5px;
padding-top: 10px;
padding-bottom: 10px;
border-top: thin solid #BBBBBB;
clear: both;
color: #969696;
}
#full-stars-example {
/* use display:inline-flex to prevent whitespace issues. alternatively, you can put all the children of .rating-group on a single line */
.rating-group {
display: inline-flex;
}
/* make hover effect work properly in IE */
.rating__icon {
pointer-events: none;
}
/* hide radio inputs */
.rating__input {
position: absolute !important;
left: -9999px !important;
}
/* set icon padding and size */
.rating__label {
cursor: pointer;
padding: 0 0.1em;
font-size: 2rem;
}
/* set default star color */
.rating__icon--star {
color: orange;
}
/* set color of none icon when unchecked */
.rating__icon--none {
color: #eee;
}
/* if none icon is checked, make it red */
.rating__input--none:checked + .rating__label .rating__icon--none {
color: red;
}
/* if any input is checked, make its following siblings grey */
.rating__input:checked ~ .rating__label .rating__icon--star {
color: #ddd;
}
/* make all stars orange on rating group hover */
.rating-group:hover .rating__label .rating__icon--star {
color: orange;
}
/* make hovered input's following siblings grey on hover */
.rating__input:hover ~ .rating__label .rating__icon--star {
color: #ddd;
}
/* make none icon grey on rating group hover */
.rating-group:hover .rating__input--none:not(:hover) + .rating__label .rating__icon--none {
color: #eee;
}
/* make none icon red on hover */
.rating__input--none:hover + .rating__label .rating__icon--none {
color: red;
}
}
I'm having trouble making the star rating in the html file connect with the CSS file I have.
In the head of your base.html add:
{% block head %}{% endblock head %}
Then in your book_detail.html add the link to your css:
{% block head %}
<link rel="stylesheet" type="text/css" href="{% static 'foldername/main.css' %}">
{% endblock %}
I am trying to build a paywall using HTML and CSS in Django, but somehow the CSS that is supposed to fade portions of the text does not render. Here is what I have:
<style>
.adjust-image {
display: block;
width: auto;
max-width: 100%;
max-height: 1000px;
}
.blur-text {
filter: blur(5px);
user-select: none;
pointer-events: none;
}
.fade-out {
user-select: none;
position: relative;
}
.fade-out:after {
content: "";
height: 75%;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}
#paywall-wrapper {
padding: 35px;
border-radius: 5px;
position: relative;
margin-bottom: 30px;
box-shadow: 0px 0px 20px -1px rgba(0,0,0,0.20);
}
#paywall-wrapper * {
text-align: center;
}
#paywall-wrapper .btn {
left: 50%;
transform: translateX(-50%);
position: relative;
}
</style>
<div class="display-margins">
<div>
<h5>{{solution.questionToProblem}}</h5>
<h6><b>Solution</b></h6>
{% if request.user.is_anonymous or solution.free != True and request.user.is_subscriber != True %}
<p class= "format-paragraph fade-out:after">{{solution.solutionToProblem|safe}}</p>
<div id="paywall-wrapper">
<h4>Premium Subscription</h4>
<p>To view this solution, get our subscription for just <strong>$17</strong>.</p>
<a class="btn btn-primary text-light" href = "{% url 'subscribe' %}">Subscribe</a>
</div>
{% else %}
<p class="noselect format-paragraph">{{solution.solutionToProblem|safe}}</p>
{% for s in solution_images %}
<img class = "adjust-image noselect" src="{{ s.photo.url }}">
<br></br>
{% endfor %}
{% endif %}
{% render_comments solution request %}
<br class= "extra_spacing"></br>
</div>
</div>
Ideally, the text for paywall is supposed to fade out like this:
But it doesn't render when I have template variables in my <p> tags:
Surprisingly enough, if I type out content in my <p> tags manually, it works. But when I use <p>{{random content}}</p>, it doesn't work.
What am I doing wrong with my CSS or my HTML when I say <p class= "format-paragraph fade-out:after">{{solution.solutionToProblem|safe}}</p>?
Make sure when you want CSS integrated in Django, and you have HTML in your template variable, use:
{{put_your_template_variable|striptags}}
instead of safe.
I am attempting to create a dropdown for a user. The problem is that it doesn't show up at all.
<div class="account-wrap">
<div class="inside-account trade-sell-div">
<a class = "trade-sell-button" href="{% url 'product' %}">Trade/Sell</a>
</div>
{% if user.is_authenticated %}
<div class = "inside-account chat-box-dropdown">
<a class="imgs-signed-in"><img style="height:45px !important;" src = "{% static "imgs/chat-box.png" %}" alt="Chat Box"></a>
</div>
<div class="inside-account user-dropdown">
<a class="imgs-signed-in user-icon-dropdown"><img src="{% static "imgs/user-icon.png" %}" alt="User"></a>
<div class="dropdown-frame">
<div id="triangle"></div>
<div class="dropdown-wrapper">
<hr>
</div>
</div>
</div>
{% else %}
<div class="inside-account">
Login
</div>
{% endif %}
</div>
css
.dropdown-frame{
position: absolute;
height: 40rem;
width: 10rem;
outline: 1px solid black;
}
#triangle {
width: 0;
height: 0;
content: '';
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid white;
}
.dropdown-wrapper {
right: 0;
height: 40rem;
width: 10rem;
top: 56px;
border: 1px solid red;
z-index: 122;
}
Basically the triangle shows up on the nav bar but the part under the triangle does not show up at all. When I move the div elements outside the nav, it actually shows up. Does anyone have any explanation as to why my div dropdown-wrapper does not show up?
I believe you missed the . before dropdown-frame class
It should be {% if request.user.is_authenticated %} instead of {% if user.is_authenticated %}
I'm creating a django form and I can't seem to access each field's widget to style it differently when there's an error or when the field is required (eg: highlight the field's box).
HTML:
{% block content %}
<form action="" method="POST" class="form"> {% csrf_token %}
{% for field in form %}
<div class="fields-container">
<p class="label">{{ field.label }}</p>
{{ field }}
</div>
{{ field.errors }}
{% endfor %}
<button type="submit" id="form-button">Submit</button>
</form>
{% endblock %}
CSS:
.label {
margin: 0 5px 0 0;
width: 20%;
text-align: left;
}
#id_full_name, #id_email, #id_message {
margin: 0;
flex: 1 1;
}
#id_message {
resize: none;
overflow: auto;
}
.errorlist { /*default css class for form errors*/
color: 999999;
font-size: 75%;
font-weight: bold;
list-style: none;
margin-bottom: 5px;
align-self: flex-start;
}
I've been accessing and styling the widgets using #id_fieldname, but I've tried the following and it didn't work:
#id_fieldname.required, id_fieldname.error { border: 2px solid red; }
Thanks in advance!
You could add a class 'required' in your container <div>:
<div class="fields-container {% if field.field.required %}required{% endif %}">
Using django form methods form.as_p, form.as_ul, form.as_table, this would be done automatically if you declare a specific css class for required fields in your Form, for example:
class myForm(forms.Form):
required_css_class = 'required'
...
More in documentation