samedi 25 juin 2016

Bootstrap dropdown-item are not vertically stacked in Windows 8.1 but they are in windows 7


I'm using the following example where dropdown items are vertically stacked in windows 7 but not in windows 8.1. What may be missing? Both machines are using IE 11 and latest version of Chrome. Both browsers in windows 8.1 have the same issue. Both machines are using same latest versions of Bootstrap and jquery via Visual Studio 2015 in an ASP.NET Core CR2 app.

HTML:

<div class="dropdown open">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Windows 8.1 shows following:

enter image description here

UPDATE

Both machines are using the same ASP.NET Core app project in VS2015 and both machines have the exact same bower.json file as shown below (that also shows that Bootstrap 4-alpha is loaded):

{
  "name": "asp.net",
  "private": true,
  "dependencies": {
    "jquery": "2.2.3",
    "jquery-validation": "1.15.0",
    "jquery-validation-unobtrusive": "3.2.6",
    "bootstrap": "4.0.0-alpha.2"
  },
  "resolutions": {
    "jquery": ">=1.8",
    "jquery-validation": "1.15.0"
  }
}

Moreover, the source view of the generated html file on both machines is showing the following stylesheets in <head>...</head> section and script tags at the bottom of the <body>...</body> section:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home Page - ASP.NET Core RC2 Test</title>

    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="/css/site.css" />
</haed>
<body>
....
.....
   <script src="/lib/jquery/dist/jquery.js"></script>
   <script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
   <script src="/js/site.js?v=EWaMeWsJBYWmL2g_KkgXZQ5nPe-a3Ichp0LEgzXczKo"></script>
</body>

Aucun commentaire:

Enregistrer un commentaire