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?
Related
So as you can see in the picture below, I want to put the colored text on the same line as the other test (beside Balance).
I tried many things but nothing worked, here is my html file
.card-header p {
color: #668eee;
}
.card {
max-width: 600px;
margin: auto;
}
.GreenTextColor {
color: #33FF3C;
}
.RedTextColor {
color: red;
}
<div class="container">
<div class="card">
<div class="card-header">
<br> Account: {{ things.accountid }}
</div>
<div class="card-body">
Balance: End: {{things.enddate}} Result: Not passed {% if things.balance >= 50000 %}
<div class="GreenTextColor">
{{things.balance}}
</div>
{% else %}
<div class="RedTextColor">
{{things.balance}}
</div>
</div>
</div>
Add display: flex; to .card-body.
.card-header p {
color: #668eee;
}
.card {
max-width: 600px;
margin: auto;
}
.GreenTextColor {
color: #33FF3C;
}
.RedTextColor {
color: red;
}
.card-body {
display: flex;
}
<div class="container">
<div class="card">
<div class="card-header">
<br> Account: {{ things.accountid }}
</div>
<div class="card-body">
Balance:
<div class="GreenTextColor">
{{things.balance}}
</div>
<div class="RedTextColor">
{{things.balance}}
</div>
</div>
</div>
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 %}
This is what it currently looks like:
I'm having trouble putting horizontal dividers between my icon images using angular, html, css. What I want to achieve is:
icon ---------- icon ---------- icon --------- icon
This is my code:
<div *ngFor="let item of parking; let i = index">
<div *ngIf="i == 0 || i == 1 || i == 2" class="divider">
<img src="http://cdn.appwinit.com/home/{{ item.image }}/image.png" alt="{{ item.title }}" srcset="http://cdn.appwinit.com/home/{{ item.image }}/image#2x.png 2x, http://cdn.appwinit.com/home/{{ item.image }}/image#3x.png 3x" style="height: 69px; width: 69px; display: block; margin: auto;"/>
<span class="horizontal-divider"></span>
</div>
<div *ngIf="i == 3" class="divider">
<img src="http://cdn.appwinit.com/home/{{ item.image }}/image.png" alt="{{ item.title }}" srcset="http://cdn.appwinit.com/home/{{ item.image }}/image#2x.png 2x, http://cdn.appwinit.com/home/{{ item.image }}/image#3x.png 3x" style="height: 69px; width: 69px; display: block; margin: auto;"/>
</div>
</div>
<div *ngFor="let item of parking; let i = index" class="col-xs-12 col-sm-3">
<p class="color-blue text-uppercase" style="font-size: 13px; margin-top: 20px;">{{ item.title }}</p>
<p class="opacity-65" style="font-size: 13px;" [innerHTML]="short ? item.short : item.body"></p>
</div>
This is my css:
div.divider {
display: flex;
flex-direction: row;
align-items: center;
}
div.divider {
flex-shrink: 0;
}
div.divider span.horizontal-divider {
width: 100%;
flex-shrink: 1;
border-bottom: 1px solid black;
margin: 5px
}
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!