Monday, March 26, 2012

Tab Control doesnt display correctly within User Control

I've tried searching for answers to this but the search facility seems to not be working at the moment, so please forgive me if there are similar posts in here somewhere which I just can't see.

I don't know whether I'm the only person here trying to use these controlkit controls inside my own user controls, but it seems that every time I try I get mysterious problems! I'm dynamically adding Tab Panels to a Tab Container in the Container_Init function. This works beautifully in a straight aspx page, but as soon as I place the Tab Container within an ascx page, I get little white blocks appearing at runtime in front of each Tab "header" area, starting about halfway down each one and slightly offset to the left, so that only the top half of the tab header text is visible. Also there is a solid line (albeit with a tiny gap at the right-hand end) between the active tab header and the corresponding panel, so there is no sense of the header belonging to the active tab.

Any hints anyone?

_Ade.

Well I won't say I've "solved" this problem, but I have come up with a totally bizarre workaround.

By dint of tediously commenting out each element of the supplied css class line by line and rebuilding, I finally realised that the defaultajax__tab_tabclass has a hard-coded height of 13px, and in the specific case where the tab container is contained within a user control, increasing this height to 21px fixes the problem!

Does anyone know what this is all about? Will it come back and bite me again when it wakes up?

_Ade.


Try add the following to your user control:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Good luck.


I added the line and it makes no difference. Unless I change the ajax__tab_tab class Height from 13px to 21px it doesn't display correctly.

_Ade.


Where did you add it to? Try to add it to the page consuming the user control to see if works.


Yep, it worked!

10xvljw8202.


Well actually, it did fix the tab display, but it screwed up the formatting of the rest of the page and every other page in my application!

I'm sticking with resetting the css file to 21px height.

_Ade.


Please help !

I have set the height as 21 px as mentioned, but the tags are still broken.

Is there anybody experience the same problem?

Thanks


Found out the solution finally.

I put the code "<script language='Javascript'>window.resizeTo(screen.width,screen.height); self.moveTo(0,0);</script>" on aspx.vb file.

In order to solve the broken tags problem. remove the code from .aspx.vb file, and put them into .aspx file.

I hope it helps.

No comments:

Post a Comment