Syncfusion TreeView 컨트롤 CSS 문제

Question

Syncfusion TreeView 컨트롤을 사용하여 웹 페이지에서 폴더 브라우저를 만들 때 디자인에서 CSS 레이아웃을 사용하여 테이블 레이아웃을 제어하지만 테이블 CSS가 어떻게 영향을 미치는지 파악할 수 없습니다 TreeView의 레이아웃.

현재 내 트 리뷰는 다음과 같이보고한다 :

http://imagebin.org/63035

은 체크 박스와 텍스트 레이블 아이콘이있는 폴더와 같은 트리의 왼쪽에 정렬되지 않은 방법을 참조하십시오.

내 트 리뷰는 다음과 같이 정의된다 :

<div id="ctl00_mainPageContent_tvFileSystem_R2" class="tvItemRow" style="width:100%;"> 
<table cellspacing="0" cellpadding="0"> 
<tr> 
    <td align="right" class="tvLineImgTD"> 
     <img src="/WebResource.axd" alt="" /> 
    </td> 

    <td align="right" class="tvLineImgTD tvLineImgTD_1"> 
     <img src="/WebResource.axd" alt="" /> 
    </td> 

    <td> 
     <div id="ctl00_mainPageContent_tvFileSystem_I2" class="tvItem"> 
      <table cellspacing="0" cellpadding="0"> 
       <tr> 
        <td  id="ctl00_mainPageContent_tvFileSystem_I2_TI" class="tvImgCell"> 
         <div id="ctl00_mainPageContent_tvFileSystem_I2_CI" class="tvImgCont"><img src="/images/treeIcons/folder.gif" id="ctl00_mainPageContent_tvFileSystem_I2_I" class="tvImg" alt="" /> 
         </div> 
        </td> 

        <td id="ctl00_mainPageContent_tvFileSystem_I2_TB" class="tvCheckCell"> 
         <input name="ctl00$mainPageContent$tvFileSystem_I2_B" type="checkbox" id="ctl00_mainPageContent_tvFileSystem_I2_B" class="tvCheck" onclick="_sfctl00_mainPageContent_tvFileSystem.OnClick(this, event)" onmousedown="_sfctl00_mainPageContent_tvFileSystem.OnMouseDown(this, event)" /> 
        </td> 

        <td id="ctl00_mainPageContent_tvFileSystem_I2_TT" class="tvTextCell"> 
         <table cellspacing="0" cellpadding="0"> 
          <tr> 
           <td id="ctl00_mainPageContent_tvFileSystem_I2_CT" class="tvTextCont" style="white-space:nowrap;"> 
            1 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 
      </table> 
     </div> 
    </td> 
</tr> 
</table> 
</div> 

내 CSS 코드는 다음과 같이보고한다 :

.TreeView 
{ 
    background-color:White; 
    padding-top:4px; 
    padding-left:1px; 
    border: #7C7C94 1px solid; 
    cursor:default; 
    text-align: left; 
} 

.tvItemRow 
{ 
    font-size:9pt; 
    border: none; 
    padding:0; 
    width:auto; 
    text-align:left; 
} 

/* TreeView Table Properties */ 

div.TreeViewTable 
{ 
    border: none; 
    border-bottom: none; 
    padding:0; 
    text-align:left; 
} 

div.TreeViewTable table { 
    width:inherit; 

} 

div.TreeViewTable table tr th { 
    border: none; 
    padding: 0px; 
    letter-spacing: 1px; 
} 

div.TreeViewTable table tr td { 
    border: none; 
    padding: 0px; 
    letter-spacing: 1px; 

} 

div.TreeViewTable table tr.alt td { 
    background-color:#EFEFEF; 
} 

이

  <div class="TreeViewTable"> 
       <cc1:TreeView ID="tvFileSystem" 
        runat="server" 
        Width="100%" 
        Height="500px" 
        CssClass="TreeView" 
        ImageBaseURL="/images/treeIcons/" 
        DropChildCssClass="DropChildCss" 
        EditNode="False" 
        OnNodeExpanded="tvFileSystem_NodeExpanded" 
        OnNodeCheckChanged="tvFileSystem_NodeCheckChanged" 
        AutoPostBackOnNodeCheckChanged="true" 
        AutoCheckChildNodes="true"> 
       </cc1:TreeView> 

       <asp:ListBox ID="listFiles" runat="server" Visible="false" Height="150px"></asp:ListBox> 
      </div> 

제어에 의해 생성 된 HTML이 같이 보입니다

요소를 줄이기 위해이 페이지에 적용 할 CSS 코드에 대한 제안 사항은 다음과 같습니다. 디!

감사합니다 ...

Answer 1

게시 한 것보다 더 많은 CSS가 있어야합니다. 분명히 뭔가 다른 것이 방해하고 있습니다. Firefox에서 Firebug을 사용하여 해당 요소에 어떤 CSS가 적용되고 있는지 확인하는 것이 좋습니다. 기회는 당신이 기대하는 것보다 더 넓은 범위를 갖는 CSS 클래스를 가지고있다.