CSS / AngularJS: Accordion as footer - styling issues

Question

I'm trying to build a page structure like so:

+---------------------------+
| Auto-fill / v scrollable ^|
|                          ||
|                          ||
|                          v|
+---------------------------+
| Fixed               [][][]|
+---------------------------+
| Fixed - Collapsable       |
+---------------------------+

Where [] are buttons.

I have a Plunk that approximates the above structure, but there are some issues:

• (solved) The vertical scrollbar of the Autofill area goes deeper than it's own area. It should stop at the next section.
• (solved) The header of the first accordion group (with the buttons) doesn't occupy it's full space and/or the buttons break out of the header space.
• Since I changed the 'Fixed - Collapsable' area to have a max height, I need an automatic vertical scrollbar.

And a minor issue:

• Spacing between accordion groups is a bit too large.
• Buttons aren't vertically centered.

Icing on the cake:

- It would be cool if the 'Fixed - Collapsable' area could be set to a max height with an auto v-scrollbar.

Any suggestions on how to fix this? Thanks!

I used an accordion group for the buttons section, because that was the easiest way to get it to align to the bottom accordion and have the same styling. It's correct that it shouldn't be opened, content is empty and should never be displayed. Alternate ways of achieving this are welcome.

UPDATE

I've created an updated Plunk where the footer container's height is changed to a fixed value (= 250, also the max height), while making the maincontent container shrink and expand accordingly.

UPDATE - part 2

I've fixed the second issue (header styling off):

<accordion-group is-open="false" is-disabled="true">
  <accordion-heading>
    <a ng-href="" unclickable>&nbsp;</a>
    <span class="pull-right">
        <button class="btn-xs btn-primary">Save</button>
        <button class="btn-xs btn-primary">Cancel</button>
        <button class="btn-xs btn-primary">Close</button>
    </span>
  </accordion-heading>
</accordion-group>

As you can see I've added is-disabled="true" to be 100% sure the accordion can't be opened.

The reason why the background was only partially filled was because there's no content. For that reason I've added a non-breaking space. However, that will mean that hovering over it will provide you with the 'hand' cursor, which may confuse people. So I've added a directive to make the cursor 'default', when hovering:

app.directive("unclickable", function () {
      return {
          restrict: "A",
          scope: false,
          controller: function ($scope, $element) {
              $element.bind("click", function () {
                document.getElementById("top").focus();
              });
              $element.bind("mouseover", function () {
                  $element.css("cursor", "default");
              });
          },
          link: function ($scope, $elem, $attrs) {
          }
      }
  });

Very minor issue: Should you find the non-breaking space and click it, then the focus will be on it. The (re)set focus on click doesn't work.

Answer 1

To fix the vertical scrollbar issue you can set position: fixed also to your .maincontent, something like this:

.maincontent {
  position:fixed;
  top: 40px;
  bottom: 85px;
  right: 0;
  left: 0;
  overflow: auto;
}

Then you can adjust the top and bottom values to suit the header/footer size.

UPDATE:

In your example the whole document is scrolling (hence the scroll bar with full window height), if you wish to restrict the scrollbar you should scroll inside an element, in your case .maincontent. overflow: auto takes care of that (docs): it adds the scrollbars inside the div. The rest of the code is simply a fixed positioning, to fill the remaining space in your layout.

Answer 2

you can add this css:

   .pull-right
{

   position:fixed;
}