CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrapangular-ui
bornytm
bornytm

Reputation: 813

What is the difference between these two plunkers? (angularjs, angular-ui)

Somewhere in my attempt to use the wonderful ui-bootstrap project in my own current project I am going terribly wrong. I've used ui-bootstrap with no issues in the past and cannot see where I am making a mistake. The following punkers illustrate my issue and what it ought to look like.

Link to functional popover directive plunker from angular ui site.

Link to non-functional replication of popover directive that I put together.

Where am I going wrong? I've tried stripping everything down to the barebones and I'm not having any luck in determining what is causing this issue.

For what it's worth this issue applies to any directive that requires a layover of other DOM elements in its functionality (datepicker, tooltip, typeahead, etc.).

It seems the issue lies in the specific files I've included, but being as the versions are the same it doesn't explain to me why including them as I have (as opposed to how they are included in the working example) should make any difference. Any help/advice in this matter would be greatly appreciated.

Upvotes: 1

Views: 343

Answers (1)

KayakDave
KayakDave

Reputation: 24676

Your bootstrap css file has a number of issues (including looking truncated and thus missing a number of key css properties you were trying to use).

Using a good version of the Bootstrap css file fixes everything. Here's a new version of your plunker that works: http://plnkr.co/edit/VTjb2S?p=preview

Note the new "new.min.css" which I added- it's just a good copy of the bootstrap minified css. The only change I made is to use that css file instead of the one originally in the plunker.

Or, alternatively, using the CDN version of the bootstrap css also fixes the issues: 

 <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">

Upvotes: 1

Related Questions