PDA

View Full Version : Disable Horizontal Scrollbar in a Tabpanel



axelaxel
12 Sep 2008, 5:15 AM
hello,
i have a tab panel, and a problem too.
i don't want in anycase that appears a horizontal scrollbar.

because when my content are more than a tab, in one of my tab of the tab panel, the vertical scrollbar appears, but the horizontal one too.

i don't want it, it's unuseful and horrible to see.

has someone any ideas?

thank you


axel

mjlecomte
12 Sep 2008, 5:17 AM
post your code.

axelaxel
12 Sep 2008, 5:43 AM
Ext.onReady(function(){
// basic tabs 1, built from existing content
var tabs = new Ext.TabPanel({
renderTo: 'tabs_anagrafica',
width:505,
height:480,
activeTab:0,
frame:true,
defaults:{autoHeight: true},
autoScroll:true,
animScroll:false,
//autoWidth:true,
items:[
{contentEl:'p_div', title: 'Profile'},
{contentEl:'c_div', title: 'Contacts'},
{contentEl:'o_div', title: 'Operators'}
]
});


function handleActivate(tab)
{
alert(tab.title + ' was activated.');
}
});

Animal
12 Sep 2008, 6:02 AM
So if the content overflows, you just want it hidden and inaccessible?

BTW, do not use autoScroll: true on a TabPanel. You don't need autoScroll, a TabPanel fits its child Panels to fix inside itself exactly with no scrolling.

axelaxel
12 Sep 2008, 6:22 AM
sorry, i had to explain something more.
i had static tables with fixed width that can appear or disappear depending on user choice.
so my only useful scrollbar is the vertical one.
the horizontal is not needed, because there is a lot of space beside.
the tables take up only vertical spaces.

so i need
autoscroll : true, because setting it to false, at my fourth table in the panel i have over content, that i cannot see without a vertical scrollbar.

but i don't want both vertical and horizontal too. the horizontal is not necessary.

i hope to have been clearer now

Animal
12 Sep 2008, 6:32 AM
I don't understand a thing.

Signing off...

axelaxel
12 Sep 2008, 7:07 AM
here there's the tabpanel, with the dynamic tables taking space on a vertical direction and at the bottom of the panel there's the horizontal scrollbar i don't want to show.

is it possible hiding the horizontal scrollbar?


http://www.morrisprofumi.it/img.jpg

HCammus
12 Sep 2008, 11:11 AM
set <div id="tabs_anagrafica" style="overflow-x:hidden;"> is possible work for u

Animal
13 Sep 2008, 12:45 AM
But your content obviously does overflow the available area, so you need the scrollbars.

If you really want the offscreen stuff to be unavailable to the user, set c_div to have overflow: hidden.

axelaxel
14 Sep 2008, 10:40 PM
But your content obviously does overflow the available area, so you need the scrollbars.

If you really want the offscreen stuff to be unavailable to the user, set c_div to have overflow: hidden.My content doesn't overflow,
you see an overflow because it uses the entire space available.
but even if i reduce the content width to 50%, horizontal scrollbar appears again.
so i deduce it's not a width problem.

it seems like horizontal scrollbar comes out because the vertical one uses some horizontal space to appear.

i checked with firebug (v 1.2.0), and inside the contacts div there are no object so large to explain the horizontal scrollbar

anyway, the hidden-overflow-solutions don't work. i have my horizontal tab always visible.

other ideas?

thank you again

axelaxel
14 Sep 2008, 11:36 PM
Solved in that way!!



Ext.onReady(function(){
// tabs per il pannello anagrafica
var tabs = new Ext.TabPanel({
id: 'tab-anag',
deferredRender: false,
autoHeight: true,
activeTab:1,
frame:true,
border: false,
defaults:{autoHeight: true},
animScroll:false,
items:[
{contentEl:'p_div', title: 'Profile'},
{contentEl:'c_div', title: 'Contacts'},
{contentEl:'o_div', title: 'Operators'}
]
});

var panel = new Ext.Panel({
id: 'tabs_anagrafica_id',
renderTo: 'tabs_anagrafica',
width:515,
height:480,
autoScroll: true,
items: tabs
});


function handleActivate(tab)
{
alert(tab.title + ' was activated.');
}
});


anyway thank you all!

Gunmen
20 Sep 2008, 9:01 AM
I have the same problem; an unnessesary horizontal scrollbar in IE7.

What is your explanaiton of your solution? Which does not work for me by the way.

I have a card panel with tbar, the tbar activates an tab panel which consists of form panels (a form for each tab). The problem: it shows a vertical scrollbar when needed, but also -the problem- an horizontal scrollbar. This does not happen in Firefox.

Edit: Solved! Inside my form I included an panel with width 100%. I have changed this to an pixel format. Now, it works.

tuzluk
1 Mar 2011, 7:01 AM
just add

autoWidth:true,

just under autoheight:true,

mmamane
23 Feb 2012, 10:51 AM
Another simple workaround is to set the child container's width to '99%'. That should account for the width of the scrollbar which is seemingly omitted by the view's layout manager.