How to get Bootstrap default datepicker look and feel using Angular UI Bootstrap
Angular UI Bootstrap calendar view :
http://plnkr.co/edit/?p=previewenter code here
What I want :
https://eonasdan.github.io/bootstrap-datetimepicker/
The Angular UI Bootstrap project has no CSS, rather we defer directly to Bootstrap's CSS. You can override Bootstrap's default themes or download one of the literally thousands of other BS themes out there.
You are trying to use the CSS of one project as a replacement for CSS in another. This usually requires quite a bit of manual work. As you can see here, the project you want to imulate uses its own CSS.
Related
I'm working on an update of an existing project, and the whole project uses Bootstrap , and the only place where I would like to replace bootstrap by semantic UI is in components where I defined list items.
Here is what i've done :
1 - I've followed the following guide : Get Started with Semantic UI to install React semantic UI
2 - And in my header tag, i've place the semantic UI cdn before bootstrap
Note : I've use the React Bootstrap for bootstrap
The semantic UI components render as expected , but the only problem is that the whole pages are now using semantic UI even my form field that i've created with bootstrap.
Where can the problem come from?
There can (will) be a lot of conflicts between SUIR and bootstrap. You probably shouldn't import the whole package. Instead install only needed modules. You can find a list of individual ones here
Certain elements in both packages share similar naming patterns, so there will be namespace conflicts. You can rename semantic element keywords in semantic.js and semantic.css.
I'm using bootstrap 1.3.2 in an angular web application. I'm using only the js library, not the css as I'm providing my own styles to the app. But in the resulting web application there are a few elements in the with css data which I did not insert.
I checked the bootstrap library and just at the end there are some lines similar to this.
angular.module('ui.bootstrap.carousel').run(function() {
!angular.$$csp().noInlineStyle && !angular.$$uibCarouselCss && angular.element(document).find('head').prepend('<style type="text/css">.ng-animate.item:not(.left):not(.right){-webkit-transition:0s ease-in-out left;transition:0s ease-in-out left}</style>');
angular.$$uibCarouselCss = true;
});
As you can see, this is inserting some css in my web page. I can just comment these lines, but I wonder, why is bootstrap doing something like this? is this some 'core' css for the component which should not be removed?
I commented those lines and everything seems to be working fine.
Thanks
Those styles are there to support certain behaviors in the directives, here is a link to the carousel css in source. You should leave those styles in your page.
I want to start using Angular, but i noticed all tutorials include bootstrap first lesson bootstrapping.. I'm not a big fan of grid systems and css frameworks so my question is can you use Angular without bootstrap or the bootstrap is required?
AngularJS has no dependencies on other libraries. It even includes a stripped-down version of jQuery, but it will use the full jQuery library if it's loaded before AngularJS.
Are there any conflicts between Angular UI-Bootstrap and Twitter Bootstrap?
I am trying to avoid using jQuery-UI with AngularJS if a more Angular-friendly UI package is available. I already started with Twitter Bootstrap, so I do not wish to unload Twitter Bootstrap.
No, there are no conflicts. Especially since ui-bootstrap is dependent on Twitter Bootstrap.
From the linked docs:
This repository contains a set of native AngularJS directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are:
AngularJS (requires AngularJS 1.3.x, tested with 1.3.13). 0.12.0 is the last version of this library that supports AngularJS 1.2.x.
Bootstrap CSS (tested with version 3.1.1). This version of the library (0.13.0) works only with Bootstrap CSS in version 3.x. 0.8.0 is the last version of this library that supports Bootstrap CSS in version 2.3.x.
If you are going all in on Angular then stick with either AngularStrap or Angular UI Bootstrap, do not mix it with Twitter Bootstrap JS library. Both of the Angular projects mentioned utilize the Bootstrap CSS, but they completely replace the Bootstrap JS library, with pretty much all functionality included.
Apart from the unnecessary bloat to load both libraries, you'll end up with issues integrating the Bootstrap JS library with Angular for stuff like model binding.
We have an Angular UI Bootstrap Collapse directive in our Angular app. When we change the contents of the collapse, we would like the div to update appropriately.
However, apparently the height is set in the style when the collapse is opened and does not update if we change the contents of the collapse element. If I change the contents while it is open, then the height does not change. This seems like it should be taken care of automatically. Is this a known issue and what is a good way to get around it?
Using Angular 1.2.2, UI 0.9.0, and Bootstrap 2.3.2
Version 0.9.0 of the angular-ui/bootstrap is not compatible with Bootstrap 2.3.2 CSS. 0.8.0 is the last version that supports Bootstrap 2.3.2 CSS. You either need to use 0.8.0 or migrate to Bootstrap 3.