CODEWITHSUNDEEP
javascriptangular
Rzassar
Rzassar

Reputation: 2282

calculate/get hidden div width in angular

In Angular, I have a hidden div which should be visible on an event.
Event triggers corresponding method. so far so good.
But i need to calculate position of the div just before showing it. I use following code in order to get boundary of div and calculate actual position, But the width of div is zero, because it is hidden.

EventTriggerMethod(myDiv){
  console.log(myDiv.getBoundingClientRect().width);
  //OR
  console.log(window.getComputedStyle(myDiv).width);
  //Both return 0 when div is hidden.
}

How can i get actual width of a div while it is invisible?

Upvotes: 0

Views: 1052

Answers (1)

Intervalia
Intervalia

Reputation: 10945

An element must be visible and not have display:none to be able to calculate its size. The two ways I have seen to get around this are:

1) Place the component way off screen and calculate the size. 2) Turn off display:none, calculate the size and then turn display:none back on.

As long as you do #2 in the same function it will never show since the re-draw functionality of the browser will not happen until after you function finishes. And since display:none is turned back on by the end of your function the element will never show.

Upvotes: 1

Related Questions