This is a weird one we're currently porting an existing CakePHP app to Angular.JS, the CSS is the same and overall everything looks the same but there is small changes for example the font type or the size, also noticing small difference in spacing, padding and margins.
Does Angular add CSS style or overwrite existing styles?
AngularJS does not add any style elements nor does it add or remove any inline styles. It does however add classes to DOM elements such as ng-scope, ng-binding..etc all with the "ng" prefix.
Angular does add a few CSS styles, but nothing that would account for what you're seeing.
In particular, to hide elements while they're loading through an ngCloak directive, Angular adds a class to set the display property to 'none'.
You can see Angular's CSS in https://github.com/angular/angular.js/blob/master/css/angular.css.
Related
I have a single-page website where I want every section to have the same primary style. The problem is that one section is header, the other footer, and the rest div. I would like to know the best way to use styled-components to achieve this behaviour. In CSS, I would have a selector .section in a global styles file, but as I understand, the styled-components GlobalStyle is only used to set general styling. If I want to use styled-components I will end up repeating the same code for every section. Thanks in advance for any help you can provide.
Yes, it is possible to handle the CSS part from the styled-components. So you should use a global style CSS file. For all common CSS
For more reference follow this link
If you use JavaScript and CSS.
Then add the style (your CSS tag) to the _app.css file.
Then you can use the style on different pages.
I have html of slider with with js and css in working condition, now i have to implement Joomla banners in that slider is it possible or right way ? if not than guide me how to do this or another method
Yes, is possible. In this case you need add your custom code in your template, and the custom code via override.
First try to add the HTML and content for example in one Custom HTML module for test:
Adding JavaScript and CSS to the page (add the css in your main css file)https://docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page
By default the component banners has a single call at the same time, you'll have to modify the php code and include, for example a cycle to recover more banners or similar.
Here you can find more info:
Understanding Output Overrides.
Create an override.
I have a particular rounded button, with his CSS, but when I use it, my CSS blow up, because there are Ionic CSS "standard" rules.
My .button class is ruinded by the .button CSS class of Ionic.
I already tried to change name to my .button class but nothing. The only way to get my button is to not import the Ionic.css file, but of course, I need it for the other elements,
My button is nested inside other elements, for which I need the Ionic CSS
So, I need to know if is possible to exclude a specific HTML tag from the Ionic CSS rules, without edit Ionic.css file
Not possible. Go into the Ionic.css and Edit it. You can edit it. I checked the Docu for Sass: http://ionicframework.com/docs/cli/sass.html The CSS is placed in this folder: www/lib/ionic/css The better solution is, to set up an Sass environment. Then you can use only the components you need.
And other solution, but a bit dirty, is, to override the rule with a deeper selector. Maybe with .container .button or div.button or button.button or body .button.
You can use other class name in your custom css and use the property !important in each of your css rules. Anyway you could change the order of the imports.
I am using angular ui-select dropdown in my website. The theme I am using is selectize. During run time the elements are prefixed with either ui-select or selectize. Since I already have the styles existing for one page, the new select dropdown also takes the same styles. Is it possible to prefix the classes so that i can have different styles for each pages?
I'm not sure if it is possible to prefix the classes as you say, but you could use descendant css selectors to separate your styles.
.someContainerClass .ui-select { }
I've been fiddling with Angular-Material and it does seem pretty slick. One of the issues though, that we're having is the lack of the ability to close a tab using an 'X' button next to the tab's label. This is similar to what any browser tab UI will have to offer.
In the current UI framework we use (Angular Bootstrap UI) you could define the rendering of the tab header to add such a button.
Any ideas on how to implement it with Material's md-tab directive?
Thanks.
The docs at: https://material.angularjs.org/#/api/material.components.tabs/directive/mdTab
Say:
If the label attribute is not specified, then an optional
tag can be used to specify more complex tab header
markup. If neither the label nor the md-tab-label are specified, then
the nested markup of the is used as the tab header markup.
Why not define your in a tag?