0

I am trying to implement a Bootstrap 3 layout on my Django page at the moment, and the CSS (or my lack of CSS skills) is driving me mad... The page allows me to sort students into groups, and I'm trying to make it pretty and usable with CSS.

The idea is to have a smaller column on the left that contains the unassigned students (all in panels), and to have a large column on the right that contains panels for the groups. This screenshot should explain the concept:

The problem begins when I try to affix the left column and use scrolling for it. Every attempt I made so far did strange things that broke the grid layout. The attempt below makes the left column horizontally scrollable even though there is only empty space, which makes moving the panels a pain (I simplified the Django stuff, all of that works).

<div class="row">
    <div class="col-md-3">
        <div class="unsortedList" data-spy="affix" data-offset-top="0">
            <h4>Not assigned</h4>
            <ul id="0" class="list-unstyled connectedLists">
                {% for student in group.0 %}
                    <li class="panel panel-primary innerpanel">
                        <input type="hidden" ...>
                        <div class="panel-body">
                            {{ student }}
                        </div>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>

    <div class="col-md-9">
        {% for i in number_of_groups %}
            <div class="col-md-4" id="panel_{{ i }}">
                <div class="panel panel-default outerpanel">
                    <div class="panel-heading">
                        Group {{ i|add:"1" }}
                        <span class="badge pull-right" id="badge_{{ i }}"></span>
                    </div>
                    <div class="panel-body">
                        <ul id="{{ i }}" class="list-unstyled connectedLists">
                            {% for student in group %}
                                <li class="panel panel-primary innerpanel">
                                    <input type="hidden"...>
                                    <div class="panel-body">
                                        {{ student }}
                                    </div>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</div>

<div class="row">
    <input type="submit" value="Save Groups" class="btn btn-default">
</div>

The "Save Groups" button at the end is another pain, as it appears in the middle of the left column sometimes.

The relevant CSS is as follows:

.connectedLists
{
    min-height:100px;
} /* to allow moving of panels into empty lists */

.innerpanel
{
    width:170px;
}/* to make the student panels the same size */

.unsortedList
{
    overflow-y:auto;
    height:85%;
    width:200px;
}

What am I doing wrong in the grid layout? Thanks!

creimers
  • 4,975
  • 4
  • 33
  • 55
Tobi
  • 351
  • 1
  • 2
  • 20
  • 2
    Have you used Bootstrap's [Dashboard](http://getbootstrap.com/examples/dashboard/) example? They have a left hand column layout that will possibly be scrollable if you add enough to it. – theWanderer4865 May 10 '14 at 22:31
  • I have just tried to do use the example and insert my content, but with a very similar result to mine. The sidebar seems to be wider than its content once I try to drag one of the panels out of it. I have made [another screenshot](http://tobiaskliem.de/images/drag_problem.png) to show what happens when I drag the fourth panel from above in the sidebar to the other side. I tried limiting the size of the sidebar to a fixed pixel size with CSS, but with the same problem. – Tobi May 11 '14 at 10:42
  • A new version of the code (based on the example and slightly simplified and clarified) is [here](http://stackoverflow.com/questions/23592076/bootstrap-3-modification-of-dashboard-example-causes-scrolling-problems). Thanks! – Tobi May 11 '14 at 11:35

0 Answers0