How can I control the height of the tab label? I have too many tabs to fit on my page, so I have put a <br /> tag in the heading. This works, but because the tab label itself is too thin, the rest of the label is not visible.
Hi,
You can use .ajax__tab_xp .ajax__tab_tab{height: 100px} property to set the height of the tab.
Hello,
I use AJAX Tabs to display text and image content in 4 tabs (fixed height, no scrolling). I'd like to add 5th tab to display a text which is pretty long so it's supposed to be scrollable. Whatever I do, I'm not able to make scrollbars apper in the tab. The text just flows down the page with no limits. I've tried to set fixed height for both TabContainer and TabPanel together with ScrollBars attribute set to all possible values. It simply doesn't work for me. Where is the catch?
<atk:TabPanel ID="tabComments" runat="server" HeaderText="Nové komentá?e" ScrollBars="Both" Height="100px">
<ContentTemplate>
<table>
<asp:Repeater ID="rptComments" runat="server" DataSourceID="sqlDS_DefaultComments">
<ItemTemplate>
<tr>
<td><%#Eval("ItemName")%></td>
<td><%#Eval("ItemOriginalName")%></td>
<td><%#Eval("RatingInserted")%></td>
</tr>
<tr>
<td colspan="3"><%#Eval("RatingText")%></td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</ContentTemplate>
</atk:TabPanel>
Thanks for any help,
Radoslav
Add a DIV to your TabPanel and set the CSS overflow (or overflow-x and/or overflow-y) to be auto along with a fixed height.
-Damien
It works! Thanks a lot.
Radoslav
Hello everyone,
We recently started using VS2008 and the new Ajax Control Toolkit to build a prototype UI, and we have noticed that the TabPanel control flickers when there is a postback on the page. The TabPanel is within an UpdatePanel, and the flicker is occurring any time a postback occurs. Has anyone else seen or heard of this behavior? I know that this version is still in beta, and hopefully the release will resolve this. Any thoughts?
The tabs will "flicker" since they are being re-rendered after a postback, if you don't want this behavior add the UpdatePanel inside the TabPanel, then the tabs themselves won't be re-rendered, just the content.
-Damien
Hi Damien,
Thanks for the response. That's an interesting suggestion, and I will give it a try. However, the tabs did not flicker in the previous version of the toolkit, they only do it for the version released with .NET 3.5 Beta 2, so I'm wondering if this is the expected behavior...
Hello,
Putting the UpdatePanel inside each tab seems to work great, thanks!
Folks,
I am using AJAX.net TabContainer control with 5 tabpanels in it. Each tabpanel has an update panel [update mode is "conditional"] and inside the update panel, I have a gridview control [Editable]. Now, I also have a "Save" button in each of the update panels, that will save the data I enter in the "GridView". The idea is, to update only the "current tab" when I click on "Save"
The problem is that, the code runs very fast on FireFox [meaning, the update is almost instantaneous]. However, on IE7, the update takes thrice as much time as the "FireFox". I think the Javascript runs slow on IE7
Any help or thoughts?
-Thanks
Any one from the AJAX Team?ive experienced the same thing..very slow for IE rendering..3-4 second pause before the page renders to the screen versus FireFox which just pops up the content without a delay.
Hehehe... back in the bad old days before AJAX, I made tab-panels from the wizard control with some CSS work. Then when the AJAX extensions came along, I just droped the wizard into an update panel, and it worked great... 10 second job. Then I started converting these to the TabContainer / TabPanel when the AjaxControlToolkit came out. I have pretty much learned that I wasted my time because of the perfomance issues... it is "faster" on FireFox, but still has poor performance. Thank god for backups.
I have a similar sitiuation. I have 4 tabpanels, one tab has a selectable gridview and associated formview wrapped in an update panel. The other three tabs contain editable gridviews wrapped in update panels. One of three gridviews has two dropdownlists as columns with 8000+ selections. When I click on edit on a row using IE the row enters edit mode in around 4 seconds. If I then click on update or cancel it takes over 2 minutes to repaint; using Firefox it repaints in 5 seconds.
If I get rid of the update panels all is well in IE. If I leave the update panels and replace the dropdownlists with textboxes all is well in IE. Big dropdowns in updatepanel wrapped gridview columns seems to be a problem in IE. Firefox handles fine.
Any ideas??? I've Googled and tried things for two days to no avail?
I have a TabControl on my page with about 5 tabs. The context in the first two tabs are fine. But from the third the context goes out of the border of the TabPanel. Any1 knows how to make the context stay within the border of the TabPanel...
After playing aroung with it. I found a solution. In the TabContainer properties just add a width to the width you want.
IE displays it correct when no width is included but Firefox & netsape are a bit fussy. So add it for it to be displayed in the other browsers correctly.
And you can resize the tabcontainer width with some javascript funtions onactivatabchanged...
That is, if you have various width tabs inside...
Im having a few problems with using tabpanel/tabcontainer from the toolkit...
i tried to style the tabs. i editted the tab images that are given by default with the ajax toolkit, (only the color of the tabs, not the image sizes).
there appears to be a 1 pixel gap between the tab-right-image and the tab-image. i really am having trouble getting rid of it.
also, i placed a google map (using google maps api) in one of the tabs. i had it centered at some fixed coordinates. when outside the tab the map looks fine, but inside the tab the centre of the map goes to the top lefr corner of the <div> that the map is in.
I have the same problem with the coordinates in tab panel. Did you figure it out?
Thanks
You need to fix the "padding" value in your custom tabs css.
I did the exact same thing in an old project (changed the tabs from yellow to gray...),
can't remember exactly which padding I had to change, but here is the css:
/* xp theme */
.MyTabs .ajax__tab_header
{
font-family:verdana,tahoma,helvetica;
font-size:11px; color:White; font-weight:bold;
background:url(images/MyTabs2/tab-line.gif) repeat-x bottom;
}
.MyTabs .ajax__tab_outer
{
padding-right:0px;
background:url(images/MyTabs2/tab-right.gif) no-repeat right;
height:21px;
}
.MyTabs .ajax__tab_inner
{
padding-left:3px;
background:url(images/MyTabs2/tab-left.gif) no-repeat;
}
.MyTabs .ajax__tab_tab
{
height:13px;
padding:4px;
margin:0;
background:url(images/MyTabs2/tab.gif) repeat-x;
}
.MyTabs .ajax__tab_hover .ajax__tab_outer
{
background:url(images/MyTabs2/tab-hover-right.gif) no-repeat right;
}
.MyTabs .ajax__tab_hover .ajax__tab_inner
{
background:url(images/MyTabs2/tab-hover-left.gif) no-repeat;
}
.MyTabs .ajax__tab_hover .ajax__tab_tab
{
background:url(images/MyTabs2/tab-hover.gif) repeat-x;
}
.MyTabs .ajax__tab_active .ajax__tab_outer
{
background:url(images/MyTabs2/tab-active-right.gif) no-repeat right;
}
.MyTabs .ajax__tab_active .ajax__tab_inner
{
background:url(images/MyTabs2/tab-active-left.gif) no-repeat;
}
.MyTabs .ajax__tab_active .ajax__tab_tab
{
background:url(images/MyTabs2/tab-active.gif) repeat-x;
}
.MyTabs .ajax__tab_body
{
font-family:verdana,tahoma,helvetica;
font-size:10pt;
border:1px solid #000000;
border-top:0;
padding:8px;
background-color:#cccccc;
}
It's one or two of the padding values that changed from the default css.
I've tried all the padding settings that you mentioned in your message, however it hasn't fixed the problem.
It's odd because, in Firefox the google maps works fine, however in IE 7 it's truncating the side of the google map. I'll keep trying to see if I can get it working.
I was talking about the pixel gap for image right thing in the tabs in the other post...
To center the map, can you put a table with width="100%" and horizontalAlign="Center" in the tabpanel?
Hi NNM, it doesn't seem to be as simple as that. I tried centering it like this but it doesn't work. Have a look at this page to have an example of what is the problemhttp://www.twilightblue.eu/en/hotel/121975-campanile-hotel-runcorn.aspx then click on the map section and scroll down. It due to the center point not being in the middle of the div. This works fine outside of the tabpanel and in firefox. Also appartently it works if the map is in the first tab panel.
I found a few other postings on this topic, but no real solution. Seehttp://www.reimers.dk/forums/thread/1212.aspx. Any additional help would be appreciated.
I see...
Never used google maps in an app before...
But in this situation, I would "work around" the issue by placing an iframe inside your last tabpanel, where you want the map to be.
In the iframe, put nothing but the google map. That way, you can "trick" the google map into thinking it's outside of the tabpanel..! And that should avoid any conflicts..
Just an idea..
(PS: off topic, but I noticed some warnings in ie7: 4 cookies blocked: 2 from images.activehotels.com ... and 2 from google maps. Just so u know
Hi Christopher
I found a little clumsy workaround, but it works!
When I was dealing with it, I found out that when you click on a pushpin, the map get centered properly. So I called a click event programtically after the map loading and immediately closed the InfoWindow. So the map gets centered and user can not notice of it.
I called the event like that:
GEvent.trigger(gmarkers[0],"click");
gmarkers[0].closeInfoWindow()
This worked for me.
Hi Guys, for future reference I got this working I added the following line of code at the end of the script. Please note that just the cmap.checkResize() didn't work by itself.
window.onload=function(){window.onload;map.checkResize()}
Thanks for your help on this
Did you solve the problem with the gap in the tab header? I noticed the same thing when I copied the GIFs from the toolkit sample. I think I found a solution but I don't understand why the gap happens when I am using the same CSS as the sample.
I changed the following line:
.ajax__tab_tectrack.ajax__tab_outer {padding-right:4px;background:url('/Graphics/Tabs/tab-right.gif')no-repeatright;height:21px;}
to
.ajax__tab_tectrack.ajax__tab_outer {padding-right:0px;background:url('/Graphics/Tabs/tab-right.gif')no-repeatright;height:21px;}
and the gap is gone...
