easyui tabs and HTML5

EasyUI Forum

May 02, 2024, 02:01:03 AM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > Bug Report > easyui tabs and HTML5

Pages: [1]

« previous next »

Author

Topic: easyui tabs and HTML5 (Read 35369 times)

mivilleb

Newbie

Posts: 2

easyui tabs and HTML5

« 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?


	Logged

stworthy

Administrator
Hero Member

Posts: 3581

Re: easyui tabs and HTML5

« Reply #1 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>


	Logged

mivilleb

Newbie

Posts: 2

Re: easyui tabs and HTML5

« Reply #2 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.


	Logged

stworthy

Administrator
Hero Member

Posts: 3581

Re: easyui tabs and HTML5

« Reply #3 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.


	Logged

Pages: [1]

« previous next »