Search code examples
javascriptjquerywidthmaterial-design-litedimension

How to get the real width of an element in JS?


Fellow Developers,

I'm having an with some controls, it's the following one, some of them are larger than the screen:

larger

However, if I get the width either with JS or jQuery, I get always the same value 300px.

img2

img3

And if you see carefully the first screen says: 406px, do you have any idea why cannot I get the proper value?

Here is the code that I showed above.

$($('.mdl-textfield__input')[0]).outerWidth()
$($('.mdl-textfield__input')[0]).width()

Also, you can access the website from here:

https://fanmixco.github.io/toastmasters-timer-material-design

Important detail, this is the iPhoneX view in Chrome.


Solution

  • Seems to me you are using CSS transform. Try something like
    $(".mdl-textfield__input")[0].getBoundingClientRect().width