I am using angular 5 where in a component I have one method
onFullScreen : function (event){ console.log(event[0]) }
Here, when I do console.log(event[0]), this will return this
This returns a HTMLDivElement, now I want to get the height property in my onFullScreen() method. How to get it?
The best way to get the height of an element (and lots of other layout-related properties) is to use getBoundingClientRect (https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect).
So you can do this:
const height = event[0].getBoundingClientRect().height;
You can try this:
var height = document.getElementById('element').style.height;
Since the height is defined in inline styles for this element, this would work.
Warning: this does not work if height is not explicitly defined in css but calculated based on content or outer box.
Related
The div looks like this:
<div #container [ngStyle]=...>
The container is a flexbox row if that matters that contains elements; I need to know if a new element I'm adding to the row is going to fit without causing a wrap.
Thus, my code will sum up the total sizes of each element in the container and compare it with the size of the #container.
The code is like this:
#ViewChild('container') pillContainer: ElementRef;
let maxWidth = this.pillContainer.nativeElement.????
This is where the problem is. I don't think it is offsetWidth because the numbers I was getting back were more like possibly a margin-left. There is no 'width' element though if I look in:
this.pillContainer.nativeElement.attributes. xxxx
I do find and element called (with double quotes) "width", but I didn't see a way of getting the value of that attribute.
Any ideas?
Thanks in advance,
Yogi
According to documentation I stumbled across, I was in fact wrong: offsetWidth does in fact return the width of the element including borders, BUT it does not include the margins.
It seems getBoundingClientRect() may be more useful as it shows the effects of any transform that was applied.
I think this is sufficient for my problem.
Yogi
I would like to know if you can use calc() or something else to calculate the size of an element based on another DOM element size.
You can use .offset
something like this
var width = document.getElementById('element').offsetWidth;
var height = document.getElementById('element').offsetheight;
requires js of course.
I have an InputElement on my page, and I'm trying to access its width so that I can make other elements the same size.
My InputElement is top level, so I have:
InputElement nameBox = querySelector("#nameBox");
Later on in the main(), I have:
var width = querySelector("#nameBox").style.width;
After this line, width is always "" instead of the expected "149px". However, assigning to that stlye.width updates the width...
Any idea why this is? I understand that Dart's main() doesn't run until the DOM is loaded, so not sure why this isn't working.
By the way, the width is 149px by default--I haven't changed it.
.style.width does not return the computed width but the width assigned to the style attribute of the element (<input style="width:200px"/>). If you want to get the real width you can use Element.clientWidth.
I have a page with a for layout where one half of the page is dynamic width an the other is fixed. This is achieved by floating the fixed width side to the right. It all displays fine but because the fixed width markup comes before the dynamic width markup the tab ordering gets thrown off.
See here: http://jsfiddle.net/BaMqG/
How can i overcome this without resorting to putting tabindex properties on the inputs?
You can use jQuery to dynamically set the tabindexes with a loop and counter variable. Check it out. http://jsfiddle.net/BaMqG/22/
$(document).ready(function() {
var i = 1;
$('.wrapper').each(function(){
$(this).children('.dynamic').children('input').each(function(){
$(this).attr("tabindex",i);
i++;
});
$(this).children('.fixed').children('input').each(function(){
$(this).attr("tabindex",i);
i++;
});
});
});
The initial value for i can be set to whatever tabindex number you want to start from.
I have managed to get the same looking form with no tab index to work by using tables.
See here: http://jsfiddle.net/ymSGM/
I would still be interested if it can be done any other way.
If I have a div that expands to its contents, how can I ensure that its height is always a multiple of a given value, say, 50 pixels? Is there any way to do this with CSS, or would I need to resort to JavaScript?
Since CSS is not aware of the actual computed element dimensions, it cannot achieve what you ask. JavaScript can do this easily.
You'll need JavaScript. In case the content doesn't change inline (with ajax or jquery or anything) you can use an onload event to start a script that checks the height and fixes it:
<body onload="javascript:fixHeight()">
<div id="thediv">
content
</div>
</body>
script:
function fixHeight() {
var thediv = document.getElementById('thediv');
thediv.style.height = ceil(thediv.offsetHeight / 50) * 50 + 'px';
}
(not tested)