For a website I'm using Bootstrap Material Design and having a hard time aligning elements in a row (course.name and the course.update, course.delete buttons).
I want them to align vertically with CSS but vertical-align:middle doesn't work. Neither does <tr valign="middle">.
Any help is appreciated.
{% if course_list %}
<table class="table table-hover">
<tr>
<th>Course Name</th>
</tr>
{% for course in course_list %}
<tr>
<td><a class="text-nowrap" href="{% url "courses.detail" course.id %}">{{ course.name }}</a>
{% if course.instructor == user %}
<div class="pull-right">
{% url 'courses.update' pk=course.id as url %}
{% bootstrap_button button_type='link' content='Edit' button_class='btn-warning' href=url %}
{% url 'courses.delete' pk=course.id as url %}
{% bootstrap_button button_type='link' content='Delete' button_class='btn-danger' href=url %}
</div>
{% endif %}
</td>
</tr>
{% endfor %}
</table>
first of all your table is not responsive, to make it responsive do structure like this
<div class="table-responsive">
<table class="table table-bordered table-striped">
//rest of your code
</table>
</div>
it will make your table responsive and
.table td {
text-align: center;
}
or
<td class="text-center">some text</td>
make it center aligned
Related
I am working on a simple web-application with flask and am currently trying to dynamically create a scrollspy list group with jinja. In the code snippet the variable "choices" represents a list of lists of dictionaries. So the variable dict will be a list of dictionaries that populates the ids needed for the list group to work. For simplicity, I am testing it with choices containing only one list of dictionaries and loop.index to create the ids, but I was going to change that to uniquly generated ids later as choices will have more elements.
Unfortunately, the list group does not work properly. Any ideas as to what I'm doing wrong? The browser console throws me an error, "uncaught TypeError: i is null", relating to the bootstrap scrollspy.js. I was not able to trace it back and figure out what causes the error.
{% extends "layout.html" %}
{% block title %}
Results
{% endblock %}
{% block main %}
<!--course display-->
{% for i in choices %}
<div class= "container-fluid">
<div class="row justify-content-center">
<div class="col-9 heading">
<div>
<h1>Coursera Courses</h1>
</div>
</div>
</div>
<div class="row justify-content-center result-background">
<div id="list-example" class="col-2 list-group">
{% for dict in i%}
<a class="list-group-item list-group-item-dark list-group-item-action" href="#list-item-{{ loop.index }}">{{ dict["Course Name"] }}</a>
{% endfor %}
</div>
<div class="col-7">
<div class="scrollspy-example" data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="40" tabindex="0">
{% for dict in i %}
<div class="boxlayout" id="#list-item-{{ loop.index }}">
<img src="{{ dict["Image URL"] }}" alt="responsive webite" class="img-thumbnail" align="left" width="15%" height="15%">
<h2>{{ dict["Course Name"] }}</h2>
<details close>
<summary>Lorem ipsum</summary>
Lorem ipsum
</details>
</br>
<table>
<tr>
<td>Manufacturer</td><td> </td>
<tr>
<td>Certificate</td><td>{{ dict["Certificate"] }}</td>
</tr>
<tr>
<td>Costs</td><td>${{ dict["Current Price"] }}</td>
</tr>
<tr>
<td>Landing Page</td>
</tr>
</table>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{% endfor %}
{% endblock %}
The CSS I use as per the Bootstrap requirements:
.scrollspy-example{
position: relative;
overflow-y: scroll;
height: 300px;
}
I tried some of the answers posted on this forum but cannot find one fitting for me,
I realise this is an age old question sorry.
Im trying to get a vertical line like in this design:
The problem i'm facing is that this is in a table and I cannot figure out how to get them to cros like this.
Its about the element td with 'scores' id
Twig file
{% extends 'base.html.twig' %}
{% block body %}
<div class="table-responsive">
{% for group in duel_groups %}
{% if group is not empty %}
<table class="table table-bordered table-light" style="margin-top: 30px;">
<thead>
<tr>
<th>Omloop</th>
<th>Partuur 1</th>
<th>Scores</th>
<th>Partuur 2</th>
{# <th>Spelers</th>#}
</tr>
</thead>
<tbody class="text-center">
{% for duel in group %}
<tr>
<td>{{ duel.omloopNummer }}</td>
<td id="team1">{{ duel.team1 }}</td>
<td id="scores">
{{ duel.eerstenP1 }} {{ duel.eerstenP2 }}<br>
<hr>
{{ duel.puntenP1 }} {{ duel.puntenP2 }}
</td>
<td id="team2">{{ duel.team2 }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
{% endfor %}
</div>
{% endblock %}
I have tried creating a div of 1px but that didn't work.
I tried a couple of solutions from this question How to make a vertical line in HTML
None seem to fit my use case tho.
Poking around some more came up with this:
<td id="scores" style="background: linear-gradient(#bcbcbd, #bcbcbd) no-repeat center/3px 85%;">
{{ duel.eerstenP1 }} {{ duel.eerstenP2 }}<br>
<hr style="border-top: 3px solid #000000; background: transparent;">
{{ duel.puntenP1 }} {{ duel.puntenP2 }}
</td>
Where I am adding a vertical line to the middle of the column and styling the hr tag
I want to split web page onto two parts. Static (top one) and scroll-able (bottom one).
The problem is that solution I have creates a scroll-able box with fixed width and height. But I've seen an example of a page where bottom and right sections are limited by size of the browser screen and have scroll bars always visible. With fixed size box this will not work if screen is small. The scroll bars will be hidden.
So far I tried only HTML and CSS approach. I use Flask and Python 3 as an engine.
Here is what I already created. First is base.html and second is data_entry.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="static/css/style.css">
Home
<a> </a>
Data entry
<a> </a>
Help
</head>
<body class="stop-scrolling">
{% block content %}{% endblock %}
</body>
</html>
{% extends 'base.html' %}
{% block content %}
<h2><br>{{title}}</h2>
<br>
<h3>Searchable fields</h3>
<div style="float:top; width:2000px">
<form action="/data_entry" method="POST">
<table>
<tbody>
<tr>
...
</tr>
</tbody>
</table>
<input type="submit" class="button" value="Search">
</form>
</div>
<div style="float:bottom; width:2000px; height:400px; overflow:auto;">
<table class="tableborder">
<thead>
<tr class="tableheaderborder">
{% for h in selected_header %}
<td class="tableheaderborder"> {{ h }} </td>
{% endfor %}
</tr>
</thead>
<tbody class="tableborder">
{% for row in selected_entries %}
<tr class="tableborder">
{% for column in row %}
<td class="tableborder"> {{ column }} </td>
{% endfor %}
</tr>
{% endfor%}
</tbody>
</table>
</div>
{% endblock %}
You can use this on your lower div. It will always show scroll bar to your div
overflow-y:scroll !important;
I'd like to center 'Status' with the pencil on the picture :
Here is the html code :
{{ headers }}
{% load i18n admin_static material_admin %}
{% if results %}
<div class="results">
<table id="result_list" class="table bordered highlight">
<thead>
<tr>
{% for header in result_headers %}
{% if 'action_checkbox' in cl.list_display and forloop.counter == 1 %}
<th class="action-checkbox">
{{ header.text }}<label for="action-toggle"> </label>
</th>
{% else %}
<th scope="col" {{ header.class_attrib }}>
{% if header.sortable %}
{% if header.sort_priority == 0 %}
{{ header.text|capfirst }}
{% elif header.ascending %}
<i class="material-icons">arrow_upward</i>{{ header.text|capfirst }}
{% else %}
<i class="material-icons">arrow_downward</i>{{ header.text|capfirst }}
{% endif %}
{% else %}
<span>{{ header.text|capfirst }}</span>
{% endif %}
</th>{% endif %}{% endfor %}
<th style="text-align:right;" style='postion: relative; right: 500px'>{% trans "Status" %}</th>
{% if row_actions_template %}
<th style="text-align:right;">{% trans "Actions" %}</th>
{% endif %}
</tr>
</thead>
<tbody>
{% for row in results %}
<tr class="{% cycle 'row1' 'row2' %}">
{% for item in row.cols %}
{{ item }}
{% endfor %}
<td class="material-icons">create</td>
{% if row_actions_template %}
<td class="row-actions">{% include row_actions_template with object=row.object %}</td>
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
{% include "loanwolf/pagination.inc.html" %}
The two important lines here are <th style="text-align:right;">{% trans "Actions" %}</th> and <td class="material-icons">create</td>. How could I modify the pencil so that it could be a little bit on the right?
I thought I could do <td class="material-icons" style='position: relative;
right: 200px'>create</td>, but it didn't work.
Thanks in advance!
P.S. Please tell me if the question is unclear.
Don't put your icons in a sub-table. Tables are not meant for layout, they're for displaying tabular data only.
Instead, apply the following to the table cell containing your action buttons:
.actions {
text-align: right;
}
Then just make your icons a list of anchor tags. I'm having to make assumptions about how your icons are structured and their classes because you didn't include the icon html:
<td class="actions">
Action1
Action2
Action3
</td>
Anchor tags are "inline" elements and will respond to text-align styles. Tables, divs, etc. are "block" elements and can't be aligned with text styles.
I have a table with 3 columns in which in one column i am using row span based on other columns data. Now i want to increase the width of the row after the row span or the row that separates two dates. My code is as shown below
<table class="table table-striped table-bordered table-hover" id="meals-table">
<thead>
<tr bgcolor="#328AA4" style="">
<th class="col-xs-2" style="text-align: center">
<font color="3366CC"> Date
</th>
<th class="col-xs-2" style="text-align: center">
<font color="3366CC"> Food
</th>
<th class="col-xs-2" style="text-align: center">
<font color="3366CC"> Quantity
</th>
</tr>
</thead>
{% for rdate in entities %}
{% for entity in rdate %}
{% set counter = 0 %}
{% set rowcount = 0 %}
{% set count = 0 %}
{% for food in entity %}
{% set counter = counter + 1 %}
{% endfor %}
{% for food in entity %}
{% set count = count + 1 %}
{% set rowcount = rowcount + 1 %}
<tr>
{% if rowcount <= 1 %}
<td style="text-align: center; vertical-align: middle; background-color: white;" rowspan="{{counter}}">{{ food.cdate }}</td>
{% endif %}
<td style="text-align: left; padding-left: 17%;">{{ food.foodname }}</td>
<td style="text-align: left; padding-left: 15%;">{{ food.qtyeaten }} {{ food.qtyname }}</td>
</tr>
{% endfor %}
{% endfor %}
{% endfor %}
</table>
Can anyone please help me to solve this.
just add width to your style element:
<th style="width: 40%; text-align: center ...
( and it seems that the number of columns in the table-header is not always the same as found in the table-data)