I want to create a page layout as shown below:
+---------------------------+
| Auto-fill / v scrollable ^|
| ||
| ||
| v|
+---------------------------+
| Fixed [][][]|
+---------------------------+
| Fixed - Collapsable |
+---------------------------+
Where [] represents buttons.
I have a Plunk that resembles the structure above, but there are some issues:
- (resolved) The vertical scrollbar of the Autofill area extends beyond its own area. It should stop at the next section.
- (resolved) The header of the first accordion group (with the buttons) does not occupy its full space and/or the buttons go outside of the header.
- Since I set a max height for the 'Fixed - Collapsable' area, I need an automatic vertical scrollbar.
Minor issue:
- The spacing between accordion groups is too large.
- Buttons are not vertically centered.
Suggestions on how to address these issues would be appreciated. Thank you!
I used an accordion group for the buttons section because it was the easiest way to align it with the bottom accordion and maintain consistent styling. While correct that it shouldn't be opened with empty content, other methods to achieve this alignment are welcomed.
UPDATE
I have made updates in an updated Plunk where the footer container's height is fixed (= 250, also the max height), while allowing the maincontent container to expand and shrink accordingly.
UPDATE - part 2
I have resolved the second issue regarding the header styling:
<accordion-group is-open="false" is-disabled="true">
<accordion-heading>
<a ng-href="" unclickable> </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>
In the code snippet, I added is-disabled="true" to ensure the accordion cannot be opened.
To address the partially filled background due to lack of content, I inserted a non-breaking space. However, hovering over it may display the 'hand' cursor, so I implemented a directive to change the cursor to 'default' upon hover:
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) {
}
}
});
One minor issue: Clicking the non-breaking space sets focus on it, but resetting focus on click does not work.