Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

In IE9, when table overflows, an error occurs with table-responsive and table-hover #14837

Closed
TheWilks opened this Issue Oct 20, 2014 · 26 comments

Comments

Projects
None yet
6 participants
@TheWilks
Copy link

TheWilks commented Oct 20, 2014

When the IE9 browser window is minimized an error occurs with responsive-table and table-hover. Extra space is added to the bottom of the table on hover.

capture

<div class="table-responsive">
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Case number</th>
        <th><abbr title="Survey specific identifier">SSID</abbr></th>
        <th>Last attempt</th>
        <th>Address/area</th>
        <th>Survey</th>
        <th>Activity</th>
        <th class="text-center">Case indicator(s)</th>
      </tr>
    </thead>
    <tbody>
      <tr title="1 related case" class="warning">
        <td><a href="cases/IE/viewCase.html">00108333</a></td>
        <td>35010001&nbsp;0001</td>
        <td>&nbsp;</td>
        <td>123 Elm Street</td>
        <td>Census of Population</td>
        <td>Interviewing/enumeration</td>
        <td class="text-center">1 <i class="fa fa-thumb-tack"></i></td>
      </tr>

      <tr>
        <td><a href="cases/IE/viewCase.html">15293482</a></td>
        <td>35010003&nbsp;0043</td>
        <td>&nbsp;</td>
        <td>742 Evergreen Terrace</td>
        <td>Census of Population</td>
        <td>Interviewing/enumeration</td>
        <td></td>
      </tr>

      <tr title="5 related cases" class="warning">
        <td><a href="cases/IE/viewCase.html">00093982</a></td>
        <td>35010007&nbsp;0065</td>
        <td>&nbsp;</td>
        <td>94 Somerset Street West</td>
        <td>Census of Population</td>
        <td>Interviewing/enumeration</td>
        <td class="text-center">5 <i class="fa fa-thumb-tack"></i></td>
      </tr>

      <tr title="18 related cases" class="warning">
        <td><a href="cases/IE/viewCase.html">00092331</a></td>
        <td>35010007&nbsp;0069</td>
        <td>&nbsp;</td>
        <td>101 Somerset Street West</td>
        <td>Census of Population</td>
        <td>Interviewing/enumeration</td>
        <td class="text-center">18 <i class="fa fa-thumb-tack"></i></td>
      </tr>

      <tr>
        <td><a href="cases/IE/viewCase.html">00092293</a></td>
        <td>35010007&nbsp;0084</td>
        <td>No contact</td>
        <td>85 Scott Street</td>
        <td>Census of Population</td>
        <td>Interviewing/enumeration</td>
        <td></td>
      </tr>

      <tr>
        <td><a href="cases/IE/viewCase.html">00091483</a></td>
        <td>35010007&nbsp;0085</td>
        <td>Refusual</td>
        <td>87 Scott Street</td>
        <td>Census of Population</td>
        <td>Interviewing/enumeration</td>
        <td></td>
      </tr>

    </tbody>
  </table>
</div>

@cvrebert cvrebert added the css label Oct 20, 2014

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Oct 20, 2014

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Oct 20, 2014

I'm unable to reproduce in Windows 7 IE9 on Sauce. Is your page missing the </div> perhaps?

@hnrch02

This comment has been minimized.

Copy link
Member

hnrch02 commented Oct 20, 2014

Is this what you mean?
Screencap

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Oct 20, 2014

Dafuq. That is one nasty browser bug. @hnrch02 I presume that it stops being reproducible in IE10?

@cvrebert cvrebert added the confirmed label Oct 20, 2014

@hnrch02

This comment has been minimized.

Copy link
Member

hnrch02 commented Oct 20, 2014

Yes, only IE9 is affected.

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Oct 20, 2014

Yup, known IE9 browser bug:

The suggested fix would be:

.table-responsive {
  min-height: 0%;
}

Which indeed fixes the problem for me in Sauce (and I was able repro the original).

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Oct 21, 2014

cvrebert added a commit that referenced this issue Oct 21, 2014

