CODEWITHSUNDEEP
twitter-bootstrap-3xpages
Gunnar Almas
Gunnar Almas

Reputation: 217

Pages does not render properly in IE 11 when using the bootsrapv3.0.0 theme

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

Upvotes: 12

Views: 30757

Answers (4)

Talha
Talha

Reputation: 1636

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">

Upvotes: 3

Jim
Jim

Reputation: 648

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?

Upvotes: 23

Patrick Sawyer
Patrick Sawyer

Reputation: 1382

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

Upvotes: 32

Yogendra Rawal
Yogendra Rawal

Reputation: 211

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

Upvotes: 2

Related Questions