Syncfusion TreeView Control CSS Problem

Question

I am working with the Syncfusion TreeView control to create a folder browser on a web page, our design uses CSS to control the layout of tables, but I cannot figure out how I can stop the table CSS affecting the layout of the TreeView.

Currently my Treeview is looking like this:

http://imagebin.org/63035

See how the checkboxes and the text labels are not aligned to the left hand side of the tree like the folder icons are.

My TreeView is defined like this:

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

The HTML generated by the control looks something like this:

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

My CSS code is looking like this:

.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;
}

Any suggestions as to what CSS code to apply to this page to get the elements lined up would be good!

Thanks...

Answer 1

There has to be more CSS than what you've posted. Clearly something else is interfering. I recommend using Firebug on Firefox to check what CSS is being applied to those elements. Chances are you have a css class which has broader scope than you expect.