I am using FullCalendar for Angular and I am having trouble applying custom styling. I need to change the background colour of the 'More Events' Popover, but no matter what I try, none of my styles are applying.
I am putting these styles into foo.component.scss:
.fc-popover .fc-more-popover .fc-day .fc-day-mon .fc-day-past .fc-day-other{
background: #303030 !important;
}
I can see in the classes that I have copied from inspect on Chrome references only one day, but it doesnt even apply to that day.
I have tried more generic class names such as:
.fc .fc-popover .fc-more-popover
to no avail.
I have also tried putting the styles in a style tag directly in the component template, and I have tried putting the styling into the main styles.scss file.
When I edit the styles in the inspect tab in my browser, it applies and achieves the desired result, but I just can't get these styles to apply any other way.
Angular has something called view encaspulation.
Without going to deep or being too complicated, it means that heach view has its own ecosystem, so that they can't collide with each other when it comes to styles.
So a style like .container in app.component.scss, won't collide with a .container in home.component.scss.
To avoid view encapsulation, you have one of two solutions.
The nasty one, ::ng-deep, is to be avoided. So it leaves you with a single one : move your styles into the style.scss file, where there is no view encapsulation.
Lastly, if it still does not work, try adding !important to your styles (and remove it after testing, it's nasty too) : if the style gets applied with !important, it means your CSS selectors are not "strong" enough, so try "strenghtening" them.
Related
I have two pages in my Nuxt project:
|-pages/
|---index.vue
|---login/
|-----index.vue
The index.vue inside pages has these styles:
<style lang="scss">
html,
body,
#__nuxt,
#__layout,
main {
height: 100%;
}
</style>
As you can see, I need my container taking all the screen height, so I need to put that style in all Nuxt containers, for that reason, my styles can't be scoped. Here all is fine, but when I go to /login I don't want those styles, but for some reason Nuxt is applying those styles, even if I delete the <styles> label inside pages/login/index.vue, I don't know why...
In theory, the pages/index.vue styles shouldn't be loading if I'm in /login 😣
The only solution I found is to put the scoped attribute to page/index.vue style label, but it doesn't allow me to change the Nuxt's containers height.
Do you know a better way to do it?
If you define global CSS styles (by not scoping them), they will indeed be applied to your whole app.
The behavior in login/index.vue of your styles having the properties is hence totally fine.
This is called CSS Cascade.
If you don't want the behavior being applied to the other pages, you need to either override the properties in the other .vue files (which is fine to a certain point) or scope the styles of your root index.vue.
You can of course also use Nuxt layouts, if you want to apply styles to a specific group of pages.
Also, height: 100%; is a pretty generic property. You will not really need it if you use your page flow (by adding regular blocks of HTML one to the other), it will put them accordingly.
For further CSS issues, the usage of the inspector of your browser's devtools is highly recommended and will spare you some struggle!
Consider the following hierarchy in some Angular 2/4 project:
<parent-cmp [ngClass]="{ 'parent': condition }">
<child-cmp class="child"></child-cmp>
</parent-cmp>
Now in the child component's CSS file I would like to say:
.parent .child {
background-color: red;
}
In this scenario, I'm basing the child's design on parent's logic without knowing what that logic is at child level. But the problem is that, this is not going to work. And that's because, Angular compiles the the child CSS selectors to this:
.parent[_ngcontent-c9] .child[_ngcontent-c9] {
background-color: red;
}
And the parent part of the selector is not going to work anymore. So How can I pull this off? Also please bear in mind that I simplfied this example and the two components are not necessarily one after another (there might be arbitrary number of components in between).
In Angular this is called "view encapsulation" where the JavaScript, CSS styles, and HTML templates are all managed by Angular. There are a lot of advantages to this approach as it allows you to easily tree-shake a project and drop components that are not being used. You not only drop the Javascript code, but all the styles and HTML with it.
When it's turned on the styles are injected into the DOM as embedded styles. Angular keeps track of what styles are required on the document and adds or removes styles as needed. These styles can have strange names at run-time like those in your question.
You need to read up on the https://angular.io/guide/component-styles styles guide to see how to define a :host style. This is the style assigned to a component when view encapsulation is turned on. When using :host you can refer to the parent selector using a :host-context path, and you can also style inside other child components using the ::ng-deep selectors.
Keep in mind. This is all optional. It's turned on by default, but if you don't want to use it. You can turn it off.
You can change the view encapsulation mode when you define your component. To disable this feature just change the encapsulation option to native.
See the guide:
https://angular.io/guide/component-styles#view-encapsulation
So I got my custom app.css in my project and I'm using bootstrap template. Now when I create new button style for example in app.css it's accessible everywhere (on every page since I got master template and other pages are extending it) but when I override bootstrap theme in app.css it's not working. When I use same code to override bootstrap on top of the page using <style> tags it's working. app.css is included properly and after bootstrap.css so any idea what I'm doing wrong ?
Try a cache refresh, for me in Chrome, I use Ctrl+Shift+R.
If this doesn't produce any results, use the inbuilt inspectors on Chrome or Firefox to view the attached properties to the element you are editing. If the app.css is overriding the bootstrap.css, you will see something like the below image, showing the app.css is above the skin-purple.min.css meaning the app.css was the latest to be loaded.
I would say that there is a hierarchy, try to include the bootstrap.css after the app.css, you could also give those css attribute an !important like so:
#bla {
display:none !important
}
But that is not a good practice I think, it may be ok if you do not override alot of the bootstrap.css
You could also try this:
http://bootstrap-live-customizer.com/
to customize your bootstrap.
It most probably is a style precedence issue. I found this article very useful to at least understand what goes on with style precedence and what specificity is.
In your very case it may be helpful to simply use a class selector such as
.mybutton button{
color: blue;
font-size: inherit;
...
}
and give your buttons the attribute class="mybutton". In the class definition you may freely override whatever you want and also let other properties be inherited from Bootstrap.
There is also the !important rule. However, it is usually referred to as a bad practice, since it breaks the normal cascading rules and makes debugging an incredibly painful task.
I have a PopupPanel, and I want to override some of the styles from the default theme. Eclipse gave me a .css in the doc root, and I put the styles I want to override in there. Inspection from the browser at runtime shows my styles being overridden by the GWT theme.
It's hard to believe that this is the default setup for a new project - an application .css that is loaded after the stock css?
I tried loading my css in my module XML (using stylesheet tag), but that has no effect, it's not loaded at all. The GWT docs say this is deprecated, so I suspect it's just been removed. Regardless, I don't want to use a deprecated interface.
To be clear, this is an ordering problem. I've verified my css is loaded correctly by inspecting the DOM. I can see my styles applied to the element in question, and I can see them overridden by the GWT theme css (dark.css in this case). Adding the !important flag does get my styles applied, but that's obvsiously not the right solution.
The popup is instantiated in the click handler of an anchor that's defined in a UI widget. The popup itself isn't defined in the template, I simply instantiate it and call show(). I'm not sure if that's relevant.
Can someone describe to me how this should be accomplished? If this is any harder than "put line XXX in file YYY", I'm going to seriously lose my faith in GWT.
GWT just generates some HTML to which CSS is applied. It looks complicated but there isn't any magic going on in the final output. Just HTML, CSS and some JS.
If your PopupPanel is picking up the wrong style it's because the browser isn't seeing your style, or the style in the standard theme (which is standard.css) is taking precedence.
If you have a DOM editor:
Inspect the element and see what styles it has against it.
Verify your style sheet is being included
Verify your style rules are being applied to the element as well.
Most likely it's a simple CSS error of some kind and GWT is the red herring. However if you can't see the error you can consider:
Give your element an id or its own additional style and use a rule to override the default behaviour.
Completely override .gwt-popupPanel with the style you want to apply everywhere
Subclass PopupPanel. Call the super
constructor but then strip out the
gwt-popupPanel style and replace it
with your own style instead. Or
augment the gwt-popupPanel and add
an extra style of your own.
Copy the entire default theme and rename it as something else and use that in your project.
The best option is probably the simplest which would be 1)
I see on the YUI page an example about changing the style for panels in general. But I'd like to change the style for all the tooltips (and not other panels) on my website. All my tooltips are not in one certain DIV, so changing the YUI panel styles within a div won't work for me.
Any tips?
It looks like YUI Tooltips add the class yui-tt to all tooltips. You could style just your tooltips by using that as a common ancestor, i.e.
.yui-tt .bd {
/* Styles here... */
}
I load the configurator's style sheet (with the default skin (sam.css) already included) in the head of my app followed by my own styles, so they are ready for immediate rendering. However as you mentioned, the YUI loader will subsequently override your styles.
If you load a lot of modules or make a lot of style declarations and don't want to write !important after every one, add the option
skin : {defaultSkin: ''}
to your loader configuration. This will also save a little bit of bandwidth for your users and lead to faster rendering.
Also note, that IE6 doesn't recognize !important so it won't work for that browser.
Hope that helps.