Forums

Hi I'm using the side menu which is great.

However I have an indentation issue when I use "Show current sub-tree only"

If it's switched off I get :

Top Ancestor

    product 1

        sub product 1

    product 2

        sub product 2

    product 3

which is all good. If it's switched on It get

Top Ancestor

    product 1

product 2

    sub product 2

    product 3

as you can see, only product 2 is expanded which is great, however both product 2 and sub product 2 are offset to the left from where they should be. So 2's sub-products are at the same level as product 3 which is confusing! 

can anyone suggest a workaround or is this a known bug? My CSS is as below if that helps?

Many thanks, Rob

/* Inventura side menu CSS*/
/* SideMenu  */
 
.inventua_sidemenu{background-color: #4f4f4f;margin-left:-8px; margin-right:-6px;padding-bottom:10px;padding-top:5px;}/*sidebar background colour*/
 
/* SideMenu  */
.MenuHdr
{
  font-size: 8pt; padding-left: 10px;  padding-bottom: 2px;
   padding-top: 2px; cursor: default; /*text-transform:uppercase;font-weight: bold;*/
}
 
.MenuItem, .MenuItemMouseOver
{
  font-size: 8pt; font-weight: normal; padding-bottom: 1px;
  padding-top: 1px;
 }
.MenuHdr A, .MenuHdr A:Active, .MenuHdr A:Hover, .MenuHdr A:Visited, .MenuHdr A:Link
{
  text-decoration: none;  color: #D4D4D4; padding-top: 1px;
  padding-bottom: 1px; cursor: pointer; display: block; padding-left:10px;
}
.MenuHdr A:Hover {color:#F1F3F3;}/*v.light grey for hover*/
 
.MenuItem A, .MenuItem A:Active, .MenuItem A:Hover, .MenuItem A:Visited, .MenuItem A:Link,
.MenuItemMouseOver A, .MenuItemMouseOver A:Active, .MenuItemMouseOver A:Hover,
.MenuItemMouseOver A:Visited, .MenuItemMouseOver A:Link
{
  display: block;
  padding-left: 20px;
  padding-bottom: 1px;
  cursor: pointer;
  color: #D4D4D4;/* light grey for normal text*/
  padding-top: 1px;
  text-decoration: none; 
  width: 100%
}
 
.MenuItemMouseOver A, .MenuItemMouseOver A:Active, .MenuItemMouseOver A:Hover,.MenuItemMouseOver A:Visited, .MenuItemMouseOver A:Link
{color:#F1F3F3;}/*v.light grey for hover*/
 
.currentHeaderHighlight A, .currentHeaderHighlight A:Active, .currentHeaderHighlight A:Hover, .currentHeaderHighlight A:Visited, .currentHeaderHighlight A:Link {font-weight:bold;}
.currentItemHighlight A, .currentItemHighlight A:Ative, .currentItemHighlight A:Hover, .currentItemHighlight A:Visited, .currentItemHighlight A:Link {font-weight:bold;}

Hi Anthony, thanks for your reply ..

I'm struggling to understand what you suggest. Looking at the generated HTML the TD's are not nested (the table is just TR,TD for each row, no matter what level the menu row is at) so I can't see how what you suggest will work (and having tried it,I didnt see any effect but maybe I misunderstood).

Can you please elaborate on what you are suggesting. Your side menu on this site seems to indent as expected, can you perhaps show how you did that ? 

Many thanks

Rob

....and just to elaborate ... the below is the HTML I get. 1,2,3,4,5 all have Products as their parent, but for some reason 2,3,4 are drawn at the same level as 1child1 and 1child2. Then for no apparent reason 5 is drawn at the correct level. So this makes 2,3,4 look they are children of 1. Surely this is a bug, when there are multiple levels ? 

Many thanks

Rob

<tr>
<td onmouseover="selectmenuitem(this, true, 'Products', 'MenuHdr currentHeaderHighlight', 'MenuHdr currentHeaderHighlight'); return 0;" onmouseout="selectmenuitem(this, false, '', '', '');" id="invsidemenu-Products" class="MenuHdr currentHeaderHighlight"><a href="http://localhost/Products.aspx">Productsa>td>
tr><tr>
<td onmouseover="selectmenuitem(this, true, 'One', 'MenuHdr', 'MenuHdr'); return 0;" onmouseout="selectmenuitem(this, false, '', '', '');" id="invsidemenu-One" class="MenuHdr"><a href="http://localhost/Products/One.aspx">Onea>td>
tr><tr>
<td onmouseover="selectmenuitem(this, true, 'One Child 1', 'MenuItem', 'MenuItemMouseOver'); return 0;" onmouseout="selectmenuitem(this, false, '', '', '');" id="invsidemenu-OneChild1" class="MenuItem"><a href="http://localhost/Products/One/OneChild1.aspx">One Child 1a>td>
tr><tr>

<td onmouseover="selectmenuitem(this, true, 'One Child 2', 'MenuItem', 'MenuItemMouseOver'); return 0;" onmouseout="selectmenuitem(this, false, '', '', '');" id="invsidemenu-OneChild2" class="MenuItem"><a href="http://localhost/Products/One/OneChild2.aspx">One Child 2a>td> tr><tr> <td onmouseover="selectmenuitem(this, true, 'Two', 'MenuItem', 'MenuItemMouseOver'); return 0;" onmouseout="selectmenuitem(this, false, '', '', '');" id="invsidemenu-Two" class="MenuItem"><a href="http://localhost/Products/Two.aspx">Twoa>td> tr><tr> <td onmouseover="selectmenuitem(this, true, 'Three', 'MenuItem', 'MenuItemMouseOver'); return 0;" onmouseout="selectmenuitem(this, false, '', '', '');" id="invsidemenu-Three" class="MenuItem"><a href="http://localhost/Products/Three.aspx">Threea>td> tr><tr> <td onmouseover="selectmenuitem(this, true, 'Four', 'MenuItem', 'MenuItemMouseOver'); return 0;" onmouseout="selectmenuitem(this, false, '', '', '');" id="invsidemenu-Four" class="MenuItem"><a href="http://localhost/Products/Four.aspx">Foura>td>

tr><tr> <td onmouseover="selectmenuitem(this, true, 'Five', 'MenuHdr', 'MenuHdr'); return 0;" onmouseout="selectmenuitem(this, false, '', '', '');" id="invsidemenu-Five" class="MenuHdr"><a href="http://localhost/Products/Five.aspx">Fivea>td>

Hi Anthony, thanks for your reply - yes Products One is a child of Products. here is the Tabs table :

TabID TabName     ParentId    Level    TabPath
387      Products      NULL        0        //Products
642      One               387           1        //Products//One
580      One Child 1 642           2        //Products//One//OneChild1
694      One Child 2 642           2        //Products//One//OneChild2
718      Two               387           1        //Products//Two
717      Three            387           1        //Products//Three
634      Four              387           1        //Products//Four
529      Five               387           1        //Products//Five

So when the menu renders, One renders parallel to Products, even though it is a child. One's two children are indented from One OK, but then Two, Three, Four are all indented the same as One's children which is very confusing. Five is not indented, althoguh there is no reason that 2,3,4 should be any different from 5, they are all children of Products.

If I tick 'Show current sub-tree only' then Five gets indented the same (wrongly) as 2,3,4. That's why this makes no sense that 2,3,4 are treated differently to 5, and I suspect a code bug.

I've even tried this using different skins and example css from your site, but this always reproduces.

I've only recently downloaded v.5.0.2.

Many thanks for looking at this,  Rob