Export to GitHub

primefaces - issue #3608

AutoHeight and AutoWidth for Scrollable DataTable


Posted on Feb 28, 2012 by Happy Lion

Many time you want a datatable to occupy a certain area. For its width this is supported alread by using a 100% style. For height it is not. The patch that is attached solves this where a scrollHeight=0 means autofill the height of the parent container. It takes preceding elements in the same container into account, NOT elements that come after it.

Some tweeking still needs to be done, because when horizontal scrolling is also visible, the last 15px scroll go kind of 'wrong' (it still works, just a slight visual quirk)

The patch is agains trunk from this morning (2012-02-28T08:45:00Z)

Attachments

Comment #1

Posted on Feb 28, 2012 by Swift Rhino

(No comment was entered for this change.)

Comment #2

Posted on Mar 13, 2012 by Swift Horse

I support this change. We could really use it. We have support, BTW.

Comment #3

Posted on Jul 25, 2012 by Swift Kangaroo

Is it possible to make this feature available for the Community Funding?

Comment #4

Posted on Dec 4, 2012 by Quick Monkey

are there any updates on this patch? i tried to apply it to the current trunk, however without success, bc there are multiple incompatible changes in the datatable. can somebody post the patch to the current trunk?

Comment #5

Posted on Dec 4, 2012 by Helpful Rabbit

I would suggest use JavaScript for this temporary. I used in my application and working great. here is the code. it may help you.

function setDataTableHeight(objId, panelId) { var docHeight = jQuery(window).height(); var panelHeight = jQuery(panelId).height();

var scrollHeight = docHeight - panelHeight - 228;
if (jQuery.browser.msie && jQuery.browser.version == "7.0") {
    var scrollBody = jQuery(objId).find('.ui-datatable-scrollable-body');
    scrollBody.height(scrollHeight);
} else {
    var scrollBody = jQuery(objId + " .ui-datatable-scrollable-body");
    scrollBody.height(scrollHeight);
}

}

Comment #6

Posted on Dec 26, 2012 by Quick Ox

Friend did not understand how to use your code, how would I explain how to use? thankful, Warquia Pereira.

Comment #7

Posted on Dec 27, 2012 by Swift Rhino

I have been working on autoWidth, will work on autoHeight as well for 3.5.

Comment #8

Posted on Dec 27, 2012 by Swift Rhino

I haven't implemented scale to container height but implemented downscaling for width and height in case data is smaller than scrollHeight and scrollWidth.

Comment #9

Posted on Dec 27, 2012 by Helpful Rabbit

downscaling for width and height may be not good solution. I downloaded latest code and tested with my application. In case of single record its looking very odd. half of record is covered with horizontal scroll bar in case of scroll bar is there.

Comment #10

Posted on Dec 27, 2012 by Quick Ox

Good afternoon, I'm from Brazil and still do not understand how to use it!. Its post the javascript code as the PrimeFaces DataTable?

Please!!

Comment #11

Posted on Apr 3, 2013 by Happy Lion

Should I file a new issue for autoscale height to container and populate with 'empty' zebra striped rows?

Comment #12

Posted on Jul 23, 2013 by Helpful Dog

I don't see any reference in the primefaces users guide 3.5 about AutoHeight and AutoWidth for Scrollable DataTable. ¿is there an example of that?

Comment #13

Posted on Aug 13, 2014 by Swift Hippo

Where can i found some documentation about this feature? is this already done?

Comment #14

Posted on Aug 13, 2014 by Swift Horse

I believe you have to put in "100%" for the width or height. However, for that to work properly, all of the surrounding HTML container elements need to have a fixed height. In the case where the user needs to resize the browser, you'll probably need to add Javascript to keep re-calculating the heights of the container elements and dynamically re-adjusting their fixed height values.

Status: Fixed

Labels:
Priority-Medium Type-Enhancement TargetVersion-3.5