2

Closed

TabContainer forces inline style 'height=100%'

description

Hi,

Apologies if this is a duplicate post; I did search...

My company has upgraded to the June 2012 version of AjaxControlToolkit (we were previously on an ancient version). We are now having styling issues with the Tab.

The culprit seems to be the RenderContents() method of TabContainer.cs, adding an inline style of "height: 100%" to the ajax__tab_body in the new version, where previously it did not.

First off, this is the snippet of ASPX code that we are using. Note the complete lack of "Height=" attribute (on purpose - all styling is done in CSS).

[code]
<act:TabContainer ID="tabContainer" CssClass="mainTab" runat="server" ActiveTabIndex="0">
<act:TabPanel ID="tabAction" runat="server">
    <ContentTemplate>
        -snip-
    </ContentTemplate>
</act:TabPanel>
</act:TabContainer>
[/code]

TabContainer.cs from changeset a864b0ed5a96 dated 11/15/2011 11:52 AM has the following code, where it will only output an inline "height: " style, if the programmer specified one:

[code]
if (_tabStripPlacement == TabStripPlacement.Top) {
RenderHeader(writer);
}

if (!Height.IsEmpty)
writer.AddStyleAttribute(HtmlTextWriterStyle.Height, Height.ToString());
writer.AddAttribute(HtmlTextWriterAttribute.Id, ClientID + "_body");
[/code]

TabContainer.cs from changeset 9ffbcddf17ff dated 11/15/2011 12:21 PM has the following code, where it will ALWAYS output an inline "height: " style: either the programmer's , or a hard-coded "100%":

[code]
if (_tabStripPlacement == TabStripPlacement.Top
|| _tabStripPlacement == TabStripPlacement.TopRight
|| (_tabStripPlacement == TabStripPlacement.Bottom && _useVerticalStripPlacement)
|| (_tabStripPlacement == TabStripPlacement.BottomRight && _useVerticalStripPlacement)
)
RenderHeader(writer);
if (!Height.IsEmpty)
writer.AddStyleAttribute(HtmlTextWriterStyle.Height, Height.ToString());
else
writer.AddStyleAttribute(HtmlTextWriterStyle.Height, "100%");
writer.AddAttribute(HtmlTextWriterAttribute.Id, ClientID + "_body");
[/code]

The default of "100%" FAILS TO TAKE INTO ACCOUNT THE HEIGHT OF ajax__tab_header , set in CSS to 21px.

The fix (to me) is obvious ... if a programmer actually wants a height of 100%, they can code it, and the "if not empty" will output it. In our case, we left it empty on purpose, and it used to work ... but no longer.

Perhaps the default of 100% is desirable for the new TabStripPlacement's that were added.

Could you please review and advise?

Thanks,
Ted Taylor
Closed Mar 10, 2016 at 4:07 PM by MikhailTymchukDX
AJAX Control Toolkit was moved to GitHub: https://github.com/DevExpress/AjaxControlToolkit
The fix for this issue is available with the v16.1 release: https://github.com/DevExpress/AjaxControlToolkit/releases/tag/16.1.0

comments

MikhailTymchukDX wrote Nov 12, 2015 at 11:51 AM

We agree that forcibly setting the 100% height is a bad practice and should be optional.
We reverted to the previous behavior. It will be available in the next release.

MikhailTymchukDX wrote Feb 2, 2016 at 11:18 AM

The title was edited as this issue is included in What's new list for the v16.1 release.