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.
Related
I am new in ReactJs and I've created a front end website using html template. Now I want to merge it with admin panel, I've downloaded html template and tried to combine with Front end website. But Admin's CSS are clashing with front end's CSS files
One solution is to implement CSS Modules, with the help of Webpack or Browserify.
CSS Modules allows the scoping of CSS by automatically creating a unique classname of the format [filename]_[classname]__[hash].
Implementing CSS Modules either in the admin panel or the front would remove the CSS style conflicts.
I'm working on a project that's using the Carousel from react-bootstrap. This only works if I import "bootstrap/dist/css/bootstrap.min.css"; in the app. The issue is that doing so changes the CSS for the entire app, which has lots of existing UI that I would then need to rework. Is there a way to use the bootstrap CSS for the carousel component only, leaving the rest of my React app alone?
I've tried importing bootstrap.min.css in the file where the carousel component is used rather than in App.js. This doesn't seem to make a difference though.
Solution 1:
Bootstrap provides the option to include components selectively with scss. This requires you to have a build setup that handles scss for you, e.g. webpack, rollup or node-sass itself.
Edit: added minimal set of required scss classes. bootstrap 4.5
#import "../node_modules/bootstrap/scss/functions";
#import "../node_modules/bootstrap/scss/_variables";
#import "../node_modules/bootstrap/scss/_mixins";
#import "~bootstrap/scss/_carousel.scss";
The code snippet shows the main part which is required for styling the carousel. But if you have a look at the carousel.scss there are various dependencies to bootstrap functions you would have to import as well. With that it is possible to have a minimal bootstrap configuration with your required styles.
Solution 2: You might scope the component and its styles within a web component. That way the bootstrap.min.css is not leaking styles out of the carousel web component. This approach goes beyond the question and does not consider how the carousel works together with the rest of your application, as also events and JS interactions would be scoped.
TL;DR
View is fading in at the beginning when using ES5 (ES5 Example)
View does NOT fade in when using Typescript import (Typescript and ES6 Import Example)
I am currently experimenting with Typescript, ES6 modules and how to integrate all those technologies. In most cases everything works finde. However, I'd like to animate the ui-view with ngAnimate and here comes the problem. Somehow, if I am using ES6 modules and its import statement, it seems that my dependencies are lazy loaded, so that ngAnimate will not work during the initial page load. Once the page has been loaded, the animation works just fine, e.g. animating the view in and out if the user clicks on a link. What I'd like to see is that the ui-view fades in at the beginning.
I have set up two Plunker to demonstrate both the behaviour with an app in plain old ES5 and a Typescript one, that uses SystemJS and the import statement to load its dependencies.
Here is the ES5 example. If you run this Plunker you will notice how the view fades in at the beginning. All I did was including the files via script tag in the index.html. The animation is done via plain CSS:
ui-view.ng-enter {
animation: fadeIn .5s ease both;
animation-delay: .3s;
}
ui-view.ng-leave {
animation: fadeOut .5s ease both;
}
Here is the Typescript example. You will hopefully see the difference, that the view will not fade in even though it uses the same animation mechanism. The only difference here is that I am using Typescript (shouldn't be the problem) and ES6 modules which get imported via import. It somehow seems that if I am using import ngAnimate is not fully loaded or maybe not even loaded at all at the time the page loads up. Maybe it's lazy loaded?
I'd really like to get this stack working, because it is so much more fun and modern. Any ideas?
After some investigation and the help of one of the Angular team members I found out that ngAnimate disables all animations on load for the first two digest by default. This means if it detects any remote assets being downloaded then it keeps waiting until they are ready. This is somehow the case when you are using Typescript / ES6 modules. You can work around this situation and guarantee that all animations run on bootstrap even though remote assets are being downloaded by creating a directive to enable animations with $animate.enabled(true);. You can either place the directive on the body or html tag. In the Plunker above I have added the directive to the body tag. This is what you need:
<body allow-animations-on-load>
<ui-view></ui-view>
</body>
app.directive('allowAnimationsOnLoad', ['$animate', function($animate) {
$animate.enabled(true);
}]);
I have also updated the corresponding Plunker. As you can see the animation is now fading in on bootstrap.
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.
I am trying an Angular app project with the Google Angular Material library.
Added #master branch via Bower as directed. Linked the CSS and JS fils from Bower Components to my index page as directed.
Works as expected, except things like dialogs have SVG icons, which are defined in the html an pathed as so:
<md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
Which is not in my project nor the Bower Components folder...
And therefore gives me a 404:
How should i configure the project to get all the images as expected? I'd create that img/icons path if I knew where to get all possible icons...
OK, I have added this to my app.js:
angular.module('app').config(function($mdIconProvider) {
// Configure URLs for icons specified by [set:]id.
$mdIconProvider
.defaultIconSet('bower_components/material-design-icons');
});
But still a 404... the bower download is like 200 mb of icons... do I need ot list each icon I want to link? As in .icon("menu", "./assets/svg/menu.svg", 24)
I did have the same problem and I was not able to find a proper answer.
After some research, I've finally found something !
https://github.com/angular/material/issues/1668#issuecomment-156368247
As "ranbuch" said, once you've loaded the font Material Icons (either from a CDN or locally), you can just use this directive :
<md-icon aria-label="Menu" class="material-icons">menu</md-icon> and replace menu by the name of the icon you're looking for.
This way, it allows you to skip the long listing of every svg.
PS : There's also a good stackoverflow answer here.
Copy all the selected svg icons you need to images/icons folder inside your application and then use them as below :
<md-icon md-svg-src="images/icons/leftArrow.svg"
ng-click="previous()" class="icon-color">
</md-icon>
If you are planning to use lots of icons, use css font icons. One css file will load all your icons, instead of multiple svg links.
Check section 1 here of material icons guide