CODEWITHSUNDEEP
javascriptjquerycsssafariwidth
addlistener
addlistener

Reputation: 871

Jquery width() overflow Safari issue

Wrapping a table under a narrow div with overflow:auto. Under chrome, IE, FF, the width is over 200 which is expected. But in safari the with is 100.

Jquery width() docs didn't mention this? https://api.jquery.com/width/

The code pen, open console and scroll to see the log: http://codepen.io/anon/pen/adZxrd

In case it fails, the details below.

HTML:

<div class="outer">
  <table class="table table-hover table-condensed">
    <thead>
      <tr>
        <td>aaaaaaaaa</td>
        <td>bbbbbbbbbbbbbb</td>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

CSS:

.outer {
    width:100px;
  overflow:auto;
}

.inner {
    width:200px;
  border:1px solid black;
}

JS:

$('.outer').scroll(function(){
    console.log($('.table').width())
});

Upvotes: 0

Views: 836

Answers (1)

Kevin Vandenborne
Kevin Vandenborne

Reputation: 1387

I've found the solution, at least for me. Theres max-width: 100% on the table (seems to be default), weird issue but setting it to none fixed it.

This question solved it for me: Javascript: Calculation of width in Safari/iOS for elements overflowing their containers

Working (updated) codepen: http://codepen.io/anon/pen/JRjOoy?editors=1111

Upvotes: 2

Related Questions