CODEWITHSUNDEEP
jquery-uiaccordionjquery-ui-accordion
Andrew Connell
Andrew Connell

Reputation: 5307

Controling height in jQuery UI Accordion with dynamic data

I'm using an jQuery accordion control with knockout to dynamically add/remove items to the control based on some client-side activity. I've created a knockout binding like such:

ko.bindingHandlers.accordion = {
  init: function (element, valueAccessor) {
    var options = valueAccessor() || {};
    setTimeout(function () {
      $(element).accordion(options);
    }, 0);

    //handle disposal (if KO removes by the template binding)
    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
      $(element).accordion("destroy");
    });
  },
  update: function (element, valueAccessor) {
    var options = valueAccessor() || {};
    $(element).accordion("destroy").accordion(options);
  }
}

Now my problem is the sizing of the accordion... it always looks very compressed (vertically). I've tried setting the height of the DIV that contains the control, like this:

<div id="LearningPaths" data-bind="foreach: allLearningPaths, accordion: {}" style="height:500px; border:1px solid red;">

But the panels in the accordion don't change... they still aren't very "tall". Here's what it looks like: http://sdrv.ms/STA9Y6

I think there's a setting I can pass in when I use the .accordion(), but with my binding handler I'm not sure how to do that as I'm already passing in the 'options' object.

What I want is to have the content area of each panel to expand to the entire available side in the accordion control... ideas?

Upvotes: 0

Views: 595

Answers (1)

Stefan Bauer
Stefan Bauer

Reputation: 264

First i think your problem is someone related to SharePoint web parts. I created a accordion solution which is based on the summary link web part in SharePoint and can be found here: http://www.n8d.at/blog/turn-summary-link-web-part-into-an-accordion/ I wrote my own accordion to accomplish this, which also makes sure that if you like to edit the page the accordion script won't be loaded.

On the other hand i think your problem is more related to css and not to jquery. Do you use float style in your css? Then you need to make sure that you use the so called clear-fix. This can be done in define the following style:

.panel:after{ clear: both; }

Upvotes: 1

Related Questions