@cvrebert cvrebert added this to the v3.2.1 milestone Oct 21, 2014

@cvrebert cvrebert changed the title When the IE9 browser window is minimized an error occurs with responsive-table and table-hover In IE9, when table overflows, an error occurs with table-responsive and table-hover Oct 21, 2014

@TheWilks

This comment has been minimized.

Copy link
Author

TheWilks commented Oct 21, 2014

Works perfectly. Thanks everyone. I appreciate the quick responses.

cvrebert added a commit that referenced this issue Oct 22, 2014

Merge pull request #14838 from twbs/ie9-bizarre-table-hover-bug
Add min-height: 0% to .table-responsive; fixes #14837
@XhmikosR

This comment has been minimized.

Copy link
Member

XhmikosR commented Oct 22, 2014

@cvrebert: is the unit needed?

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Oct 22, 2014

I don't know.

@XhmikosR

This comment has been minimized.

Copy link
Member

XhmikosR commented Oct 22, 2014

Well, the resulting CSS won't have the unit so if it's not really needed we should remove it. Otherwise, we might have to look at clean-css's options.

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Oct 23, 2014

@XhmikosR Bad news. My testing indicates that it needs to be 0% specifically. 0 or 0px doesn't work.

@cvrebert cvrebert reopened this Oct 23, 2014

@hnrch02

This comment has been minimized.

Copy link
Member

hnrch02 commented Oct 23, 2014

@cvrebert How about we just use 1%? Still fixes it for me in IE9.

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Oct 23, 2014

Wouldn't that have an edge case where the .table-responsive would have a nonzero height if its parent is large enough even if its <table> is empty?

@hnrch02

This comment has been minimized.

Copy link
Member

hnrch02 commented Oct 23, 2014

Fine, then we got to figure out how to disable the unit removal. I was just trying to be lazy 😄

@hnrch02

This comment has been minimized.

Copy link
Member

hnrch02 commented Oct 23, 2014

.0% works. Never mind, still get's compressed to 0 in the minified file.

@XhmikosR

This comment has been minimized.

Copy link
Member

XhmikosR commented Oct 23, 2014

The thing is, there isn't any way to do that in clean-css...

/CC @jakubpawlowicz

@jakubpawlowicz

This comment has been minimized.

Copy link

jakubpawlowicz commented Oct 23, 2014

There's no way currently indeed. Does using sth like 0.01% work?

@XhmikosR

This comment has been minimized.

Copy link
Member

XhmikosR commented Oct 24, 2014

@jakubpawlowicz: unfortunately, I can't reproduce on my system so we'll need @cvrebert or @hnrch02 to confirm that :/

@hnrch02

This comment has been minimized.

Copy link
Member

hnrch02 commented Oct 24, 2014

Yes, 0.01% also fixes the issue.

@jakubpawlowicz

This comment has been minimized.

Copy link

jakubpawlowicz commented Oct 24, 2014

@hnrch02 Great, hopefully without side effects. clean-css won't strip % in this case.

@hnrch02

This comment has been minimized.

Copy link
Member

hnrch02 commented Oct 26, 2014

@mdo How should we proceed here?

mdo added a commit that referenced this issue Oct 26, 2014

@hnrch02

This comment has been minimized.

Copy link
Member

hnrch02 commented Oct 26, 2014

Addressed by 783eced.

@jakubpawlowicz

This comment has been minimized.

Copy link

jakubpawlowicz commented Mar 5, 2015

As a side note, in clean-css 3.2 you'll be able to turn off 0[unit] -> 0 minification. See jakubpawlowicz/clean-css@997d4d7.

cvrebert added a commit that referenced this issue Mar 9, 2015

@AngeIII

This comment has been minimized.

Copy link

AngeIII commented Nov 3, 2015

@cvrebert 3.5 clean-css exists yet, I think commit f41acae can be fixed?

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Nov 3, 2015

Filed #18144 for the outstanding zeroUnits TODO.

@twbs twbs locked and limited conversation to collaborators Nov 3, 2015

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.