I am trying to decrease the height of the table cells by using the following CSS, but it is not working.
.table tr>td.vert-align{
vertical-align: middle;
height: 5px;
padding: 10px 0 10px 0;
border-bottom: 1px solid #eaebec;
}
This is my HTML code:
<td class="vert-align">
{% if post.url %}
<h4><a href="{{ post.url }}" style="margin-left: 15px;"> <img src="{{post.image}}" height="70" width="70"/>
{{ post.title }}</a><span style="margin-left: 15px;" class="domain">
({{ post.domain }})</span></h4>
{% else %}
<h4>{{ post.title }}<span style="margin-left: 15px; "class="domain">({{ post.domain }})</span></h4>
{% endif %}
<ol class="post-info">
<div class="btn-group btn-breadcrumb">
<span class="btn btn-default">{{ post.moderator.username }</span>
<span class="btn btn-default">{{ post.pub_date | date }}</span>
<span class="btn btn-default">{{post.views}}</span>
discuss
{{post.category}}
</div>
</ol>
</td>
I'm trying to display title/image/domain name in one line that fits nicely to the table, but right now height of the table is too long it just looks odd. I tried height:5px but it won't work
I see no use of a table in your code, but the problem might be caused by you having a ".table" selector instead of a "table" selector.
Dot means classname, no dot means html tag. Please give it a look and if this is not the answer post your whole html code to get a better look at it.
You have already class for your td, so directly use it in your selector.
.vert-align{
vertical-align: middle;
height: 5px;
padding: 10px 0 10px 0;
border-bottom: 1px solid #eaebec;
}
Update:
Decrease the height of your image which is inside the td to decrease the height of cell.
Related
His guys,
I have this table with two icons in the last column. I would like that the icons are next to each, align and with a nice space in the cell. What are the parameters required for that ? I tried with justify-content and margin but it stays like that.
Thank you
Here is my result :
How can I correct that ?
Here is the code html :
{% block content %}
<link rel="stylesheet" href="{% static 'test15.css' %}">
<div class="upload-app">
<div class="upload-in">
<h2>Upload</h2>
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Upload</button>
</form>
{% if url %}
<p>Uploaded files : {{url}}</p>
{% endif %}
</div>
<div class="listfiles">
<h2>Files Uploaded</h2>
<table id="customers">
<tr>
<th>Filename</th>
<th>Date</th>
<th>Size</th>
<th>Actions</th>
</tr>
{% for file in files %}
<tr>
<td>{{ file.Filename }}</td>
<td>{{ file.Uploaded_at | date:'d.m.Y H:i'}}</td>
<td>{{ file.SizeFile | filesizeformat}}</td>
<td>
<a href="{% url 'download' file.Id %}">
<i class='bx bxs-download'></i>
</a>
<a href="">
<i class='bx bxs-file-pdf' ></i>
</a>
</td>
</tr>
{% endfor %}
</table>
</div>
</div>
{% endblock %}
Here the css :
.listfiles{
margin-top: 20px;
border-radius: 12px;
background-color: #11101d;
color: #fff;
transition: all 0.5s ease;
width: 800px;
height: 600px;
}
.listfiles h2{
display: flex;
justify-content: center;
font-size : 26px;
padding-bottom: 20px;
padding-top: 30px;
margin-left: 25px;
}
.listfiles #customers{
border-collapse: collapse;
width: 100%;
}
#customers td{
border: 1px solid #ddd;
padding: 8px;
font-size: 12px;
}
#customers a{
color: #fff;
font-size: 14px;
justify-content: center;
display: flex;
row-gap: 3px;
}
#customers th {
border: 1px solid #ddd;
padding: 8px;
font-size: 14px;
}
#customers tr:nth-child(even){background-color: #272730b6;}
#customers tr:hover {background-color: rgb(83, 78, 78);}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #0a0911;
color: white;
}
Can you please add class to your icon <td class="iconsColumn">
{% for file in files %}
<tr>
<td>{{ file.Filename }}</td>
<td>{{ file.Uploaded_at | date:'d.m.Y H:i'}}</td>
<td>{{ file.SizeFile | filesizeformat}}</td>
<td class="iconsColumn">
<a href="{% url 'download' file.Id %}">
<i class='bx bxs-download'></i>
</a>
<a href="">
<i class='bx bxs-file-pdf' ></i>
</a>
</td>
</tr>
{% endfor %}
Than in your css add flexBox to that class.
.iconsColumn{
display: flex;
flex-direction: row;
justify-content: center;
gap:1rem
}
https://www.w3schools.com/csS/css3_flexbox_container.asp
You can add a parent div to both of those icons and target that div to style it using display:flex
<td>
<div class="icons"
<a href="{% url 'download' file.Id %}">
<i class='bx bxs-download'></i>
</a>
<a href="">
<i class='bx bxs-file-pdf' ></i>
</a>
</div>
</td>
And for the css:
.icons{
display: flex;
justify-content : space-around
}
My image is higher than my div, how do I tell my div to resize if something inside it is bigger? Here's my code:
<div {% if editable %}style="overflow-wrap: break-word; border-color: grey; border-style: solid; border-radius: 25px"{% else %}style="border-color: grey; border-style: solid; border-radius: 25px"{% endif %}>
<h4>{{ new.header }}</h4>
<p><img src="{{ new.file.url }}" style="max-width: 250px; float: left; height: auto">{{ new.text|safe }}</p>
<p align="right">Дата: <strong>{{ new.added }}</strong></p>
{% if editable == True %}
<a href="{% url 'create_news' %}?news_id={{ new.pk }}" style="display: inline; float: right; padding-right: 5px; margin: 0">
<button type="submit" class="btn btn-warning">изменить</button>
</a>
<form onsubmit="return confirm('Вы точно хотите удалить новость?');" method="post" style="display: inline; float: right; padding-right: 5px; margin: 0" action="{% url 'news_delete' news_pk=new.pk %}">
{% csrf_token %}
<button type="submit" class="btn btn-danger">удалить</button>
</form>
{% endif %}
</div>
The image is floated, so it can go out of its parent container. To avoid that, you can add overflow: auto to the parent container (i.e. the div your HTML example code starts with) That way, the whole floated image will be inside its parent and the border will go around it.
I've tried clearfix as Ahmed Tag Amer suggested, it worked.
I have the following piece of code in a foreach:
FOREACH:
<div class="col-md-1" style="max-width: 50% !important" id="pageList_{{ presentationPage.position }}">
<a href="/customer/presentations/{{ id }}/edit?position={{ presentationPage.position }}">
<div class="slide-preview" style="background-color:{% if (presentationPage.position == activePresentationPage.position) %}#ffffff{% else %}#bbbbbb{% endif %}; border: 1px solid #000000; width:100%; padding:2px 5px; margin:5px; color:#000000; text-align:center;">
{{ presentationPage.position }}
</div>
</a>
</div>
ENDFOREACH
Which looks like this when rendered:
However, when I add something similar as an element or a div as you can see in the code below:
<div>
FOREACH:
<div class="col-md-1" style="max-width: 50% !important" id="pageList_{{ presentationPage.position }}">
<a href="/customer/presentations/{{ id }}/edit?position={{ presentationPage.position }}">
<div class="slide-preview" style="background-color:{% if (presentationPage.position == activePresentationPage.position) %}#ffffff{% else %}#bbbbbb{% endif %}; border: 1px solid #000000; width:100%; padding:2px 5px; margin:5px; color:#000000; text-align:center;">
{{ presentationPage.position }}
</div>
</a>
</div>
ENDFOREACH
</div>
The entire thing looks like this when rendered:
And I can't seem to find out why. A simple inspect doesn't bring any insights.
That is because the div that you put around the two elements doesn't have a specified width and height. Therefore the div will base its width and height on the size of its content. Then, your two elements will base their width and height on their parent's width and height, so it will get very small.
So if you give the parent div a width and height it should work out okay.
Hi am working on django
I would like to show a file which is saved in the django model into a div in the django template.The file can be any format like .txt, .html, .png, .gif etc...
my model look like this
class RepositoryFiles(models.Model):
file = models.FileField(upload_to='files')
name = models.CharField(max_length=255)
class Meta:
unique_together = (('file', 'name'),)
In my view i do the basic filtering operations
RepositoryFiles.objects.all()
In my template , now I give the file url to an anchor tag which will open it
{% for file in files %}
<div class="col-sm-2" style="
text-align: center;
height: 100px;
padding-top: 15px;
margin-bottom: 15px;
">
<div class="col-sm-12" style="text-align: center;">
<a target="_self" href="{{ file.file.url }}" class="btn btn-info btn-lg">
<span class="fa fa-fw fa-file"></span>
</a>
</div>
<div class="col-sm-12" style="
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 10px 0px;" data-toggle="tooltip" data-placement="bottom" title="{{ file.name }}">{{ file.name }}</div>
</div>
{% endfor %}
I want to open it in a div inside the current template on clicking the link
Thanks in advance
Hello I have two contents in my table, so two boxes that contain contents in html. I want to reduce the distance between these two boxes, but I realized size of one box is too big that they are just white space. I'm having trouble reducing that size. can someone please help me with this?
so, cell x and cell y that's in same row to be located closer.
<table class="table">
<tr id="cell">
---------------------------------------------------------------(one cell)
<td class="vert-align">
<div class="voting-space">
<a href="/post/{{ post.slug }}/vote?is_up=1" class="vote">
<span class="glyphicon glyphicon-triangle-top col-md-12" aria-hidden="true"></span></a>
<br />
<span class="col-md-12" style="height:1px; font-family: 'Passion One', cursive; bottom:10px; padding-left:0.01em;
"><h4 id="vote_count_{{ post.slug }}">{{ post.get_vote_count }}</h4></span> <br>
<a href="/post/{{ post.slug }}/vote?is_up=0" class="vote">
<span class="glyphicon glyphicon-triangle-bottom col-md-12" aria-hidden="true"></span></a>
</div>
</td>
--------------------------------------------------------------------(the other cell)
<td class="vert-align">
{% if post.url %}
<h4 id="line">
<img src="{{post.image}}" height="85" width="85"/><span id="title-font">{{ post.title }}</span>
<span style="margin-left: 15px;" class="domain">({{ post.domain }})</span>
<span class="discuss" style="color:red;">토론장 입장</span>
<br />
<span class="post-info">{{ post.pub_date | timesince }}전/{{ post.moderator.username }}작성/<i class="fa fa-eye"></i>{{post.views}}/{{post.category}}</span>
</h4>
{% else %}
<h4>{{ post.title }}<span style="margin-left: 15px; "class="domain">({{ post.domain }})</span></h4>
{% endif %}
For controlling "cellpadding" in CSS, you can simply use padding on table cells. E.g. for 10px of "cellpadding":
td {
padding: 10px;
}
For "cellspacing", you can apply the border-spacing CSS property to your table. E.g. for 10px of "cellspacing":
table {
border-spacing: 10px;
border-collapse: separate;
}
This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school "cellspacing".