Develop Reference

Fluent UI Reading the height of DetailsList's ViewPort

I'm using DetalisList within ScrollablePane component to keep the header in view, and let the rows scrollable. However, this requires me to manually set the height of the scrollable container.
div.scrollable-container
ScrollablePane
DetailsList
When I investigate the DOM elements for DetalisList, I can see that it's wrapped inside a ViewPort element. The height of this element is the actual height of the sum of the height of all components that make up the list (column headers, rows. etc.). Thus, I want to be able to read this value and set the container height based on whether it exceeds a certain value or not.
Is there a nice to way to access the height of the ViewPort? I can always query the DOM, and find the element, but I'd like to avoid relying on the internal structure of the component.
So, far I could not find any information on this. I noticed DetailsList takes a prop called viewport, but I don't think this is what I want.

You can try by giving height in "vh" (viewport height) unit. For example,
const gridContainerStyle: IStackStyles = {
root: { height: "70vh", position: "relative" },
};

How to get height of a div tag if html is dynamically inserted?

I have a div tag on my page.
<div id="filterDropdowns"></div>
I made html markup in my javascript and then inserted into div.
var markup = "";
markup = //Here makup is created through some logic.
$("#filterDropdowns").html(markup); //Inserted html
Everything is working fine.After this, when i trying to get the height of "filterdropdown", it's always 0. I have tried many ways to get the height but i am unable to get the height. I have tried jquery method like innerheight,outerHeight and javascript method as well but it always zero. How i can get the height?

try this for get height via jQuery :
alert($("#filterDropdowns").find("div").height());

height: auto; wont work. The div created by your logic, add height:inherit; to that div and also give a constant height to you #filterDropdowns It needs a height. If parent is 0 the child cannot inherit the height. So either specify a height in your div created your logic or inherit the parents height.

This code will give you the height:
$("#filterDropdowns").height()
Simple as that. No matter how the content was inserted. Dynamically or not.
However, please consider the following:
1) Make sure you check the height of the element really after you had already inserted its content. If you check the height before adding the content then, well, an empty element's height is most likely 0 (unless it is styled somehow).
2) Make sure the element is visible at the time you are checking the height, otherwise the result of the height method might be at least inaccurate.
3) If the contents of the element is positioned absolutely or floating then the height of the element will actually remain 0.

<div id="filterDropdowns" style="height:auto"></div>
try this

Try to this solution
var currentHeight = 0;
$(window).load(function() {
currentHeight = $('#filterDropdowns').outerHeight();
console.log("set current height on load = " + currentHeight)
});

Try this
html:
<div id="filterDropdowns" style="display:inline-block;height:auto"></div>
js:
$("#filterDropdowns").height()

Try jquery's .attr() function.
then, Write $('#filterDropdowns').attr('height','yourvalue');

Find out the initial width when the document is ready (NOT the current width)

I have a div and its initial position is 'relative'.
and i used width: 33%; for its width with regard to the parent div.
After clicking a button, it's position will become 'fixed'
I found out that the width will expand so that it is now taking the 33% of the document width.
Is there a way to prevent that from happening? I still want its width to maintain the 33% of its parent div upon clicking the button.
I am struggling to find out a jquery script that allows me to "memorize" its initial width when the document is ready. But so far the .width() is not applicable because it varies all the time.

you don't have to get its width, get its parent width, as I understood parent width will not change, get its width and divide it to 3. that will be what you want

How to change the width/height element, which has settings in subclass

I've a trouble with the style of nav element in my web application.
As you're able to see, if to focus on element nav#menu.horizontal-menu - I can see the actual width/height of that element in Chrome.
BUT! When I try to obtain that element in JavaScript by the id - menu (as you can see the tag declaration of nav tag in the bottom part of screen):
There is no both width or height values of it...
I rather understand, that it may be because of:
`nav#menu.horizontal-menu` != `nav`
But, it's only my suggestion... I've tried then to use both functions:
getElementsByClassName()
querySelector()
But... also no success as you can see in screens, what's wrong and how to get so needed actual width and height options from element?
Thanks!

I think you are looking for this answer:
How do I retrieve an HTML element's actual width and height?
.style.width only checks what is filled in in the style attribute of the element. OffsetWidth would probably work...

That's because there are no width and height styles defined for it.
To calculate the rendered width and height, use a.offsetWidth and a.offsetHeight. Those are the values that DevTools are showing on hover.

Have you tried:
var width = document.getElementById('foo').offsetWidth;
var height = document.getElementById('foo').offsetHeight;
For cross-browser compatibility I'm recommending you to use jQuery

forcing a definite size on a select multiple element

When a select multiple element is empty (without any options), the dimensions of the element become zero and shows only the scroll bar , also the element resizes according to the size of the data of the options . How can i create a select multiple element with a definite size which does not change irrespective of the above two factors?
Thanks in advance

Use CSS:
select.multiple {
width: 200px;
height: 400px;
}
The above assumes your select has class="multiple", but obviously you can set your CSS selector to ID or whatever suits, and of course you'll set the dimensions and units to suit your specific case.