Search code examples
htmlcsstreetable

jQuery treetable text aligned to icon - span.indenter

I have a treetable which columns have an icon and text like this (this is fine)*: enter image description here

However, when I reduce the width of the screen, this happens: enter image description here

And I would like to have something like this: enter image description here

My html is like this:

<tr data-tt-id="2" data-tt-parent-id="1">
    <td>
        <i class="fa fa-lg fa-file-text-o"></i>
        <a href="javascript:void(0)">Title</a>
    </td>
</tr>

And my js is:

$("#requestForQuotationTable").treetable({
    expandable: true,
    indent: 15
});

And the code generated by treetable is this:

<tr data-tt-id="2" data-tt-parent-id="1">
    <td>
        <span class="indenter" style="padding-left: 15px;"></span>
        <i class="fa fa-lg fa-file-text-o"></i>
        <a href="javascript:void(0)">Title</a>
    </td>
</tr>

I have tried setting pull-left in the icon as suggested in here, but then it ignores the span.indenter element, getting the icon to the left.

I have also tried this, with no good results either because of the span.indenter.

All what I have tried leads me to think that my problem is with the span.indenter, but I can't figure out a way to solve this.

Edit after Jayababu's response:

<td>
    <span class="indenter" style="padding-left: 30px;float: left;"></span>
    <span style="float:left">
        <i class="fa fa-lg fa-file-text-o" style="vertical-align: middle;"></i>
    </span>
    <span style="float:left"><a href="javascript:void(0)" style="cursor: pointer;">
            hgjkghjk ghjk ghjk ghjk hgjk hgjkghjk</a>
    </span>
</td>

looks like this (it's still ignoring the indenter and the text is not looking good =():

enter image description here

*I have created these images from the example in http://ludo.cubicphuse.nl/jquery-treetable/#usage

Solution

  • 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>