float right property wrong display when overflow in previous container - php

Question

I am displaying a list of files in a container.
This list is generated by a php script.
For each file I associate a trash button in order to delete the file if user needs to. To do so I set float to right on the trash button.
But in some cases where the file name is too long, because of the overflow, the button is not displayed on the same line.... any idea how to fix that ?
Here is the generation script :
$list_docs = '<ul class="listDocs">';
foreach ($iterator as $file) {
// ignore filenames starting with . dot.
if (substr($file->getBasename(), 0, 1) === '.') {
continue;
}
$entryId++; // unique list entry id...
// use this and $prevDepth to check for nesting into and out of directories...
$curDepth = $iterator->getDepth();
$dirStart = $curDepth > $prevDepth; // nest down a directory?
$dirEnd = $curDepth < $prevDepth; // end of the directory
if ($dirEnd) { // UL end...
$list_docs .= '<!-- dir-end --></ul>';
}
if ($file->isDir()) { // display path details...
if ($dirStart) { // UL start... with Directory so will nest...
$list_docs .= '<ul class="listDocs indent">';
}
// display directory details
$list_docs .= '<li class="docResult"><i class="fa fa-folder"></i> <span id="file_'. $entryId. ' data-folder="'.$file->getPathname().'" class="folderClic">'.$file->getFilename().'</span><span class="file-remove fa fa-trash-o"></span></li>';
} else {
if ($dirStart) { // UL start... first time for this directory...
$list_docs .= '<ul class="listDocs indent">';
}
// display file details
$list_docs .= '<li class="docResult"><i class="fa fa-file-o"></i> <span id="file_'. $entryId .'" data-file="'.$file->getPathname().'" class="fileClic">'.$file->getFilename().'</span><span class="file-remove fa fa-trash-o"></span></li>';
}
$prevDepth = $curDepth; // record depth so we can check next time...
}
$list_docs .= '</ul>';
This code is pasted into a div :
<div class="documentList" id="documentList">Explorer</div>
And here is css :
.file-remove {
float: right;
color: #700;
cursor: pointer;
}
.documentList{
display: inline-block;
background-color: rgba(255,255,255,1);
border-style: solid;
border-width: 2px;
border-color: rgba(0,0,0,0.3);
color: rgba(116,119,123,1);
padding: 0.5em 0.5em;
width: 20%;
min-height: 500px;
vertical-align: top;
}
.listDocs{
list-style: none;
text-align: left;
padding: 0em 0em;
margin: 0em 0em;
overflow: auto;
}
I have also tried to display it as a table, but I don't manage to get the proper width for the filename column.
EDIT: here is a picture of the issue :
I also tried with word-wrap: break-word; on the docResult class, then I got the following :

Answer 1

I would probably change the inline elements:
<li class="docResult">
<i class="fa fa-file-o"></i>
<span id="file_'. $entryId .'" data-file="'.$file->getPathname().'" class="fileClic">'.$file->getFilename().'</span>
<span class="file-remove fa fa-trash-o"></span>
</li>
Into:
<li class="docResult">
<div class="file"><i class="fa fa-file-o"></i></div>
<div class="title" id="file_'. $entryId .'" data-file="'.$file->getPathname().'" class="fileClic">'.$file->getFilename().'</div>
<div class="file-remove"><i class="fa fa-trash-o"></i></div>
</li>
This way we can display them as "inline-block", and have long file titles grow vertically without interrupting either side icons.
Then, we can:
.docResult{
font-size: 0; /* Remove children spacing */
}
.docResult div{
display: inline-block; /* Allows for horizontal positioning of siblings */
vertical-align: top; /* They will stick to the top, even if a long title expands the row */
font-size: inital; /* Resets font-size from parent's 0px */
}
.docResult .file{
width: 50px; /* Example icon width */
}
.docResult .file-removed{
width: 50px;
}
.docResult .title{
width: calc(100% - 50px - 50px); /* We want the title to be as long as it can be without overlapping icons */
}
So, basically we're using block elements instead of inline elements, this way elements don't wrap around each other like text. Afterwards, we're defining we want each element to position horizontally, keeping both icons aligned with the first line of the title, and giving the title's element the maximum possible without getting in the way of either icon.