Develop Reference

Dynamic pageSize property of the Ant Design's Table

I'm using Ant Design to get a data Table with pagination. My desired result is to have this component stretched over the entire height of a parent container and adjust the number of rows according to the available space. But, since I have to think about different end users' screen sizes I can't simply assume how many rows would be there in a single page, like this:
<Table
pagination={{ pageSize: 6 }}
columns={columns}
dataSource={sampleData}
/>
Is there any recommended approach to make the pageSize property react to a screen's height changes dynamically? Or should I just set certain breakpoints manually?

There is no antd API for such behavior, you need to calculate it by yourself.
Useful functions to determine the screen height are:
clientHeight
getBoundingClientRect
Notice that those element functions, in React you should access them via a reference, for example with useRef.

The way I solve this UX problem is by to set the scroll property:
scroll={{ y: "calc(100vh - 250px)" }}
With this, the height of the Table will adapt to the user's client height, you'll just need to change 250px to whatever works for you.

Account for dynamic top element in React Virtualized `Grid`

I have a collection of photos that uses React Virtualized's Grid element.
We've designed an indicator to appear during photo uploads. This hides and shows dynamically and is rendered via the cellRangeRenderer per these docs.
The tricky part has been getting the rest of the Grid items to respect the additional height added by this new element. The approach that's currently in place is to add the height of that element to the style.top of each element rendered in cellRenderer.
const adjustedTopOffset = style.top + heightOfTopElement;
That above calculation is done for each element. This correctly places all elements at the appropriate offsets. However, the height of the Grid does not adjust for the recalculation of the top offsets.
The consequence is that the bottom of the Grid is cut off by the adjusted top amount.
How do I correctly account for adjusted top offsets? Calling recomputeGridSize doesn't seem to do it.
Is adjusting the top offset in cellRenderer the correct approach for accounting for an additional top element? I'll clarify that this isn't a fixed element but rather one that needs to scroll with the Grid like the other elements.

Given that your cell heights are fixed, you should be able to overrides the default height style using the containerStyle prop, like so:
let containerStyle;
if (isTopElementVisible) {
containerStyle = {
height: rowHeight * rowCount + heightOfTopElement,
maxHeight: rowHeight * rowCount + heightOfTopElement,
};
}

How to make the parent element fit its floated children as long as they aren't wider than the window?

I am trying to center a list of floating elements, but since it's a masonry I can't make them inline. A container would be needed, that much is obvious, but I couldn't find anywhere how do make it do this:
Ignore the margins here, they don't matter, it's just so each separate child element can be seen. And yes, the parent isn't centered, but it could be. The important part is that it dynamically fits the child elements and its width isn't 100% all the time.
Already tried floating the parent, in that case the child elements only make a single column.

Why not just set the parent's width the product of that of the maximum numbers of children with each child's width (if the child's width is constant)?
var x = $(child).outerWidth();
$(window).resize(function() {
$(parent).width(Math.floor($(window).width() / x)*x);
});

Retrieve Runtime Component dimension in ExtJS

After a component is rendered, how can I get the width and height? I tried .getWidth() and .getHeight(), but it returns the values of config properties. It seems they are just the getters of width and height config options.
What I want is the width and height of component after its been shown or rendered.

Use .getEl() to retrieve top level element. And than use element's getWidth method:
var width = yourComponent.getEl().getWidth();
this will give you width of actual DOM element.

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.