How to make scrollable list of buttons
Needed to make scrollable list of buttons in the left part of the screen. But the scrollbar in child div, even forced by overflow: scroll is not working. Read about removing overflow from parent objects, but without success. Left only body parent object for simplifying the code fragments below
base.html
</header>
<body>
{% block content %}
{% endblock %}
</body>
<html>
cities.html
{% extends "base.html" %}
{% block content %}
<div class="scrollbox">
{% for city in cities %}
<form action="{% url 'city_detail' %}" method="post">
{% csrf_token %}
<input type="hidden" name="city_id" value={{ city.id }}>
<button type="submit">{{ city.name }} </button>
</form>
{% endfor %}
<p> Censored...</p>
<!-- added for testing ~100+ - enough for make scrollbar workable by text only - no success -->
<p> Censored...</p>
</div>
{% endblock %}
CSS
@import url(//fonts.googleapis.com/css?family=Muli);
body {
margin:0;
padding:0;
/* with overflow hidden main scrollbar not shown, but forced scrollbar in child div not working and the data is cut
with value auto scroll shown for whole content, remainin not working for child div */
overflow: auto;
font-family:helvetica, sans-serif;
}
.scrollbox
{
min-height: 90vh;
border: 2px solid; /* for being sure, that no syntax errors in names, etc - border shown - OK */
float: left;
overflow-y: scroll;
}
Any ideas? The code above is easy to repeat with any model with enough data, if interested, IMHO. Was trying to make it as simple, as possible - I hope, that it was done successfuly. Bottom of div with parent overflow: auto is below.
Looks like this, right?
To make a child `div`
scrollable is to give it a fixed or constrained height. To achieve it, apply `
overflow: auto
or
overflow-y: scroll
Here's an example CSS:
.layout-container {
display: flex;
height: 100vh; /* => Fill the full screen */
}
.sidebar-scrollable {
width: 250px;
height: 100%; /* => Fill the parent height */
overflow-y: auto; /* => Enable vertical scrolling */
padding: 10px;
box-sizing: border-box;
background-color: #f9f9f9;
}
.main-content {
flex: 1;
padding: 20px;
}
Hopefully, this will help