I'm using also jquery tabs with webgrid.
My problem is when there is two webgrids in diffent pages, second webgrid's footer is shown at the below of tabpage. But it fixes itself, if you hit refresh button of webgrid.

Well, thanks atleast am not the one using jquery tabs and found the error. Hope webgrid team would fix this soon.

Xedem, I don't think the Grid has anything to do with jQuery controls. If you changed the doctype from XHTML to HTML, it could be the cause. Otherwise, please post a simple sample that reproduce the issue.

Hi James,

Its not. As i said, just by changing dll and javascript to old ones, the jquery tabs started working straight away. During this change i didnt change the doctype at all. So forget about doctype. It has surely something do with the update, possibly some javscript may be conflicting the working.

Hi Xedem, do you mind to post a simple sample along with jQuery required dependencies? Thanks!

Sure...The sample is attached along with the screenshot. See if the run matches my screenshot. See the outgrowths as i marked in the jquery tab. All necessary documents are included except stylesheet..but that wont be a problem. Please run the sample with both Webgrid 7 and Webgrid 6

hi Xedem,

It seems you missed to include the styles.css. Although without the styles, I still can see the alignment issue. However, the alignment issue doesn't seem to be caused by the Grid.

I tried to remove the Grid completely from the page, and the alignment issue is still there. Am I missing something?

No its not like that...put the jquery along with old dll of webgrid 6.0. And jquery doesnt depend on the existence of webgrid in the page. In fact the test sample was the one used by me for WebGrid testing , and for easiness i just put jquery tabs in that solution and send to you. For jquery tab to not work, it dont need WebGrid to reside in the same page . The only requirement is the existence of dll(new) along with scripts as far as i know. Do one thing, just change the dll you have used to the old ones and u can see the difference. Trust me. No need of webgrid to be in the same page. Just the dll along with the script is causing the damage. I dont know why. And why the Live chat is not working for me. I am trying it for past 5 days.

Ah I see, ok. It seems your jQuery tab is styled according to the 'border box' model which is also used in non XHTML doctype mode.

When pre 2009 Intersoft controls (including WebGrid 6) is added to the page, the control appears to insert the css style which automatically re-style all elements' boxing to use 'border box'. This is why your jQuery tab looks good in such case.

The 2009 controls seems to be enhanced so that it won't affect other page elements other than Intersoft controls itself. I personally think that this new implementation is much better since the border box model will be applied only on WebGrid's elements without affecting the other UI elements in the page (such as AJAX extender controls, jQuery controls, etc). 

For your case, an easy solution is by simply removing the xhtml doctype definition from your page, and your jQuery tab should render properly since it was styled based on HTML style model. For a more solid solution, re-style your jQuery tabs to use XHTML box model. Alternatively, you can also add your own style to force the entire page to render HTML style model (this would be similar to the approach used in pre 2009 Intersoft controls).

Hope this helps,
James.

I dont think i understood your post clearly. Are you trying to say that old files were helping jquery to look that way. Strange! Coz before applying jquery to my project i did all testing in a sample project where it looked fine(no dll from webui). And moreover changing XHTML to HTML is not at all an option for me as all my pages derive from a container page, which when doctype changed, wont work at all and affect all pages. In short the poject completely depend on xhtml. Could you please clarify your post? And any other suggestion?

No. Its not working. Still jquery tab is bulged outside the region. I put the style inside the sample i sent. Any solution?

Thanks for the solution. In fact i was testing in mozilla and i didnt no that there was alternative for mozilla. Now the solution that worked for me is as follows.

<style type="text/css">
    html * { box-sizing: border-box;-moz-box-sizing:border-box; }
</style>

Again thanks.