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
Closed

Comments

@TheWilks
Copy link

@TheWilks 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
Copy link
Collaborator

@cvrebert cvrebert commented Oct 20, 2014

@cvrebert
Copy link
Collaborator

@cvrebert cvrebert commented Oct 20, 2014

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

@hnrch02
Copy link
Collaborator

@hnrch02 hnrch02 commented Oct 20, 2014

Is this what you mean?
Screencap

@cvrebert
Copy link
Collaborator

@cvrebert cvrebert commented Oct 20, 2014

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

@hnrch02
Copy link
Collaborator

@hnrch02 hnrch02 commented Oct 20, 2014

Yes, only IE9 is affected.

@cvrebert
Copy link
Collaborator

@cvrebert 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 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
Copy link
Author

@TheWilks 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
Add min-height: 0% to .table-responsive; fixes #14837
@XhmikosR
Copy link
Member

@XhmikosR XhmikosR commented Oct 22, 2014

@cvrebert: is the unit needed?

@cvrebert
Copy link
Collaborator

@cvrebert cvrebert commented Oct 22, 2014

I don't know.

@XhmikosR
Copy link
Member

@XhmikosR 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
Copy link
Collaborator

@cvrebert 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
Copy link
Collaborator

@hnrch02 hnrch02 commented Oct 23, 2014

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

@cvrebert
Copy link
Collaborator

@cvrebert 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
Copy link
Collaborator

@hnrch02 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
Copy link
Collaborator

@hnrch02 hnrch02 commented Oct 23, 2014

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

@XhmikosR
Copy link
Member

@XhmikosR XhmikosR commented Oct 23, 2014

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

/CC @jakubpawlowicz

@jakubpawlowicz
Copy link

@jakubpawlowicz jakubpawlowicz commented Oct 23, 2014

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

@XhmikosR
Copy link
Member

@XhmikosR 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
Copy link
Collaborator

@hnrch02 hnrch02 commented Oct 24, 2014

Yes, 0.01% also fixes the issue.

@jakubpawlowicz
Copy link

@jakubpawlowicz jakubpawlowicz commented Oct 24, 2014

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

@hnrch02
Copy link
Collaborator

@hnrch02 hnrch02 commented Oct 26, 2014

@mdo How should we proceed here?

mdo added a commit that referenced this issue Oct 26, 2014
@hnrch02
Copy link
Collaborator

@hnrch02 hnrch02 commented Oct 26, 2014

Addressed by 783eced.

@jakubpawlowicz
Copy link

@jakubpawlowicz 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
@pavelthq
Copy link

@pavelthq pavelthq commented Nov 3, 2015

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

@cvrebert
Copy link
Collaborator

@cvrebert 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.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

6 participants