12

I have a very simple XPage with a table and some input fields. The application uses the bootstrapv3.0.0 theme and the OpenNtf bootstrap4Xpages plugin released on 2014-01-28. I think I'm using correct markup according to bootstrap-3 documentation. The page renders just fine in Chrome, but it's a mess in IE 11. In IE the table seems to get cut at a fixed width of approx. 100px and the characteristic blue border on selected “bootstrapped” input fields does not show up as it should Buttons styled with btn-warning display as expected, also in IE. This tells me that at least some of the styles is applied correctly in IE as well Anyone else who have run into this problem? Any tips on a possible solution (dropping support for IE is not an option)?

Gunnar Almas
  • 217
  • 1
  • 2
  • 11

4 Answers4

32

Are you running IE11 in compatibility mode? Try turning off compatibility mode and see if the site loads.

By default intranet sites load in compatibility mode, which I think really means your web site is going to look awful if it was made in the last 15 years mode.

Per Henrik Lausten has an xSnippet that can display a warning to your users if they are running like so. http://openntf.org/XSnippets.nsf/snippet.xsp?id=display-warning-message-if-internet-explorer-uses-compatibility-view-mode

Patrick Sawyer
  • 1,357
  • 7
  • 21
  • 2
    That must be it: I see the exact same behaviour on a test page if I enable compatibility mode in IE11. Brilliant idea of the MS team to enable it by default for intranet sites... – Mark Leusink Mar 11 '14 at 08:23
  • And with no way to shut it off by a website you either need to disable it by group policy or present a notice to the users. I guess M$ thinks that most intranet sites were built in 1995 and need a vintage browser to really take it all in. – Patrick Sawyer Mar 11 '14 at 15:34
  • 1
    This actually solved my little problem. Big thanks to both of you I did have my server in the “local intranet” site list. This is actually very convenient when testing REST services from Domino (not related to this issue) . Anyway, as Mark says, intranet sites are by default put into compatability mode, when I turned this off it all works as it should. – Gunnar Almas Mar 11 '14 at 21:18
  • I really hate this option. I am looking at managing this by GPO in my org. – Patrick Sawyer Oct 22 '14 at 17:43
  • Great hint! From a moment all intranet pages seems so professional :D – Reddy SK Oct 04 '16 at 07:54
23

Add x-ua-compatible header in your html header to disable IE so-called compatibility mode:

<!DOCTYPE html> 
<html> 
  <head> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

More info in this question: What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?

Community
  • 1
  • 1
Jim
  • 599
  • 3
  • 6
3

I was having formatting issues and got fixed by adding

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
Talha
  • 1,210
  • 13
  • 15
2

I recommed you use these lines before </head> 

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

I know they are only for IE 8 IE 9 but still :)

I never encounter any problem with IE 11 can you provide any link if possible

Yogendra Rawal
  • 191
  • 11
  • Thanks, but I think this is more of an XPages issue. I have no problems rendering Bootstrap-3 in IE with plain static HTML – Gunnar Almas Mar 10 '14 at 17:44
  • I have same issue with IE11 here is the link http://www.igoogleportal.com/ I have created issue here https://github.com/twbs/bootstrap/issues/25917 – SmartDev Mar 22 '18 at 12:53