Start Building Professional
Web Apps Today

tabbar and unwanted scroll bars

I am getting a vertical scroll bar on the content section of tabs on a tab bar when there is no need for a scroll bar. That is the contents of the tab are completely visible. This is not the scroll bar for IE but instead appears next to the frame outline.

I have a double row of tabs using a tab bar within another. The href mode is set to "iframes-on-demand". Each tab's content is an HREF to an HTML page (using setContentHref). The top level tab contents are pages that create a new tab bar (with a different name). In the second tab bars contents are some text or some text and a dhtmlxGrid control. I see the scroll bar for those tabs whose contents contain a dhtmlxGrid control. The tab bar appears on the inner frame (second level of tabs).

I have set enableAutoReSize to true for all tab bars.

I also set the overflow attribute to hidden for both the dhx_tabcontent_zone and dhx_tabcontent_sub_zone classes in the css file.

How do I stop the vertical scroll bar from appearing on the iframe?

Paul

>>enableAutoReSize
This functionality will not work for "iframe" based loading modes. 

If issue still occurs - please provide a screenshoot of problematic situation ( you can attach it to the pos or send directly to support@dhtmlx.com ) 

Technically you can remove any scrollbars by adding next style to the page
.dhx_tabcontent_sub_zone, .dhx_tabcontent_zone{
        overflow:hidden !important;
}
If you already had set such styles, then the scroll which you has is a scroll of one of iframes. Or scrolling of page, which loaded in iframe. 
You can try to locate next line in dhtmlxtabbar.js
z.innerHTML="<iframe frameborder='0' width='100%' height='100%' src='"+((this._hrfmode=="iframes")?href:(this._imgPath+"blank.html"))+"'></iframe>";
and change it as 
z.innerHTML="<iframe frameborder='0' scrolling="no" width='100%' height='100%' src='"+((this._hrfmode=="iframes")?href:(this._imgPath+"blank.html"))+"'></iframe>";

>>>>enableAutoReSize
>>This functionality will not work for "iframe" based loading modes.

It does work for me.  That is when this attribute is set to true, and I resize the IE window, the iframes change size to match the window.  This is what I want to happen when I resize the IE window.

I do have the styles set as noted. 

Adding scrolling='no'  (had to use single quotes) to the indicated line in dhtmlxtabbar.js removed the scroll bars in the content area.

Is there another solution to the problem?  I would rather not make changes to the JavaScript code if there's an alternative.

Paul

>>Is there another solution to the problem?
Technically scroll occurs because of content inside frame, so decreasing page size must help.

You can try to use next js code instead of code modification
tabbar.setOnSelectHandler(function(id){
    window.setTimeout(function(){
       var frame=tabbar._content[id].childNodes[0];
       frame.scrolling="no";
       frame.setAttribute("scrolling","no");
    },1);
});

>>You can try to use next js code instead of code modification
>>tabbar.setOnSelectHandler(function(id){
>>    window.setTimeout(function(){
>>       var frame=tabbar._content[id].childNodes[0];
>>       frame.scrolling="no";
>>       frame.setAttribute("scrolling","no");
>>    },1);
>>});

This doesn't appear to remove the scroll bars.  There is another side effect:  I can no longer select other tabs in the tab bars.  Is this the right function to be overriding?  Should I save the original onSelectHandler function and call it in the new function?

Paul

>>hould I save the original onSelectHandler function and call it in the new function?
Sorry for inconvenience, I forgot to use one small by important detail .

tabbar.setOnSelectHandler(function(id){
 window.setTimeout(function(){
 var frame=tabbar._content[id].childNodes[0];
 frame.scrolling="no";
 frame.setAttribute("scrolling","no");
 },1);
 return true; //to confirm tab selection
});

I added the return true statement and I can now switch between tabs.

However I still get the vertical scroll bar on the content part of the tab.  The content is not large enough to need a scroll bar.

Paul

I tried a few variations on your suggestion but I can't get the scroll bars to go away.  Is the code to get the frame element correct?

Paul

If issue still occurs for you - please provide any kind of sample where problem can be reconstructed or link to the demo page
( you can send such info directly to support@dhtmlx.com ) 

I sent an email with the link to a site showing the problem.

Paul

Answer sent by email