Has anyone seen an issue like the one below where the AJAX Tab Control's tabs have a white space when used as part of a web part in SharePoint?
Notice the white space slightly overlapping the text on each tab. Also notice that the white space begins at the tabs left most point, but ends before the right most point. Has anyone else seen this issue and resolved it?
If anybody has an advice, I am interested
Thank you
The solution we have arrived with is as follows...but you will need to get the Ajax Toolkit with Source Code. (This is not tested in Firefox as we are only supporting IE at the current time!!!!! If you try this with Firefox please post the results back!)
Open the Tabs folder of the Ajax Toolkit and change the tabs.css to be:
/* default layout */
/* .ajax__tab_default .ajax__tab_header {white-space:nowrap;} */ <!-- Remove only if you want to allow the tabs to wrap across multiple lines as well. It actually doesn't look bad. -->
.ajax__tab_default .ajax__tab_outer {display:-moz-inline-box;display:inline-block}
.ajax__tab_default .ajax__tab_inner {display:-moz-inline-box;display:inline-block}
.ajax__tab_default .ajax__tab_tab {margin-right:4px;overflow:hidden;text-align:center;cursor:pointer;display:-moz-inline-box;display:inline-block}
/* xp theme */
.ajax__tab_xp .ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:10px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-line.gif")%>) repeat-x bottom;}
.ajax__tab_xp .ajax__tab_outer {padding-right:4px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-right.gif")%>) no-repeat right;}
.ajax__tab_xp .ajax__tab_inner {padding-left:3px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-left.gif")%>) no-repeat;}
.ajax__tab_xp .ajax__tab_tab {height:21px;padding:4px;margin:0;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab.gif")%>) repeat-x;}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_outer {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-right.gif")%>) no-repeat right;}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_inner {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-left.gif")%>) no-repeat;}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_tab {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover.gif")%>) repeat-x;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_outer {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active-right.gif")%>) no-repeat right;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_inner {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active-left.gif")%>) no-repeat;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_tab {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active.gif")%>) repeat-x;}
.ajax__tab_xp .ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;padding:8px;background-color:#ffffff;}
/* scrolling */
.ajax__scroll_horiz {overflow-x:scroll;}
.ajax__scroll_vert {overflow-y:scroll;}
.ajax__scroll_both {overflow:scroll}
.ajax__scroll_auto {overflow:auto}
Once you have done this recompile the DLL, link it in and deploy your solution. Also...you may find that if you deploy the Ajax Toolkit as part of a solution into the standard "BIN" directory you may get a 403 Forbidden error until an Administrator logs into the system. If you experience this then deploy the Ajax Toolkit to the GAC, this will resolve the issue.
Thank you for your answer. I will test this monday morning at work !
I had a similar problem. It's not really an issue. It was caused by your stylesheet referencing:
You probably have this:
<%@. Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<link href="http://links.10026.com/?link=StyleSheet.css" rel="stylesheet" type="text/css" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Do this instead:
<%@. Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<link href="http://links.10026.com/?link=StyleSheet.css" rel="stylesheet" type="text/css" />
You will be fine.
Notice we are using this as part of a SharePoint (actually MOSS 2007) AJAX enabled Web Part. Since we have no idea where the web part will be deployed (what page) modifying the code on the page is not what we want to do. Instead the modifications within the CSS have allowed us to deploy our web part with the tab control within it and not have to worry about where the CSS refernece appears on the page.
Make sure the doctype is XHTML. That used to occur before I upgraded our app from HTML 4. The toolkit is not 100% compatible with HTML 4. I'm not using SharePoint, but it shouldn't make a difference.
I am having the same problem, and i have compiled your suggestion. It now works in IE, but now the right side of each tab is jacked up in Firefox.
It seems to look just fine on our site.
Our site is a MOSS 2007 site, we have not used this on any other older technologies.
I have not tried any other methods 1) because we needed the issue solved quickly and 2) because we wanted to modify some of the other behaviors like allowing the tabs to wrap. I don't think you will be able to because you cannot get access to the Tab objects to modify their CSS class setting.
On the other hand we believe that we have found the culpret to this issue. Its appears if you ever to a response.write during a page load and have malformed HTML then the issue of the white space occurs, even on ASP.NET sites. We have not dug into the MOSS 2007 page to see where this could be occuring or how to fix it, but it is the most likely source of the issue.
No comments:
Post a Comment