My problem is that I have a code that works fine in angular 1.1.5 but in the newer version(1.4.3) it does not. It simply doesn't put the css classes xx-leave, xx-enter on the desired elements.
Example code in the comments(couldn't put it here)
It works jus fine in the older version but not with the new.
My question is what is that how could I make this work in the newer version of angular js?
Animations are not part of the core anymore. This means that you have to download and include the ngAnimate module into your app. (just like you do with ngResource for example).
The 'ng-animate' directive is now deprecated:
Instead, all animations are resolved from the CSS class(es) present on the element when an animation event is triggered and additional CSS classes are applied to the element to specify which animation is occurring. In other words, when a directive such as ngRepeat inserts an element into the DOM, it triggers an animation (the enter animation) and the $animate service appends the ng-enter and ng-enter-active CSS classes to the element.
These are just a couple of the changes introduced in version 1.2 of AngularJS regarding animations. You can read more in details here.
Related
Angular Version : 9.x
Primeng Version : 9.x
I have been having problems with PrimeNg elements rendering incorrectly on our dev/prod environments, however, these elements do render correctly in the local environment. I have isolated the problem down to the 'optimization' flag in the angular.json file. When this flag is set to false, the styles render as expected. However, when the flag is set to true, it appears that some CSS styles are overridden in those environments leading to unwanted styling.
For instance, when using the <p-carousel> element from PrimeNg library this element renders the buttons with unexpected styling. Furthermore, when setting the [modal]=true property to true on the <p-dialog> element it does not perform its expected behavior of graying out the background.
I am trying to avoid setting the optimization flag to false because it is increasing the build sizes.
Approaches taken to solve thus far:
Experimenting with Angular.json properties.
Trying different Typescript version (set target to ES5 in tsconfig.json)
Carousel correctly rendering:
Carousel incorrectly rendering (notice blue arrows/squares):
Why does setting this field affect the way the CSS is rendered? Is there some other fix that was overlooked that I can use other than setting 'optimization' to false?
I faced the same issue, it works when it builds with ng serve and build --prod/optimization=false, when you build with --prod and optimization=true a call to enableProdMode() fixes the issue, this issue is described here #8724
I had the same problem. Thanks to Marcos Herrera answer I have found the solution which I summarize below:
First - run ng serve mode and check which class are required in the first <div> of the <p-carousel> element. In my case there ware ui-carousel ui-widget ui-carousel-horizontal:
Second - add this class to the tag in the styleClass attribute:
<p-carousel styleClass="ui-carousel ui-widget ui-carousel-horizontal">
I am using Vue & Bootstrap for an app where I generate web components according to the official Vue documentation (https://cli.vuejs.org/guide/build-targets.html#web-component). For the most part Bootstrap and my business logic is working fine within the #shadow-roots of the web components as if it were in the light DOM.
However, Bootstrap tooltips (which are based on Popper.js https://popper.js.org/) are not working within the Shadow DOM at all. I have also tried to invoke tooltips directly with Popper.js and Tippy.js (https://atomiks.github.io/tippyjs/) in the Shadow DOM encapsulated code, sidestepping Bootstrap altogether, and I still cannot get them to work.
See example here: https://jsfiddle.net/mfep6rg9/
I can guess why -- the 3rd party tooltip libraries most likely aren't finding the target DOM element because it's in a Shadow DOM.
Is there a 3rd party solution out there that accounts for Shadow DOM / web component encapsulation?
Your guess is correct. 3party solutions using document. are not querying shadowDOM.
And there probably is no 3rd party solution as a solution requires either
WebComponents to communicate Mouse positions to the outside world.
Host querying shadowDOM (and nested shadowDOMs and nested shadowDOMs)
Not much different from an (even more restricted) IFRAME
I had the same problem while building LitElement-based Web Components and found the following solution:
$(this.shadowRoot.querySelectorAll("[data-toggle='tooltip']")).tooltip();
Make sure to target the respective element's shadowRoot and run a querySelectorAll to listen to all shadowRoot child elements that listen to "data-toggle='tooltip'".
I'm trying to make some animations with the components. I use Angular and Masonry (UI library). When I try to animate an element that is outside the ng-view it work's but when I try this on element inside the ng-view it doesn't work. I know that is due to jQuery - it runs the code once (when the page is loaded, but jQuery doesn't wait the ng-view element). How I can fix this problem?
You need to make your animation with directives on "Angular territory".
Check angular-masonry
More of a curious question rather than solving an actual problem.
How do frameworks like angular contain CSS within a component and prevent the CSS from leaking all over the page?
Angular 2 uses the ShadowDOM concept which allows for CSS to be contained within a component.
By default Angular 2 uses "emulation" which means it emulates a ShadowDOM implementation so that its more likely to work on older browsers.
It can be set to use the native browser implementation (but will only work if the browser supports it).
As a side note, ShadowDOM can be completely turned off in angular 2 and CSS will leak as you expect it.
In default ViewEncapsulation.Emulated CSS is added to <head> for all components. Component tags and the elements in their template get a unique CSS class added and the selectors of the styles are rewritten by Angular2 before they are added to <head> to only match the specific component where the styles were added to.
If ViewEncapsulation.Native is used for browsers with native shadow DOM support, the styles are added directly into the component.
If the browser doesn't have native shadow DOM support and webcomponents polyfills are loaded this works similar as Angular2 with ViewEncapsulation.Emulated
I chose jQuery Mobile over other frameworks for its animation capabilities and dynamic pages support.
However, I'm running into troubles with styling. I'd like to keep the basic page style in order to perform page transitions. But I also need to fully customize the look'n feel of headers, listviews, buttons, searchboxes... Dealing with colors only is not enough. I need to handle dimensions, positions, margins, paddings, and so on.
Therefore I struggle with extra divs and classes added by jQuery Mobile in order to override them with CSS. But it is so time-consuming, and it would be way faster to rewrite css from scratch...
Is there a way to load a minimal jQuery Mobile css file ?
Or should I look towards an other mobile framework ? I need to handle page transitions, ajax calls, Cordova compatibility, and of course a fully customizable html/css...
Methods of markup enhancement prevention:
This can be done in few ways, sometimes you will need to combine them to achieve a desired result.
Method 1:
It can do it by adding this attribute:
data-enhance="false"
to the header, content, footer container.
This also needs to be turned in the app loading phase:
$(document).on("mobileinit", function () {
$.mobile.ignoreContentEnabled=true;
});
Initialize it before jquery-mobile.js is initialized (look at the example below).
More about this can be found here:
http://jquerymobile.com/test/docs/pages/page-scripting.html
Example: http://jsfiddle.net/Gajotres/UZwpj/
To recreate a page again use this:
$('#index').live('pagebeforeshow', function (event) {
$.mobile.ignoreContentEnabled = false;
$(this).attr('data-enhance','true');
$(this).trigger("pagecreate")
});
Method 2:
Second option is to do it manually with this line:
data-role="none"
Example: http://jsfiddle.net/Gajotres/LqDke/
Method 3:
Certain HTML elements can be prevented from markup enhancement:
$(document).bind('mobileinit',function(){
$.mobile.keepNative = "select,input"; /* jQuery Mobile 1.4 and higher */
//$.mobile.page.prototype.options.keepNative = "select, input"; /* jQuery Mobile 1.4 and lower */
});
Example: http://jsfiddle.net/Gajotres/gAGtS/
Again initialize it before jquery-mobile.js is initialized (look at the example below).
Read more about it in my other tutorial: jQuery Mobile: Markup Enhancement of dynamically added content
...or just use the official, theme-less version of the CSS built specifically to allow the design of a custom theme while maintaining all of jQuery Mobile functionality.
You don't have to fight with hacks and overrides all the time and you get a lighter CSS.
Win-win.
edit: Also answered here
To be honest i'm fairly disappointed that jQuery mobile didn't provide us with a relatively style-free starting kit, to work merely with what you have said: Ajax, transitions, cordova...
Overriding the generated css classes is absolute madness, but I have done some skunk work and I managed to reduce the uncompressed css file size from a whooping 233kb to merely 27kb, while keeping the important aspects of the css such as transitions, one-page viewing, etc. This way you start almost as you would start with an empty css file.
Perhaps I will upload the file on Github, if there's any demand for it. I wish to do some more testing to see that I didn't leave anything significant behind.
as of jQuery Mobile 1.4.0, the data-enhanced data attribute was added to most of components. Setting this as true attribute will cause jQuery mobile to ignore style enhancement for the component, so you'll have to style the element by your own.
additional information about this in the jQuery Mobile 1.4.0 release notes here
http://jquerymobile.com/upgrade-guide/1.4/
i m nô expert but i would love to share à weird method with you . Actually, it s very hectic task : what you need is to edit the jqm css line by line by deleting the property values just leave them blanks before ; you have just to look after the desired sections of the CSS file to adjust or delete value
Do not forget to attach your link rel of your own CSS at the head of your HTML page
I hope it will work for you