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 %}
Related
I would very much appreciate help solving this problem:
HTML (ignore the django code):
.dp-thlykym-gyshh-lsvknym .specific-process {
align-items: center;
background-color: var(--white);
border-radius: 0.26vw;
box-shadow: 0.0vw 10.0vw 40.0vw #0000000d;
display: flex;
gap: 14.32vw;
height: 3.65vw;
justify-content: center;
padding: 2.08vw 1.56vw;
width: 77.55vw;
}
.dp-thlykym-gyshh-lsvknym .four-buttons-frame {
align-items: center;
display: flex;
gap: 1.04vw;
margin-bottom: -1.56vw;
margin-left: -1.04vw;
margin-top: -1.56vw;
width: 40vw;
}
.dp-thlykym-gyshh-lsvknym .icon-trash {
height: 1.88vw;
min-width: 1.88vw;
}
.dp-thlykym-gyshh-lsvknym .document {
height: 1.88vw;
min-width: 1.88vw;
}
.dp-thlykym-gyshh-lsvknym .secondery-action-btn {
align-items: center;
background-color: var(--white);
border: 0.1vw solid;
border-color: var(--red);
border-radius: 0.26vw;
display: flex;
gap: 0.52vw;
height: 2.6vw;
justify-content: center;
padding: 0.78vw 1.04vw;
width: 6.51vw;
}
<div class="specific-process">
<div class="four-buttons-frame">
{% if not assignment.is_active %}
<img class="icon-trash" src="{% static '/images/img/home/delete-1.svg' %}" alt="icon-trash" /> {% endif %} {% if assignment.active_task.is_under_review %}
<img class="document" src="{% static '/images/img/home/document.svg' %}" alt="document" /> {% endif %} {% if assignment.is_active %}
<div class="secondery-action-btn">
<div class="text text">עצור תהליך</div>
</div>
{% endif %}
</div>
<div class="nested-contents-frame">
<div class="steps">
<div class="x00 text">{{assignment.active_task.index}}/{{assignment.template.tasks.count}}</div>
</div>
<img class="line" src="{% static '/images/img/home/line-2.svg' %}" alt="Line 2" />
<div class="customer-added">
<div class="frame-2">
<div class="text_label text">{{assignment.client}}</div>
<div class="rectangle-11-1"></div>
</div>
</div>
<img class="line" src="{% static '/images/img/home/line-2.svg' %}" alt="Line 1" />
<div class="type-input-with-hover">
<div class="texticon-layout">
<div class="text-1 text-4 text">{{assignment}}</div>
</div>
</div>
</div>
</div>
{% endfor %}
Depending on the situation, there might be 2 elements on the left instead of just one. (talking about the red button and the svg icon) in each row. I would those to stick to the right of the supposed column and I can't manage to do so. Any help?
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´m trying to add a kind of animation to some images in my Django app, what I want to do is that when the user moves the mouse around the image it gets bigger.
I tried adding some code in my CSS but the image won't change
Thank you for your help.
My index.html
{%block contenido %}
<div id="container" class="foto_pelicula">
{% for p in peliculas %}
{% if p.genero.id == 1 %}
<img src={{p.urlPortada}} width="289" height="289"/></li>
{% endif %}
{% endfor %}
</div>
<div id="container" class="foto_pelicula">
{% for p in peliculas %}
{% if p.genero.id == 2 %}
<img src={{p.urlPortada}} width="289" height="289"/></li>
{% endif %}
{% endfor %}
</div>
<div id="container" class="foto_pelicula">
{% for p in peliculas %}
{% if p.genero.id == 3 %}
<img src={{p.urlPortada}} width="289" height="289"/></li>
{% endif %}
{% endfor %}
</div>
{% endblock %}
The Images SRCs are urls that I take from the internet, I guess it does not really matter whether they are taken from the internet or stored in your proyect.
my CSS
#container{
width: 290px;
overflow: hidden;
margin: 5px 4px 0 auto;
padding: 0;
background: #222; /* FONDO DEL RECTANGULO CONTENEDOR */
border: 3px solid #8E1600;
float: left;
}
I added this new lines to my CSS but the image won't change.
.foto_pelicula > img:hover {
transform: scale(1.1);
}
Maybe I'm not using the proper lines in the CSS as I'm a junior programmer.
Help is much appreciated
This question has no connection to Django. In future try to create working html template for your purposes and then add it to django template.
You setup .foto_pelicula > img:hover to transform image. But > selector finds only direct child. See documentation on selectors.
And in your code direct child is a, but not img. Therefore you don't see result. You can change your css rule to .foto_pelicula > a > img:hover
See demo:
#container{
width: 290px;
overflow: hidden;
margin: 5px 4px 0 auto;
padding: 0;
background: #222; /* FONDO DEL RECTANGULO CONTENEDOR */
border: 3px solid #8E1600;
float: left;
}
.foto_pelicula > a > img:hover {
transform: scale(1.1);
}
<div id="container" class="foto_pelicula">
<img src="https://via.placeholder.com/289" width="289" height="289"/>
</div>
IMPORTANT
In your html code I see several divs with id="container". You can setup only one id with certain name to each page. That's why it called identifier.
So change your ids to classes or give different id names for this divs.
I have a nav tab that looks like this:
I am using ellipses however I don't like how my nav is scattered in second line. I don't want to use nav-justfied instead be able to squeeze my so it fits in screen and user don't have to scroll horizontally.
like below
My code so far
.nav-tabs>li:not(.active)>a {
background-color: white;
border: 1px solid #ddd;
border-bottom: none;
border-top: 3px solid #9d9d9d;
text-overflow: ellipsis;
max-width: 10em;
overflow: hidden;
display: block;
}
.nav-tabs {
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
white-space: nowrap;
}
<ul class="nav nav-tabs">
<div class="btn-toolbar pull-right">
{% block tab_buttons %}
{% endblock %}
</div>
<li role="presentation" class="{% if '/hosts' in request.path %}active {% endif %}inverse">Hosts</li>
{% for tab in event.benchmarks.all %}
<li role="presentation" class="{% if 'summary' in request.path and tab == benchmark %}active {% endif %}inverse">{{ tab.name }}</li>
{% endfor %}
</ul>
I'm not 100% sure what you're asking but it sounds like you could benefit from using:
display flex on your nav.
If you're loading the content on the same page (like an admin panel), I'd highly recommend Jquery Tabs.
Use Display:inline-flex; css property on tabs.
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!