Silver Platter
New Coder
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:
[CODE title="base.html"]<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="static/css/style.css">
<a href="{{ url_for('index') }}">Home</a>
<a> </a>
<a href="{{ url_for('data_entry') }}">Data entry</a>
<a> </a>
<a href="{{ url_for('help') }}">Help</a>
</head>
<body class="stop-scrolling">
{% block content %}{% endblock %}
</body>
</html>
[/CODE]
[CODE title="data_entry.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 %}[/CODE]
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:
[CODE title="base.html"]<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="static/css/style.css">
<a href="{{ url_for('index') }}">Home</a>
<a> </a>
<a href="{{ url_for('data_entry') }}">Data entry</a>
<a> </a>
<a href="{{ url_for('help') }}">Help</a>
</head>
<body class="stop-scrolling">
{% block content %}{% endblock %}
</body>
</html>
[/CODE]
[CODE title="data_entry.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 %}[/CODE]
