Как узнать реальную ширину элемента?

Question

[nezzard]

Добрый день, имеется элемент input у которого width:100%
Пытаюсь вытащить ширину через %(input).width();
Но как и ожидалось я получаю в ответ 100, как узнать реальную ширину которая на данный момент в браузере, если в css ширина в процентах?

Answer 1

[Atllantis]

Через $(input).width(); вы получаете ширину в пикселях, а не в процентах.

UPD:

А если стоит 100% выдаете 100 и хоть ты тресни, никак реальную ширину (450) получить не могу

Ну да же не представляю, что вы там делаете и как оно может возвращать 100.
Может ширина и является 100 пикселей?
https://jsfiddle.net/pjweoqzu/

UPD2:
И тут у меня всё работает: https://jsfiddle.net/pjweoqzu/2/
Что я делаю не так... Да ж не знаю.

UPD3:
И со стилями то же всё нормально работает!
https://jsfiddle.net/pjweoqzu/3/

Comments

[nezzard]

Если я в цсс задаю 500 пик, то .width(); выдает 500

[nezzard]

А если стоит 100% выдаете 100 и хоть ты тресни, никак реальную ширину (450) получить не могу

[nezzard]

Я уже все что можно перепробовал, может проблема в том, что инпут в модальном окне?

[Михаил]

nezzard: привидите пример кода в котором наблюдается такая проблема

[nezzard]

Михаил: https://toster.ru/answer?answer_id=866456#answers_...

[Atllantis]

nezzard: https://jsfiddle.net/pjweoqzu/1/

[nezzard]

Atllantis: Странно то, что только в модалке бутстреп не работает

[nezzard]

Atllantis: решил другим способом, нашел родителя конкретного модального, потом нашел его инпут и все заработало, видимо брало ширину из другой формы

Answer 2

[nezzard]

<form action="/about/#wpcf7-f104-o3" method="post" class="wpcf7-form" novalidate="novalidate">

<div class="inner">

  <label>Email</label><span class="wpcf7-form-control-wrap email">
<input type="email" name="email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" autocapitalize="off" autocorrect="off" autocomplete="off"></span><p></p>

</div>


<div class="inner">
<label>Phone#</label><br>
<input type="tel" name="phone" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel phone-inpt" aria-required="true" aria-invalid="false" autocapitalize="off" autocorrect="off" autocomplete="off"></span><p></p>
</div>

<div class="inner sbm">
  <input type="submit" class="sbmit-btn btns" value="Submit" autocapitalize="off" autocorrect="off" autocomplete="off">
</div>

height: 20px;
    width: 100%;
    float: left;
    border: 1px solid #8a8a8a;
    padding-left: 9px;
    font-family: 'proxima_nova_rgregular';
    font-size: 16px;
    line-height: 16px;
    color: #181818;