Question

The Ajax control toolkit tab panel automatically inserts a space by all four corners of the body. For example, go to http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/Tabs/Tabs.aspx and look at the TabPanel on the page. The is a space before “Signature:” and “Bio:” labels. How can I set the space-width to 0px; in the tabPanel body?

Answer 1

I was having a very similar problem with the whitespace between the tab headers. The tab headers are <span> tags, so most browsers render the whitespace as a text node in the DOM. To remove the ignorable whitespace nodes, call a JavaScript function when the page loads, like this:

function fixTabContainer() {
    var tabContainerHeader = $get('<%#TabContainer1.ClientID%>' + '_header');
    var children = tabContainerHeader.childNodes;
    for (var i = 0; i < children.length; i++) {
        if (is_all_ws(children[i])) {
            tabContainerHeader.removeChild(children[i]);
            i--;
        }
    }
}

/**
 * Determine whether a node's text content is entirely whitespace.
 * (From https://developer.mozilla.org/en/whitespace_in_the_dom)
 * @param nod  A node implementing the |CharacterData| interface (i.e.,
 *             a |Text|, |Comment|, or |CDATASection| node
 * @return     True if all of the text content of |nod| is whitespace,
 *             otherwise false.
 */
 function is_all_ws(nod) {
     // Use ECMA-262 Edition 3 String and RegExp features
     return !(/[^\t\n\r ]/.test(nod.data));
 }

The script finds the <div> that holds the tab headers and loops through those header <span> elements. It removes all nodes that contain only ignorable whitespace (which it determines with the second function).

Note: The IE8 DOM unfortunately doesn’t include text nodes (it’s a known bug).