I need to add some animation to my Angular project, and best way I came up with is just make from classname a variable and switch it in .ts file(if I need to attach style to event for example). So that mean a have two(or more) css style sets to make an animation do what I want...
Questions is:
1) Is it bad in any other way than just a lot of css code? I mean I'm fine with that, just wanna know is other people do the same? Cause its feels a bit like nasty coding...
2) I heard about angular core animation, do I have to use it here?
Thank you!
Assigning classes works really well in angular, I actually prefer using CSS for animation rather than the angular libraries.
To assign classes on certain conditions, you can use the following notation in your template:
<div class="card" [class.card--inactive]="yourCondition">
This will add the class card--inactive to the div whenever yourCondition is true.
Related
I am working with a freelance client on the side that wants to utilize Angular Material throughout the project. However, they do not like the way that the underline looks in the angular material input. I have tried a variety of approaches to change this, but I haven't found any success yet.
To be honest, I haven't even been able to find the tag in the DOM that would let me alter that border.
Here are the Angular Material docs, as you can see all of the available options have at least some form of a bottom border.
Some approaches I've tried:
This one is from the old angular material and no longer works for the new angular material
The accepted answer here is for the new angular material, but I was not able to get it to work. I implemented exactly as described and no styling changed.
This approach looked like it would work. Unfortunately, I could not get it to work either.
Any help or input on this topic would be appreciated.
For reference, the client said that any changes that deviated from the desired design would be denied. So I have to get this to work. I believe I could maybe, possibly lobby to build a custom input component as a solution, but I know that they are dead set on Angular Material.
Edit. Added a pic of desired look:
this little code did it for me. I didn't want to display it and just set height and width to 0.
::ng-deep .mat-form-field-underline{
height:0 !important;
width:0 !important;
}
However I think its kinda hard to style the Angular Material Components and for me its sometimes better to built my own.
First of all, you'll need a .scss to be imported either within the default theme.scss or after the import of the material stylesheet in main.scss.
Now, Material offers you the option of customising colours and some of the styles by overriding their #mixins found somewhere in the Material folder ( I don't have the folder in front of me.. very sorry for the vague pointing... ).
Back to the newly added file; You can override material's default styling by checking the DOM for certain classes and then adding them in said file with the desired changes. Because the file is loaded after Material's, the default styling in overridden. Same thing applies for the #mixin you chose to override. Just have a look in the file, copy-paste the whole #mixin and change accordingly.
Now if you wish to go even further, my colleagues and I have a custom library that uses Material BUT the whole styling is stripped off leaving you with the bear input within the mat-form-group and then using a <input disabled/> with a position:absolute over it. That way you get to benefit from material without using their style.
I have an issue with styling React Components with semantic Ui for React (http://react.semantic-ui.com/). I know I can modify the Semantic UI's styles Core and I did that however sometime I want to put my own styles into their components.
And I really want to use BEM methodology CSS naming convention while defining class names.
Short example, I have <Menu /> Component and I want to change a background of it, so I will add a class <Menu className="menu-header">, .menu-header class has different background-color property.
And the point is, that I cannot modify it without !important, because semantic UI has higher priority (they are grabbing elements more specific, with few classes not just by one like I want to). All styles are being caught by webpack, and my .menu-header styles are at the bottom of bundle.js - webpack output, lower than semantic UI's. The .menu-header class is being imported directly to my new component which uses <Menu className="menu-header"> example by CSS loader in webpack.
What I can do in this case?
My ideas are that I can modify core of semantic ui, change everything out there, but it doesnt solve my problem. Whenever I will want to modify something again, I would have to use !important - I don't like it.
I realized that react inline js styling has the highest priority and it overrides semantic ui styles, but it is a little more complicated than less which I am using an I am not sure whether it would be a good approach in such a big app as the one I want to develop.
I think the use of !important within semantic-ui should be labeled as a bug. I have ran into similar problems and the easiest way to solve it is using inline styles.
You can probably use something like react css modules to help you with that task.
I don't think this is possible. Someone would need to rewrite semantic ui in BEM.
I personally wouldn't use it unless it was in BEM/SASS, I'd assume there are quite a few others as well.
I have a bit of a (very) weird issue going on. I've been trying to handle it for a while now, and decided to look for other thoughts on trying to fix this.
So, here's what's happening:
I'm developing a React app, using react-router. Every time that a new view is loaded, I use react-addons-transition-group to create a fade animation. And it works fine, overall.
The problem is that there's one view that, if coming from a specific view, will not load it's CSS classes. This is extra weird, since I have all the CSS classes in one single minified file.
The view in question is a carousel, that holds many views. First time it's opened, it has no style applied. However, if I change the carousel slide, all the styles are applied.
The following screen shot will show the state before and after the change of slides:
At this point, I'm completely out of ideas of what can be happening. Have anyone ever faced such issue?
I think I should stress it once more: it only happens when transitioning from one specific view to this specific view. It does not happen anywhere else in the app.
Thanks in advance for your help!
Hard to say without the code but look at div#app.
On the LHS you have <div id="app" class="app login-section />
and on the RHS you have <div id="app" class="app calculator-section gender />
and the styling requires that class as it is
.calculator-section .calclulator-slider .calclulator-entry {
[...]
}
I'm trying to select a element with css and I can't use css3 because this is for a older system, so I can't use.
nth-last-child(2)
is there a way to do this in css
You can add a class using jQuery like such:
// #css3 and .query can be any css3 selector
$("#css3 .query:nth-last-child(2)").addClass("lasties2")
And then define the class (lasties2) in your css.
If you can't use JavaScript or are using a different library, or don't want to use a library, then please specify. Other libraries like mootools and prototype will have ways to achieve the same end. You will have greater difficulty with pure JavaScript in an environment that does not support CSS3, but it is possible. If you can't or don't want to use JavaScript then you will have to add a class to the relevant items manually.
One caveat of the javascript and the manual approach is that if the page is modified by javascript, the behavior won't match css3. With CSS3 if the nth from last child changes, it then the new one will get styled, with jquery or manual classing it will stick to the initial one. Here is a jsfiddle that illustrates what i mean: http://jsfiddle.net/CSExB/35/
As you can see if you tried the fiddle, it is possible to fix this with javascript by first removing the class, then making the modification and finally reapplying the class, for the above code for example it would be:
$("#css3 .query:nth-last-child(2)").removeClass("lasties2");
$("#css3").append('<p class="query">something</p>');
$("#css3 .query:nth-last-child(2)").addClass("lasties2");
If you want make page compatible with IE < 9 or Safari < 3.2 you should add additional class to list items <li class="some_additional_class">. You can do it when page generated on server-side, or using JS on client-side.
similar to to this here...
http://www.shawnolson.net/a/503/altering-css-class-attributes-with-javascript.html
i know i can change each element's style's individually, but i want to change a lot of elements styles at the same time, and the browser seems to struggle over about 40 elements.
thanks :)
Yes it can, quite easily.
$$('.someClass').addClass('newClass');
This will add newClass to every someClass element - in your case the 40 elements you have.
This is the literal answer to your question.
That said, I believe what you're really trying to do is generate a specific CSS class on the fly.
And that's something far more complicated. I suggest using this MooTools plugin: http://mootools.net/forge/p/moocss