Print Page - easyui tabs and HTML5

Title: easyui tabs and HTML5
Post by: mivilleb on July 24, 2011, 09:47:59 PM

The example located here with iframe:
http://www.jeasyui.com/easyui/demo/tabs.html

It does not quite fully works if the page is declared as HTML5. For the iframe (with url to Google) it shows double scrollbar (see attached image).

This occurs if this is added at the top of the example page:

Code:

<!DOCTYPE html>

However it works with other DOCTYPE or no DOCTYPE at all as in the example:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Any trick to fix this?

Title: Re: easyui tabs and HTML5
Post by: stworthy on July 26, 2011, 02:10:14 AM

To hide the tab panel scrollbar, use the CSS overflow property with a value of hidden.

Code:

<div id="tt" style="width:700px;height:250px;">
  <div title="Tab4 with iframe" closable="true" style="overflow:hidden">
    <iframe scrolling="yes" frameborder="0"  src="http://www.google.com" style="width:100%;height:100%;"></iframe>
  </div>
</div>

Title: Re: easyui tabs and HTML5
Post by: mivilleb on July 26, 2011, 03:32:16 AM

I already use overflow: hidden style to hide the scrollbar for the tabs that I add manually, but when I am using the addTab function as per your example:

Code:

		function addTab(){
			index++;
			$('#tt').tabs('add',{
				title:'New Tab ' + index,
				content:'Tab Body ' + index,
				iconCls:'icon-save',
				closable:true
			});
		}

The div that is added by your Javascript does not have the overflow: hidden style, so I would need to modify your Javascript that writes the div to add it (or the css that is uses, but tried that already and that does not do it).

Since it only does this with HTML5, there must be something minor that needs to be adjusted in your code to make it work.

Title: Re: easyui tabs and HTML5
Post by: stworthy on July 26, 2011, 11:52:12 PM

Define a no scrollbar CSS class first.
   <style type="text/css">
      .noscroll{
         overflow:hidden;
      }
   </style>

Then call 'add' method and pass a 'bodyCls' property.

   $('#tt').tabs('add',{
      title:'New Tab ' + index,
      content:'Tab Body ' + index,
      iconCls:'icon-save',
      closable:true,
      bodyCls:'noscroll'
   });

Now you add a new tab panel with no scrollbar.

EasyUI Forum

General Category => Bug Report => Topic started by: mivilleb on July 24, 2011, 09:47:59 PM