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.
Related
I am currently struggling with a div container with multiple children elements, some of which are images with absolute px width values.
The issue is resizing the parent and ensuring the content isn't cut off.
My current solution is:
function customResize(element){
let parent = element.parentNode;
element.style.width = parent.style.width;
element.style.height = parent.style.height;
}
$(window).resize(function (){
let elem = document.getElementById('contentContainerId');
customResize(elem);
});
This uses a parent element of the container div (that automatically resizes correctly) as a guide, taking its width and height values and assigning them to the container div. This works for resizing, but for some reason, it's not fully correct.
Any advice would be greatly appreciated!
After some feedback, I'm noticing the container div is resizing correctly and staying to the width of its parent. However, its contents, despite shrinking, still gets cut far too much. See the example image below - green is the desired width, red is the problem area.
Example Image
Or perhaps more clear with this
Example Image 2
Check out this w3schools page: https://www.w3schools.com/jsref/prop_style_overflow.asp
If you replace "hidden" with "scroll" and run it, you'll see how you can make your elements fixed size and scrollable.
As far as adapting to your situation, you may want to set the css width from the width before adding your images. You can do this like
var myDiv = ...;
let wid = myDiv.getBoundingClientRect().width;
myDiv.style.width = wid + "px";
And remember to add css style overflow-x : "scroll"
How can I get an elements width without setting it's width property in CSS? If I set the width it works, but if I don't the width is just 0 even though I can see it's not after inspecting with debugger.
let width = this.htmlElement.clientWidth;
HTML
<label [model]="foobar">0</label>
Use offsetWidth instead
let width = this.htmlElement.offsetWidth;
The first line in the docs for clientWidth is
The Element.clientWidth property is zero for elements with no CSS or
inline layout boxes, otherwise it's the inner width of an element in
pixels
The offsetWidth on the other hand is a read-only property that returns the layout width of an element, regardless of wether or not the element is styled with a given width.
var el = document.getElementById('foobar');
console.log('clientWidth : '+ el.clientWidth );
console.log('offsetWidth : '+ el.offsetWidth );
<label id="foobar">This has width ..................</label>
I am using an accordion which was written by somebody else. When the accordion is initially displayed, each rows' initial heights are persisted, and then their heights are set to 0. And then when the row becomes visible, its height is restored to its original value.
But in my case, the accordion's heights will change because I am asynchronously populating them with data. So, when the row becomes visible, I'd like to calculate the rows' height based on it's new constents. However, because its height was set to 0 with .css('height', 0), $(elem).height() gives 0.
Is there a way to calculate the height of the element, rather than just retrieve it's css height value?
Use jQuery's innerHeight function to get the calculated height of an element, sans border and margin.
var height = $('#myElement').innerHeight();
Edit:
Use jQuery's outerHeight function to get the calculated height of an element, including padding, border and optionally the margin.
//without margin
var height = $('#myElement').outerHeight();
//with margin
var height = $('#myElement').outerHeight(true);
Edit 2:
You may also compare these results with native Javascript.
var el = document.getElementById('myElement');
var height = el.offsetHeight;
You can also use the Javascript offsetHeight function.
var elementHeight = document.getElementById(id_attribute_value).offsetHeight;
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight
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
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.