Bootstrap: Custom file LABEL text overlapping neighbouring HTML elements on Firefox

Created on 20 Jul 2018 · 9Comments · Source: twbs/bootstrap

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>

css v4

Source

maggyero

All 9 comments

If memory serves, some browsers have a min-width or width that is difficult to override responsively. Will need to dig into it more.

mdo on 21 Jul 2018

@maggyero - does it still overlap if you remove the style="width: 400px" from the div?

Joyrex on 23 Jul 2018

@Joyrex If you choose a file with a very long name, yes. While other web browsers are fine (it is a Firefox only issue).

maggyero on 23 Jul 2018

I just encountered this problem in Firefox as well, and for me at least it's specifically when the file name is extra long as mentioned by @maggyero.

The elements in the custom file input have z-indexes and I tried unsetting these, which fixed the problem of not being able to click parts of the button to the right of my custom file input, but unfortunately broke the ability to drag and drop files onto the custom input (I'm guessing that's the reason for the z-indexes!!).

But then I figured because it only happened when the filename is long, it must be because the text of that filename is overflowing, and then "covering" part of the neighbouring element – in this case a button – and absorbing click events.

So I looked at the overflow property of the file input and voila! It was set to visible.

I've overridden the overflow property for the <input> tag in question and set it to hidden as a tentative solution. It seems to work for me, in that my neighbouring button is no longer obscured when a file with a long filename is selected in the input and normal behaviour (click to bring up file dialog, drag and drop) remains.

Maybe someone else could test this as well just to see if there's any other potential issues with hiding the overflow on the input?

smartygus on 30 Oct 2018

👍1

@smartygus On Firefox, setting overflow: hidden (instead of the default overflow: visible) on the "file" INPUT element does _not_ work. However setting overflow: hidden (instead of the default overflow: visible) on the "custom-file" DIV element does seem to solve the issue.

However the other browsers (tested on Chrome, Edge and Safari) don't need that trick to work. So the question is, is it a Firefox bug, or is it a Chrome, Edge and Safari bug? This is probably a Firefox bug.

maggyero on 31 Oct 2018

I believe this to be the best fix.

.custom-file-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

bbbenji on 8 Nov 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.

maggyero on 18 Nov 2018

👍1

This is not Firefox-only issue. I see almost the same problem in Chrome. Difference is in wrapping text. Chrome will wrap long filenames if they contain a dash (-) character. Even if not wrapped, too long text is overflowing the label.

alecpl on 2 Mar 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 ;)

alecpl on 2 Mar 2019

👍1

Was this page helpful?

0 / 5 - 0 ratings