Hudhaifa Yoosuf Hudhaifa Yoosuf - 3 months ago 13
CSS Question

How to create folder style in CSS

I have a list of documents and i need to represent those documents in a graphical way, so i want to create something like the windows folder style. But i am poor with css. Some help would be apprecited



.thread-reply-file {
width: 100%;
padding: 10px 0px 0px 12px;
cursor: pointer;
}
.thread-reply-file {
width: 80px;
padding: 10px 8px 8px;
margin-top: 10px;
font-weight: bold;
font-size: 14px;
color: blue;
float: left
}
.thread-reply-file span {
margin-left: 10px;
}
.thread-reply-file img {}

<div title="Comments">
<div class='thread-reply-file'>
<img width='50' src='https://cdn4.iconfinder.com/data/icons/CS5/128/ACP_PDF%202_file_document.png'>
<span>Haneeq Mohamed</span>
</div>
<div class='thread-reply-file'>
<img width='50' src='https://cdn4.iconfinder.com/data/icons/CS5/128/ACP_PDF%202_file_document.png'>
<span>Haneeq Mohamed</span>
</div>
</div>





Existing output
Existing

The way i want.
The way i want.

Answer

How does this look? Good luck!

Let me know if you have any clarifications on the code below:

.thread-reply-file {
  font-weight: bold;
  font-size: 14px;
  color: blue;
  float: left;
  cursor: pointer;
  border: 2px solid black;
  margin: 5px;
  padding: 5px;
  text-align: center;
  width: 80px;
}
.thread-reply-file span {
  display: block;
}
.thread-reply-file img {
  width: 50px;
}
div[title=Comments]:after {
  content: '';
  display: block;
  clear: both;
}
<div title="Comments">
  <div class='thread-reply-file'>
    <img src='https://cdn4.iconfinder.com/data/icons/CS5/128/ACP_PDF%202_file_document.png'>
    <span>Haneeq Mohamed</span>
  </div>
  <div class='thread-reply-file'>
    <img src='https://cdn4.iconfinder.com/data/icons/CS5/128/ACP_PDF%202_file_document.png'>
    <span>Haneeq Mohamed</span>
  </div>
</div>

EDIT:

Have kept a fixed height for each of the boxes and implemented multi-line ellipsis for the text. Adjust this height to suit your design:

function ellipsizeTextBox(el) {
  var wordArray = el.innerHTML.split(' ');
  while (el.scrollHeight > el.offsetHeight) {
    wordArray.pop();
    el.innerHTML = wordArray.join(' ') + '...';
  }
}
var $this = document.getElementsByClassName('thread-reply-file');
for (var i = 0; i < $this.length; i++) {
  ellipsizeTextBox($this[i]);
}
.thread-reply-file {
  font-weight: bold;
  font-size: 14px;
  color: blue;
  float: left;
  cursor: pointer;
  border: 2px solid black;
  margin: 5px;
  padding: 5px;
  text-align: center;
  width: 80px;
  height: 85px;
  overflow: hidden;
}
.thread-reply-file span {
  display: block;
}
.thread-reply-file img {
  width: 50px;
}
div[title=Comments]:after {
  content: '';
  display: block;
  clear: both;
}
<div title="Comments">
  <div class='thread-reply-file'>
    <img src='https://cdn4.iconfinder.com/data/icons/CS5/128/ACP_PDF%202_file_document.png'>
    <span>Haneeq Mohamed</span>
  </div>
  <div class='thread-reply-file'>
    <img src='https://cdn4.iconfinder.com/data/icons/CS5/128/ACP_PDF%202_file_document.png'>
    <span>Haneeq Mohamed</span>
  </div>
  <div class='thread-reply-file'>
    <img src='https://cdn4.iconfinder.com/data/icons/CS5/128/ACP_PDF%202_file_document.png'>
    <span>This is a very long text and much longer than this</span>
  </div>
</div>