Elipsis dots are not showing with 3 Elements

0

Issue

I have 3 elements
1: Text
2: download button
3: upload button

The text should truncate with elipsis once it reaches the container of the download button.
However, it is truncating but I can’t get to show the 3 dots of the elipsis.

-Expected result: before the download button, the text stops and three dots are shown
-Actual result: text stops right after the download button.

I made a fiddle to show the live code where the problem occurs https://jsfiddle.net/ndyaw8tc/

<div class="uploader-container">
  <div class="file-name-preview">
      <p class="file-placeholder">really really long textreally really long textreally really long textreally really long textreally really long textreally really long textreally really ng textreally really longng textreally really longng textreally really longlong text</p>
  </div>
  <div class="download-container">
    <i class="material-icons" >
      file_download
    </i>
  </div>
  <div class="upload-button-container">
    <button mat-raised-button type="button" class="btn-upload" mat-button>
      UPLOAD
    </button>
  </div>
  <input type=file id="file-uploader" (change)="onFileSelected($event)" #fileInput>
</div>

css

#file-uploader {
  display: none;
}

.uploader-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.file-name-preview {
  flex: 1;
  overflow: hidden;
  padding: 5px;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-button-container {
  width: 26%;
}

.download-container {
  width: 9%;
  margin-top: 2%;
  cursor: pointer;
}

.file-placeholder {
  color: gray !important;
}

Solution

You have it on the wrong class. Try…

.file-placeholder {
  color: gray !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

https://jsfiddle.net/f9pg2w4m/

#file-uploader {
  display: none;
}

.uploader-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.file-name-preview {
  flex: 1;
  padding: 5px;
  min-width: 0;
}

.upload-button-container {
  width: 26%;
}

.download-container {
  width: 9%;
  margin-top: 2%;
  cursor: pointer;
}

.file-placeholder {
  color: gray !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
<div class="uploader-container">
  <div class="file-name-preview">
    <p class="file-placeholder">really really long textreally really long textreally really long textreally really long textreally really long textreally really long textreally really ng textreally really longng textreally really longng textreally really longlong text</p>
  </div>
  <div class="download-container">
    <i class="material-icons">
      file_download
    </i>
  </div>
  <div class="upload-button-container">
    <button mat-raised-button type="button" class="btn-upload" mat-button>
      UPLOAD
    </button>
  </div>
  <input type=file id="file-uploader" (change)="onFileSelected($event)" #fileInput>
</div>

Answered By – Keith

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More