foreach template overflows parent container!!?

40 views
Skip to first unread message

Swart E

unread,
Jun 24, 2016, 4:37:18 PM6/24/16
to KnockoutJS
Hey KnockoutJS group!

I am pretty new to knockout, so I am not sure if this is by design, or my problem?
I appreciate any insight into a possible goob question.

Simply, I have a panel, where the panel-body calls a foreach template.
I have the panel-styling set with overflow:auto.
But the panel-body does not contain the template results and they scroll off the bottom of the screen.

Something like this:
Container:
<div id="thumbnailContainer" class="panel panel-primary">
 <h2 id="thumbsTitle" class="panel-heading panel-title">Thumbnails</h2> 

<div id="thumbList" class="panel-body" style="overflow:auto;height:auto>
 <ul id="thumbnails" data-bind='template: {name:"thumbnailsTemplate", foreach: thumbnails}'></ul>
 </div>
          <div class="panel-footer"></div>
</div>



Template:
<script id='thumbnailsTemplate' type="text/x-jquery-tmpl">
    <li>
        <a href="${Url}" data-vpath="${VPath}">
            <img class="thumbnail" src="${UrlThumbnail}" />
        </a>
    </li>
</script>

Javascript: this comes back after the template has finished to set max height of the container,
Which should contain the results of the foreach, right???
It scrolls out of the panel container and off the screen.

defered.done(function () {

     var height = parseInt($('#col-tv').height() - $('div#tv-panel').outerHeight());
     $('#thumbnailContainer').css('max-height', height);
    //$('#thumbList').css('max-height', height - $('#thumbsTitle').outerHeight());
            
})



I have to add the commented portion and manually try to fit the #thumbList in #thumbContainer.
Which I shouldn't have to do, right?

So this may be my issue with css and/or bootstrap, but...

I have tried flexbox, what a disaster!!!

I have simplified it down just using nested <div>s with no panel classes, same behavior???

After a few days of struggling with this, I figure it may have something to do with the ko foreach process?

Appreciate your time and any insight. Thanks,

Cheers!


Swart E

unread,
Jun 24, 2016, 5:48:38 PM6/24/16
to KnockoutJS
Sorry, couldn't figure out how to edit original post.
For clarity's sake, here is the entire pertinent html:

<div id="col-tv" class="col col-md-4 well well-sm" style="height:100%">

    <div id="tv-panel" class="panel panel-primary" style="max-height:50%;overflow:auto;height:auto">
        /* tree view contents
   </div>

    <div id="thumbnailContainer" class="panel panel-primary">
        <h2 id="thumbsTitle" class="panel-heading panel-title">Thumbnails</h2>
        <div id="thumbList" class="panel-body" style="overflow:auto;height:auto>
            <ul id="thumbnails" data-bind='template: {name:"thumbnailsTemplate", foreach: thumbnails}'></ul>
        </div>
        <div class="panel-footer"></div>
    </div>

</div>

Which helps make sense of the javascript

noirabys

unread,
Jun 27, 2016, 8:30:21 AM6/27/16
to KnockoutJS
please setup an jsfiddle ... 
Reply all
Reply to author
Forward
0 new messages