Question

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.

Answer 1

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”