Problem with Tabs and IE - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: IE9, Tabs

This topic contains 3 replies, has 3 voices, and was last updated by BenR 10 years, 2 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Problem with Tabs and IE Posts
March 7, 2014 at 10:36 am Problem with Tabs and IE #50663
Klaus H
Participant
Hi,

a customer uses IE8 (I know …) and has a problem with a tab I have implemented, it is not displayed as tab at all. You can see the div with the border in the correct size, in the top there is maybe a gray area with 2 or 3 pixel height and on the left there is also a gray area at about 25 pixel. No Javascript error, no indicator something may be wrong with the code. In IE9 it also does not seem to work. In Firefox and Opera it works 100% perfect.

I have stripped down the code to only the necessary structure to avoid any other sources for the error:
```
<DIV ID="jqxtab">
<UL>
<LI>Text1</LI>
<LI>Text2</LI>
<LI>Text3</LI>
<LI>Text4</LI>
<LI>Text5</LI>
<LI>Text6</LI>
<LI>Text7</LI>
<LI>Text8</LI>
<LI>Text9</LI>
</UL>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
</DIV>
```
The code for creating the grid is very basic:
$('#jqxtab').jqxTabs({ width: '90%', height: 350, position: 'top'});

The examples on the jqwidgets page work with the browsers. I use jqwidgets 3.2.1 and jquery 1.9.1

Only weird thing I find is the difference in the generated source code
Firefox:
<div id="jqxtab" aria-disabled="false" class="jqx-tabs jqx-widget jqx-widget-content jqx-rc-all" role="tablist" style="width: 90%; height: 350px;" hidefocus="true" aria-activedescendant="" tabindex="0">

vs IE:
<div tabIndex="0" class="jqx-tabs jqx-widget jqx-widget-content jqx-rc-all" id="jqxtab" role="tablist" aria-disabled="false" aria-activedescendant="" style="width: 90%; height: 350px;" hidefocus="true" sizzle-1394187750485="[object Object]" jQuery19107462514088955205="1">

The sizzle thing seems strange, but I don’t know if that’s a IE or a IE + jqwidgets thing.

Any idea what might cause a problem like that?
March 7, 2014 at 12:20 pm Problem with Tabs and IE #50669

Peter Stoev
Keymaster

Hi Klaus,

I suggest you to Check your page’s DOCTYPEand look for CSS conflicts.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 7, 2014 at 12:57 pm Problem with Tabs and IE #50676

Klaus H
Participant

Hello Peter,

thank you for the answer, changing the DOCTYPE solved the problem. 🙂

Best Regards
Klaus

February 20, 2015 at 8:23 pm Problem with Tabs and IE #67430

BenR
Participant

Hello all,

I had a tab close button this thread helped to resolve. I was seeing duplicate close buttons stacked on one another when dynamically adding tabs using both ‘addlast’ and ‘addfirst’ methods. I added the DOCTYPE reference in my page (in this case my ASP.Net MVC view) at the very top before any razor syntax.

Here is what I added: <!DOCTYPE html>

I only had the issue in IE9 ( did not test any other versions of IE)
Tested in Chrome ver 40.0.xxxxx
FireFox ver:34.0.5

Testing jQWidgets v3.5.0

I hope this help someone else.
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.