It is known that the display type table-cell does not work with text-overflow ellipsis. However, this is where my issue lies.
I am dealing with a file input control that appears like this:
<div class="ui-select form-input" style="display:inline-block; margin-right:5px; margin-bottom:-8px;width:400px;">
<span class="input-group-btn">
<label class="btn btn-info btn-file" for="multiple_input_group">
<div class="input required">
<input id="multiple_input_group" type="file" multiple name="files" ng-files="getTheFiles($files)">
</div> Browse
</label>
</span>
<span class="file-input-label" ng-model="fileName"></span>
</div>
When you select a file, the file name should be displayed on the span element.
The CSS code for this looks like :
.file-input-label {
padding: 0px 10px;
display: table-cell;
white-space: nowrap;
vertical-align: middle;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
text-overflow: ellipsis;
}
Problem arises when a long file name is selected, causing the span element to expand without showing ellipsis...
I have attempted changing the display to block but it negatively affects the UI:
.file-input-label {
padding: 0px 10px;
display: block;
width: 400px;
height: 20px;
white-space: nowrap;
vertical-align: middle;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
text-overflow: ellipsis;
}
This made the elements no longer inline...the browse button and the span are now misaligned.
Even using display: inline-block did not provide a satisfactory solution:
.file-input-label {
padding: 0px 10px;
display: inline-block;
white-space: nowrap;
width: 400px;
height: 30px;
vertical-align: middle;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
text-overflow: ellipsis;
}
I even tried setting the display property of the span element:
<span class="input-group-btn" style="display: inline-block;">
Unfortunately, this approach resulted in the following outcome:
https://i.sstatic.net/cBoKH.png
What corrections need to be made here?