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.
Related
How can we get height of sidebar in checkout using js
Is there any way to get the sidebar height?
first grab the element
const myEl = document.querySelector("#whatever-your-sidebar-id-is");
then you can either check the height with clientHeight or getBoundingClientRect().height :
myEl.getBoundingClientRect().height
You can get the height with offsetHeight and offsetWidth properties of the element.
elem = document.querySelector('#sidebar-id-or-class')
elem = document.querySelector('.cart-summary')
then check the height with offsetHeight
console.log(elem.offsetHeight)
The function will give you relatively with properties of the DOM element to get its the width and height.
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" },
};
I have a React Component that renders an instance of tinymce editor.The goal is to resize the editor's height dynamically after it has been initialized. I am using "React Grid Layout" package to resize the component.
2 Questions:
1. Where can I look up for the change in height of the editor's parent within the react component.In which lifecycle?
2. Where should Update the editor configuration for its height? Within the init method?
render(){
<div id="wrapper">
<textArea id="tinymceSelector"></textArea>
</div>
}
Part of my solution is to determine the parent's height like this:
let parentHeight = document.getElementById('wrapper').clientHeight
If there is any difference before and after resizing with React Grid Layout this parent Height will show the difference in size.
After I have found the height and determine the height change (but where? that is my question 1). I would update the tinymce configuration with:
editorinstance.theme.resizeTo (width, height);
Thank you!!
The implemented solution was:
On first render, I initialize the tinymce editor as follows:
I calculate the initial height at which the editor should be rendered based on #wrapper height.
I set the for the #wrapper's height in a variable called this._wrapperHeight.
Instead of setting the editor's height to the same height as the #wrapper, I adjust it to be only 70% of the total value. This prevents scrollbars. (I must say, I would like a different implementation to this because when I resize it to be too small the scrollbars are persistent)
this._editorHeight = this._wrapperHeight * 0.7;
During init, the I also had to include the plugin autoresize in the editor's configuration and also set the autoresize_min_height=this._editorHeight
After initialization has been accomplished, updating the height dynamically was achieved as follows:
In componentWillReceiveProps I calculate the #wrapper's height again.
Evaluate the old wrapper's height vs the new one
If they are different then: set the new height tinymce.get(this.props.renderId).theme.resizeTo(this._editorWidth, this._editorHeight);
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
I have a div element whose auto height, lets say, is 300px.
On a button click, I set it's height to 500px.
I would like to animate it's height back to its default height.
The only solution I know is to clone the div, store its height and use it accordingly.
A jsfiddle example
var elem = $("div").clone().height("auto").appendTo("body");
$('div').animate({"height": elem.height()});
elem.remove();
Is there a better way to do it? I dont want to clone as I have huge number of elements on my actual page.
Update:
I have created another fiddle. How would you get default height of element if its not yet set on load?
you could store the height of the original when you set it's height to a static value, perhaps as a data attribute of the element.
so:
$('button').click(function() {
$('div').data('origHeight',$('div').height());
//Your code to set the height
});
then:
$('div').animate({"height": $('div').data('origHeight')});
How about save "old height" to some attribute?
like this.
$('#someDiv').attr('old-height',$('#someDiv').height());
what do you say?