JQuery Treetable Text Aligned To Icon - Span.indenter

I have a treetable which columns have an icon and text like this (this is fine)*: However, when I reduce the width of the screen, this happens: And I would like to have something

Solution 1:

In the page you have mentioned,the folder image is loading as a background image for the span. If you need a design like you have shown in the third screen shot.

Restructuring is the only one solution in your case.

Ideally you need to create 2 elements let it be 2 spans one to hold the image,another to hold the text.Align both the spans with float:left.

Please find the below code snipped,working fine as you need

As we cant display images in the code snippet,i have just colored the indenter and folder icon with red and green.

.folder{

float: left;
background: green;
width: 20px;
height: 20px;
display: inline;


}
.indenter> a{
background: red;

width: 19px;
}
.indenter{
padding-left: 30px;
float: left;
display: inline;
}
.content{
display: inline;
height: auto;
}

<table>
        <tbody><tr class="branch ui-droppable expanded selected" data-tt-id="3-1" data-tt-parent-id="3" style="display: table-row;">
            <td>
  
    <span class="indenter" ><a href="#" title="Expand">&nbsp;</a></span>
    <span class="folder" >
        <i class="fa fa-lg fa-file-text-o" style="vertical-align: middle;"></i>
    </span>
    <span class="content" ><a href="javascript:void(0)" style="cursor: pointer;">
            hgjkghjk ghjk ghjk ghjk hgjk hgjkghjkhgjkghjk ghjk ghjk ghjk hgjk hgjkghjk</a>
    </span>
  
</td>
        </tr>
    </tbody></table>