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 { }
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 am using Onsen UI in my Cordova project, how is it possible to make custom modifier like chevron, tappable etc? In documentation it is nothing about this http://onsen.io/guide/overview.html#UsingModifier
I want to make theme switcher and load another css files when e.g. modifier="orange" or modifier="blue". Thx.
Defining custom modifiers is quite easy. A modifier will add a suffix to the base CSS class, i.e. for <ons-button> the base class is .button, so if you write
<ons-button modifier="orange">Orange button</ons-button>
the class .button--orange will be added. You can style the modified button by using the following CSS:
.button--orange {
background-color: #ffb836;
}
See how it's done in this simple example:
http://codepen.io/argelius/pen/bVwzJL
When creating, for example, dropdown menus I use the # sign on the link that toggles the dropdown. It works just fine with just for that and many other things where I need a link just to do something and stay on the same page.
Now I'm using angular and the problem I face is that when I use this sign on a link it thinks I'm referencing the route for / so that the app goes to the first screen.
How can I deal with this?
As far as I know another "ugly" workaround is to put href="javascript:;" to avoid the unintended navigation.
Or remove the href altogether but then when you mouseover you have no pointer. you need to add this to your CSS as described on UI Bootstrap page.
From: http://angular-ui.github.io/bootstrap/
Original Bootstrap's CSS depends on empty href attributes to style
cursors for several components (pagination, tabs etc.). But in
AngularJS adding empty href attributes to link tags will cause
unwanted route changes. This is why we need to remove empty href
attributes from directive templates and as a result styling is not
applied correctly. The remedy is simple, just add the following
styling to your application:
.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }
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.