Add Close (X) button on Tab

Feb 24, 2009 at 9:56 PM
Edited Feb 27, 2009 at 7:45 PM
i've got this working somewhat....see below

i've been playing around with "themes\StyleSheet.css" and i have been unable to move the widget containers "close" button to the Tabs.  we would like to click a "close" button right on the tab.

this would be similar to the tabs with IE browser or firefox browser that allow you to close the tabs.

this is what i have so far:
tabpage.ascx.cs page:

//add new link button for the close (X) taken from widgetcontainer.ascx
var closeTabLinkButton = new LinkButton();
closeTabLinkButton.ID = "CloseTab" + page.ID.ToString();
closeTabLinkButton.CssClass = "closetab tab_box";
closeTabLinkButton.ToolTip = "Close Tab";
//closeTabLinkButton.Text = "test";
closeTabLinkButton.Click += new EventHandler(closeTabLinkButton_Click);

//then within the if stmt on the same page, i add the link button above to the liwrapper.
if (page.ID == CurrentPage.ID)
               ** //ADDED THE FOLLOWING CODE - to get X next to tab title
                var tabTableDiv = new HtmlTable();
                var tabTRDiv = new HtmlTableRow();
                var tabTDDiv = new HtmlTableCell();
                var tabTDDiv2 = new HtmlTableCell();
                var tabTDDiv3 = new HtmlTableCell();
                tabTDDiv.InnerText = page.Title;
                tabTDDiv.Attributes["class"] = "tddata";
                //tabTDDiv2.InnerText = "";
                tabTDDiv2.Attributes["class"] = "td2data";
                //tabTableDiv.Border = 1;
                //tabTableDiv.Width = "100%";

// comment out existing code
//               tabTableDiv.Controls.Add(tabTRDiv);
//               var tabTextDiv = new HtmlGenericControl("span");
//               tabTextDiv.InnerText = page.Title;
//               liWrapper.Controls.Add(tabTextDiv);
//                liWrapper.Controls.Add(closeTabLinkButton);

then on the app_themes\stylesheet.css:
i've added below li.activetab the following

 .closetab {background-image:url('Images/Widget/os_close.gif');}
 a.closetab:hover {background-image:url('Images/Widget/os_close_over.gif'); }
 .tab_box {display:block;overflow:hidden;width:13px;height:13px;cursor:hand;cursor:pointer;}

               ** //ADDED THE FOLLOWING CODE - to get X next to tab title
               .tddata { font-size: 10pt; margin: 5px 5px 0px 50x; font-weight: bold; color: dimgray}
               .td2data { width:20px; }

the X block is displaying underneath of my tab title.
 - example        TEST

i have not been able to get it to appear next to the tab title.
  - example       TEST  X  --see **

any help would be appreciated.