1

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

Community
  • 1
  • 1
Guito
  • 1,181
  • 1
  • 9
  • 19

1 Answers1

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>
Jayababu
  • 1,641
  • 1
  • 14
  • 30
  • I have just tried using float:left and then it ignores the indenter span... how could I make it so it takes it into account? – Guito Jun 16 '15 at 07:25
  • give float:left to the indenter span also.that will be fine. – Jayababu Jun 16 '15 at 07:29
  • Have edited my answer.I have tested in my system with chrome.working fine with no issues.Let me know if any issues. – Jayababu Jun 16 '15 at 08:06
  • It works like a charm, however I have had to change .indenter> a{ to .indenter>span because this was a leaf and leaves cannot be expanded. Thank you so much! – Guito Jun 16 '15 at 08:18
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/80641/discussion-between-guito-and-jayababu). – Guito Jun 16 '15 at 08:46
  • anything else you need..Sorry chat is disable in my system by admin. – Jayababu Jun 16 '15 at 08:49
  • I have been checking more and when the text is so long that it takes 3 lines, the third line gets in the wrong place. I have seen that this is working because the height is set to 20px... is it possible to make it have 100% height? – Guito Jun 16 '15 at 08:49
  • One thing you can do is,with script take the content height and assign the same height to the folder image span with no-repeat property.This will work fine.Will let you know if something can be done with css itself – Jayababu Jun 16 '15 at 08:54