Develop Reference

Is there a way to set initially the row height for resizable rows?

When using textarea fields in a row, the row can become very tall in height. Is there a way to initially set a max-height of cell/rows and just make them bigger when necessary?

To extend on your initial answer, that wont work for all rows if you have the virtual DOM enabled.
It is extremely bad practice to try and manipulate elements inside the table as they could be replaced at any time, tabulator only renders the visible rows, others are created and destroyed as the table is scrolled so trying to apply heights like that will not work reliably in most cases.
In your case I would suggest setting it in CSS after you have imported the tabulator.css file:
.tabulator .tabulator-row tabulator-cell{
height:24px
}

Overflow property on TD elements in an HTML Table

I am using HTML tables to show my data in tabular form. I know that the
Default behavior of td elements in a table is that they change their width and height in order to accommodate the text inside it i.e. like that shown in figure (A)
Is it possible that I some how achieve the effect as shown in figure (b) , i.e. I would like to modify the td elements using CSS in such a way that it gets the shape as that in Figure (b) i.e. maintain it's width and height but makes the text inside itself overlay the sibling td elements?
PS: Have tried fixing the width and height plus using the overflow property of CSS but that didn't work.
NOTE
I don't want to use the colspan property, i.e. I still want the sibling td to be there (of course, they won't have any content inside them).
The reason Why I want to achieve this is I'm using jQuery plugin Datatable and this doesn't work with the table having tds that are using colspan property

Finally, using #teemu suggestion, i.e.
Using an absolutely positioned extra element into td

How can I programmatically set the width of a column in Slickgrid?

I'm using SlickGid 2.0 and I'd like to be able to set the width of each column based on the longest string contained in the column. I'm fine calculating the required width, but I cannot figure out how to set the width of a column outside of faking a drag event. Is there any other way to individually set the widths of columns in SlickGrid?

According to comments in the source code, you can set model[cell].width to adjust the width of individual columns.
See comments here:
http://code.google.com/p/slickgrid/source/browse/trunk/slick.grid.js?r=9

JavaScript - Need a way to set OuterHeight of the Element

I have an container element which is sort of a layout container for its children and based on some attributes I have to arrange children.
I need simple way to set outerHeight of an element, something like,
$(e).setOuterHeight(200);
jQuery's outerHeight does not set the height at all, indeed its a readonly method.
$(e).height(200); // this clips my element
In above method, I loose borders of input of type text.
My element's children are docked based on available space and some other criteria based on data that it holds, simple layouts like float,clear etc will not work because padding etc change dynamically based on sizes. I will finally end up using Table, even if I dont want to but have no choice, but anyway thanks for the help.
Now when element is sized to more then children then there is no problem, but sometimes container element may have lesser height then the children and that time, I need to increase the size.
function calculateSize(e){
var s = {
width: $(e).innerWidth(),
height: 0
};
var ae = new Enumerator(e.children);
while(ae.next()){
var child = ae.current();
// I have tried all alternatives
// for following lines
// child.clientHeight || child.offsetHeight
// $(child).outerHeight()
// $(child).innerHeight()
s.height += $(child).outerHeight();
}
if(s.height > $(e).height()){
$(e).height(s.height);
}
}
function layoutChildren(e){
....
/// for every child c
/// some steps before
var heightForChildren =
calculatedWithPadMarginBorder(availableHeight,c);
/// tried combinations
$(c).height(heightForChildren);
/// last statement fails for button
/// as button's padding cuts itself
/// removing padding in calculation
/// cuts other input elements !!
/// some steps after
....
}
I need some explanation of how to calculate runtime height/width including/excluding padding/margin/border etc and how to set it correctly so that I dont run into problems. I cant keep on trying all permutations combinations as I dont see a correct documentation even on jQuery website.
Fixed height calculations are fine, but this is kind of a dynamic element which resizes itself and arranges children in specific order.
Problem is there is no way to set outerHeight, when we set height/width of an element, the height/width is actually inner height/width without taking margin into consideration, while when we want to resize parent, we need outerHeight, but we cannot set back the outerHeight that easily.
My calculateSize and layoutChildren are two separate methods and two separate algorithms because parent will be resized to sum of all children's height. And then height is simply divided by no. of children stacked one above other. My calculation is perfect, but in my layoutChildren method I have "outerHeight" and "outerWidth" of element and have no idea on how to set it correctly by using jQuery or any other way.

.outerHeight( value )
version added: 1.8.0
you can use jQuery.outerHeight(value) to set the value of an element's outer height. Ex: $foo.outerHeight( 200 )

If you don't have a special requirement, a standard element by default sizes its height to match its children. If you style the to float:left or float:right its default width will then also be that to contain all its children.

Ok, this is strange but this is the Answer.
There are weird controls,
SELECT
BUTTON (INPUT[type=submit|reset|button])
WebKit Browsers
Padding and Border are considered as part of OuterWidth for all controls
Padding and Border must be added to Width as OuterWidth for all controls
Padding and Border are considered as part of InnerWidth for "weird controls"
Padding and Border must be subtracted from Width before setting the Width for all "non weird controls"
Non WebKit Browsers
Padding and Border are considered as part of OuterWidth for all non "weird controls"
Padding and Border must be added to Width as OuterWidth for all non "weird controls"
Padding and Border are considered as part of InnerWidth for all non "weird controls"
Padding and Border must be subtracted from Width before setting the Width for all "non weird controls"

I would be happy to help, but I simply do not understand your question.
In regards to the documentation of the dimensions methods of jQuery I found that http://api.jquery.com/category/css/ holds documentation on both innerWidth(), innerHeight(), outerWidth() and outerHeight().
I hope this helps, otherwise, try reading through your question, making it more obvious what you need the answer for.

Calculate element height the way slideDown() does

Have you noticed that by using jquery's slideDown(), even on elements with dynamic content, you always get the perfect height of the effected element. Which is, for me at least, impossible to do by simply animating the css height value. Mostly because there is no way for me to know how did the height of an element (with a display:none) changed, during a dynamic content (AJAX) update.
And since i've been working on some custom controls, i do need that capability to calculate things the way slideDown() does.

If you are inserting a new dinamically loaded content, it means you have that element in memory, so you can refer to it and know its height. You only have to read its height (or maybe outerHeight) and slide by that amount.
EDIT
Just give a height of 0 to the hiden item and overflow:hidden, so that the content inside it won't be sohwn, and it will retain its height.
http://jsfiddle.net/jgyLm/9/

You can try this after appending the dynamic content to the element.
$(element).height();
$(element).outerHeight();//if you need margin to be included pass true to outerHeight method