jQuery treetable文本对齐到图标 - span.indenter [英] jQuery treetable text aligned to icon - span.indenter

问题描述

我有一个treetable哪些列有一个图标和文本像这样（这是罚款）*：

但是，当我缩小屏幕宽度时，会发生这种情况：

我想有这样的东西：
< img src =https://i.stack.imgur.com/uWU3I.pngalt =enter image description here>

我的html是这样的：

 < tr data-tt-id =2data-tt-parent-id =1> 
< td> 
< i class =fa fa-lg fa-file-text-o>< / i> 
< a href =javascript：void（0）> Title< / a> 
< / td> 
< / tr> 
  

我的js是：

  $（＃requestForQuotationTable）。treetable（{
 expanding：true，
 indent：15 
}）; 
  

由treetable生成的代码是：

 < tr data-tt-id =2data-tt-parent-id =1> 
< td> 
< span class =indenterstyle =padding-left：15px;>< / span> 
< i class =fa fa-lg fa-file-text-o>< / i> 
< a href =javascript：void（0）> Title< / a> 
< / td> 
< / tr> 
 

我已经尝试设置pull-left在

解决方案

在您提及的网页中，文件夹映像将作为背景图像
加载为 span 。
如果需要

重构是您的唯一解决方案。

理想情况下，你需要创建2个元素，让它保持图像2 span 保持文本。将 float：left 与两个跨度对齐。

由于我们无法在代码片段中显示图像，我刚刚对压头进行了彩色化包含红色和绿色的文件夹图标。

  .folder {float：left; background：green; width：20px; height：20px; display：inline ;}。一个{background：red; width：19px;}。indenter {padding-left：30px; float：left; display：inline;} content {display：inline; height：auto;}  pre> 
 < table> < tbody>< tr class =branch ui-droppable expanded selecteddata-tt-id =3-1data-tt-parent-id =3style =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-ostyle =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>  
 

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 like this:

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 =():

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

解决方案

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>

这篇关于jQuery treetable文本对齐到图标 - span.indenter的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！