Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Custom file LABEL text overlapping neighbouring HTML elements on Firefox

See original GitHub issue

On Firefox 63 (but not on Chrome 70, Edge 44 nor Safari 12), the text in the “custom-file-label” LABEL element seems to invisibly overlap the neighbouring button INPUT element and prevents from clicking on it:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
  </head>
  <body>
    <div class="form-row" style="width: 400px">
      <div class="form-group col">
        <div class="custom-file">
          <input type="file" class="custom-file-input" id="browser">
          <label class="custom-file-label" for="browser">long_filename.txt</label>
        </div>
      </div>
      <div class="form-group col">
        <input type="button" value="Load" class="btn btn-primary">
      </div>
    </div>
  </body>
</html>

Issue Analytics

State:
Created 5 years ago
Comments:9 (3 by maintainers)

Top GitHub Comments

1reaction

alecplcommented, Mar 2, 2019

Using .text-truncate on the label would be a workaround, but not a real fix and is not perfect. All we need is:

.custom-file-label {
    overflow: hidden;
    white-space: nowrap;
    // For nice text overflow we need also padding-right, problem is
    // the button width is not constant, but 8em should work for most cases
    padding-right: 8em;
    text-overflow: ellipsis;
}

@mdo, Add https://github.com/twbs/bootstrap/pull/28388#issuecomment-468898020 to this and you have nice custom input fixes for v4 😉

1reaction

maggyerocommented, Nov 28, 2018

@bbbenji Thank you for the fix. However it does not seem to work.

The only fix that works for me:

.custom-file {
  overflow: hidden;
}

And to display an ellipsis (‘…’, U+2026 HORIZONTAL ELLIPSIS) to represent clipped text—instead of truncating it—, this works for me:

.custom-file-label {
  padding-right: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}

However displaying an ellipsis has a drawback: you now have to know the padding-right CSS property (here I measured 90 px for the “Browse” text of the custom file INPUT, but for other languages the padding would be different).

So the fixed example is this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
    <style>
      .custom-file {
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="form-row" style="width: 400px">
      <div class="form-group col">
        <div class="custom-file">
          <input type="file" class="custom-file-input" id="browser">
          <label class="custom-file-label" for="browser">long_filename.txt</label>
        </div>
      </div>
      <div class="form-group col">
        <input type="button" value="Load" class="btn btn-primary">
      </div>
    </div>
  </body>
</html>

So, if the fact that we didn’t get the expected behaviour in Firefox

is a bug, we should open an issue in Firefox and do nothing in Bootstrap;
is normal, the fact that Chrome, Edge and Safari behave as expected is a bug, therefore we should open issues in Chrome, Edge and Safari, and open a pull request in Bootstrap that adds the overflow: hidden; CSS property to the .custom-file CSS class.