Clever Geek Handbook

Full height angular UI accordion

I'm trying to make a complete UI Angular accordion no matter how big the content is in accordion groups.

Se JSFiddle: http://jsfiddle.net/hanspc/TBz9F

My HTML:

<div id="wrapper" ng-controller="caMain">
<div style="float: left; height: 100%; width: 300px; border-right: 1px solid #000">
<ca-accordion close-others="sidebar.oneAtATime">
    <ca-accordion-group heading="Static Header, initially expanded"  is-open="sidebar.status.isFirstOpen" is-disabled="sidebar.status.isFirstDisabled">
        This content is straight in the template.
    </ca-accordion-group>
    <ca-accordion-group heading="Dynamic Body Content">
        <p>The body of the accordion group grows to fit the contents</p>
    </ca-accordion-group>
    <ca-accordion-group is-open="sidebar.status.open">
        <ca-accordion-heading>
            I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': sidebar.status.open, 'glyphicon-chevron-right': !sidebar.status.open}"></i>
        </ca-accordion-heading>
        This is just some content to illustrate fancy headings.
    </ca-accordion-group>
</ca-accordion>
</div>

Lorem ipsum dolor sit amet...

</div>

I want the accordion to be my left column with height = 100% (e.g. jQuery's heightStyle = fill).

Can someone show me how to do this? I thought about rewriting the directive entirely, but I think there must be a way to do with the original Accordion directive. In my JSfiddle, I cloned the Angular UI accordion directive (its called the ca accordion) but nothing changed. Just to add changes to the directive if needed.

Is the solution in Angular or just CSS (tried this with no luck)?

Thanks in advance!

+3


source to share


1 answer


Now he has decided.

I changed the UI Harmonic Directive (created a new one based on the source code and modified it).

Here's what I did:



  • Added a resize event to $ window so that my controller would change a simple boolean var every time the window was resized.
  • Created a directive for an element containing an accordion (with height: 100%), with an observer in the boolean resizing area. This called a function that reads the height of the accordion container.

  • Added an additional accordion config parameter called fullHeight, which can also be set with: <ca-accordion full-height="true">

  • Added ng-style = "styles" style to <div class="panel-body" ng-style="styles" ng-transclude></div>

  • added the following to the accordion controller:

    var fullHeight = angular.isDefined($attrs.fullHeight) ? $scope.$eval($attrs.fullHeight) : caAccordionConfig.fullHeight;

// Create watcher for height changes if needed
if(fullHeight){
    var that = this;
    $scope.$watch('screen.height', function(value) {
        that.height = value;
        that.panelHeight = that.calcHeight(value);
    });
}

this.calcHeight = function(screenHeight){
    var height = 0;
    height += $scope.sidebar.searchPanelHeight;

    for (var k=this.groups.length - 1; k >= 0; k--) {
        if(!this.groups[k].isOpen || 1 == 1){
            var tmpH = this.groups[k].returnHeight();
            height += tmpH;
        }
    }

    var panelHeight = screenHeight-height;
    $scope.sidebar.activePanelHeight = panelHeight;
    return panelHeight;
};

  • Added observer + function to return the height of the accordion panel to the accordionGroup directive:

            scope.returnHeight = function(){
            return element.find(".panel-heading").outerHeight(true);
        }

        // Watch for screen height changes
        scope.$watch(function() { return caAccordionCtrl['height']; }, function(value) {
            if ( value ) {
                scope.styles = {
                    "height": caAccordionCtrl.panelHeight+"px"
                }
            }
        });

So my solution was to clone the Angular UI accordion code and customize it according to my needs.

See my fiddle: http://jsfiddle.net/hanspc/TBz9F/

+3


source






More articles:


All Articles