Start Building Professional
Web Apps Today

scroll bar not appearing

Hi,
I am dhtmlxlayout 2U which has a tabbar in cell b

By default there should appear a horizontal scroll bar for the tabbar menu as there are many tabs in my application.

Problem 1)
But,I am not able to get any horizontal scroll bar when I resize my cell width.The tabbar gets disaapeared which looks bad.

Problem 2)
There appears a scroll bar when I resize my window at the middle of page.Instead it should come at the end of last tab.

Here is my source code.

tabbar = new dhtmlXTabBar("a_tabbar","top");
    tabbar.setImagePath("<%=request.getContextPath()%>/common/dhtmlx/dhtmlxAll/imgs/");
    tabbar.preventIECashing(true);
    tabbar.enableAutoSize(true,true);
    tabbar.enableAutoReSize(true);    
    tabbar.enableScroll(true);
    tabbar.setOnSelectHandler(doOnTabSelection)

tabbar.loadXML("<%=request.getContextPath()%>" + urlString);
        window.setTimeout( "setTabFocusDefault()" , 500);
        
        tabbar.clearAll();
        tabbar.enableAutoSize(true,true);
    tabbar.enableAutoReSize(true);    
        
             tabbar.setOnTabContentLoaded(function(){
tabbar.adjustSize(); });



Where am I wrong ? Can you point ?

Thanks in advance,
Lalit.

>>Where am I wrong ? Can you point ?
The way how tabbar created. To be linked to layout it must be created as layout.attachTabbar, in other case it will not react on layout resize automatically. 
http://dhtmlx.com/docs/products/dhtmlxLayout/samples/components/tabbar.html?un=1235475842000

Hi ,
My cell b contains div id =tabbarview which has two divs- div id =links and div id = a_tabbar
There is some content (div id = links ) which contains login name and other details at the top of my page.
below it there is actual tabbar i.e div id =a_tabbar

As per your recommendation I have tried var tabbar = dhxLayout.cells("b").attachTabbar();

The problem here is there are two div ids.So it is not loading anything then.
Please have a look.

--------------------------------------------------------------------------------------------------------------------------------------------
<div id="tabbarView" style="height:100%;width:100%;overflow:auto !important;">
                <table border="0"  cellpadding="0" cellspacing="0" width="100%" height="100%" style="table-layout:automatic;overflow:auto;">
            <tr>
           
       
        <td valign="top"  class="bgcol" style="width:100%;padding:2px 0px 0px 0px;">
            <div id="links" class="bgcol" style="width:100%; height:30px; overflow:hidden;">
            <table width="100%" height="100%">
            <tr>
            <td colspan="4" height="5px"></td>
            </tr>       
            <tr>           
                <td valign="top"  width="180" class="usertext" height="25px">Logged in as: <bean:write name="UserContextKey" property="userName"/></a></td>
                <td valign="top" class="usertext"><a href="javascript: logoutAction('<%=request.getContextPath()%>/loginAction.do?action=logout&timedout=true')">Logout</a></td>
                <td valign="top" class="usertext" align="right"><a title="Release <bean:message bundle="version" key="em.marketingMajorVersion"/>.<bean:message bundle="version" key="em.marketingMinorVersion"/>-<bean:message bundle="version" key="em.buildNumber"/>">Release <bean:message bundle="version" key="em.marketingMajorVersion"/>.<bean:message bundle="version" key="em.marketingMinorVersion"/>-<bean:message bundle="version" key="em.buildNumber"/></a></td>
                <td valign="top" align="right" width="24px"> <a href="javascript: doHelp()"><img src="/imgs/help_icon.gif" style="cursor:pointer; border-width:0px;width:24px;align:right;"></a></td>
                <td valign="top" align="right" width="24px"> <a href="javascript: popup('/aboutBox/about.jsp' , '')"><img src="/imgs/vfc/about.gif" style="cursor:pointer; border-width:0px;width:24px;align:right;"></a></td>
            </tr>
            </table>
           
            </div>
            <div id="a_tabbar" style="position:relative;width:100%;height:100%; overflow:auto !important"/>
        </td>
        <td class="" style="background-color:##;" width="6">
            <img src="<%=request.getContextPath()%>/nav_images/spacer.gif" width="6" alt="" />
        </td>
    </tr>
</table>
</div>

var dhxLayout = new dhtmlXLayoutObject(document.body, "2U");
    var treeView = document.getElementById("treeView");
    dhxLayout.cells("a").attachObject(treeView);
   
    var tabView = document.getElementById("tabbarView");
    dhxLayout.cells("b").attachObject(tabView);
   
    var item = dhxLayout.cells("a");
    item.setWidth(370);
    dhxLayout.setEffect("resize", true);
    dhxLayout.cells("a").expand();
    dhxLayout.cells("b").expand();
    dhxLayout.cells("a").hideHeader();
    dhxLayout.cells("b").hideHeader();

var tabbar = dhxLayout.cells("b").attachTabbar();  //I tried this as per your recomendation with even giving a_tabbar as argument to it

    // tabbar = new dhtmlXTabBar("a_tabbar","top");  // original commented
    tabbar.setImagePath("<%=request.getContextPath()%>/common/dhtmlx/dhtmlxAll/imgs/");
    tabbar.preventIECashing(true);
    tabbar.enableAutoSize(true,true);
    tabbar.enableAutoReSize(true);   
    tabbar.enableScroll(true);
    tabbar.setOnSelectHandler(doOnTabSelection)

tabbar.loadXML("<%=request.getContextPath()%>" + urlString);
        window.setTimeout( "setTabFocusDefault()" , 500);
       
        tabbar.clearAll();
        tabbar.enableAutoSize(true,true);
        tabbar.enableAutoReSize(true);   
       
        tabbar.setOnTabContentLoaded(function(){
    tabbar.adjustSize(); });

-------------------------------------------------------------------------------------------------------------------------------------------------
What can be done ?

Please comment.

Thanks,
Lalit.

Hi
I am waiting for your reply.
Here is the sreenshot attached.
I am not getting any scroll bar for tab bar at the end.

Thanks,
Lalit

Hello,

This is because tabbar attached into cell not through dhxLayout.cells("a").attachTabbar()
Possible solutions:
1. Use toolbar/tabbar for cell (toolbar for logged info; help, about buttons)
2. Use different layout pattern.

Scrolls: by the default scroll are off in the cells. Any scroll appeared is from attached content.
But for this content should have value for width/height and overflow set to auto/scroll.

Here is a demo.