I'm having problems understanding the AG-grid css syntax (Variable Reference).
disclaimer - I'm not a developer, just self-taught hobbiest, so I'm not sure what to search for.
I want to create my own theme for a project, and I wasn't getting anywhere, so I copied the css file for an existing theme, and intended to modify it to suit my needs, but I don't understand why its not working.
Below is an example (heavily truncated):
.ag-theme-pz {
...
--ag-background-color: rgba(209,210,210,0.75); <-- Doesn't work
background-color: rgba(209,210,210,0.75); <-- Does work
...
}
For some reason, in my copied css file, the syntax (--ag-background-color) no longer works - but it worked fine in the original css file.
Is there a reference I need to add to make sure the syntax as per their documentation works??
What have I missed?
Related
I have been experiencing this issue for a long time. I have a lot of projects with pure html/css/js. in my css file there are a lot of codes in which i have written to get an image from directories. but the problem is that the image does not exist. For example:
.bg-img {
background-image: url("./../img/foo.jpg");
}
in this example foo.jpg does not exist in this directory. but i did not use .bg-img class in html. So this did not caused any problem as i was not using it. But while converting this to React i noticed that React has stricter rules and caused problems with compiling.
So is there any way that i can make react neglect/miss these problems and continue compiling.
By the way, the reason why i have these unnecessary css codes causing problems is that i have copy pasted from another template's css codes and did not removed them as there was a bunch more of them.
So Please don't respond me like: "remove unnecessary css codes"
Thank you for your response :).
Are you using strict mode in React? https://reactjs.org/docs/strict-mode.html Another thing - you should probably simply remove the styles you don't use :) it will help with your warnings/errors as well ;)
I was looking for an easy way to prefix a style sheet and sass works just great. I don't need any building tool, just vs code sass extension, and press watch.
What I did was, renamed the css to scss and then imported it inside the main style nesting in the selector I want, like:
#wrapper {
#import 'style1';
#import 'style2';
}
The issue comes when one of the files has #font-face, they also get prefixed and that is a problem. I checked the issue tracker and apparently this is the correct behavior.
https://github.com/sass/sass/issues/2442
Given that. I am looking for a way to import only the #font-face rules to the root instead of the #wrapper selector.
Is this possible without having to change the content of 'style1' or 'style2' ?
I was able to get around this problem with node sass magic importer.
But again you need node scripting and terminal, but can be mitigated with a bundler which kinda is not what I want but at least I can sort of prebuilt it and still use a watcher.
But given the hasle to set this up for such a simple thing I would just go to the style sheet and copy the font-faces to the root of the main file anyways.
If anyone knows a solution with sass only please reply.
I'm using angularjs along with the angular-material framework. I started writing my project based on the angular-seed project.
In my project I have a form that contains <md-select> elements. My problem is that the selection view is always only as big as 5 select options. I want to see more options when scrolling.
I looked around the angular-material source code and found this !default SASS variable which controls how many options are displayed. I want to make it bigger.
The way I understand it, !default means SASS will ignore the value of that variable if it's already defined elsewhere.
But I also understand that the SASS preprocessor takes a single SASS file as input and outputs a single CSS file - which means I can't override a SASS variable in one file from another file.
I'm also quite confused on which component is responsible for compiling the .scss files found in the angular-material framework and at what stage are they compiled. Are they compiled when installed by Bower? Are they compiled when I call npm start?
I'm new to all these technologies so even though those stuff might seem trivial, I don't really know what to search for to find answers to these questions, I tried and found nothing.
Well I just looked around and realized that the angular-material Bower package comes with css files that have already been pre-processed from scss files. There's nothing I can do to affect that variable.
To show more options in the md-select component I just resorted to the ugly solution of adding these hard-coded pre-calculated attributes to my stylesheets:
md-select-menu {
max-height: 784px !important; }
md-select-menu md-content {
max-height: 784px !important; }
EDIT:
Actually I found this solution even nicer:
md-select-menu {
max-height: 100vh !important; }
md-select-menu md-content {
max-height: 100vh !important; }
It fills as much of the view as possible with options
i have a simple but for me rather an important question. I will start a clean Project with Less and wanna include bootstrap. So my basic style.less file would look like this:
// Bootstrap Corefile
#import "bootstrap.less";
// My own Styles
header {
.make-row();
}
is this logical correct because now the bootstrap and my own styles are compressed in one file. In addition I would have a pretty big css file... And what if I want to use another css file from external plugins.
I would like to know if someone has already experience with it?
Yeah that will work. If you want to add another file you can just import that as well.
One thing that you do have to be careful of is that in the earlier version of IE it has a max number of classes it process. I can't remember off the top of my head but I think it is somewhere near 1000. So if the css at the end of the file isnt working in IE thats why.
Here is a line to the documentation to see what you can do with it. Check out the import section.
I want to style/mark a MenuItem in GWT MenuBar. So i have some logic that adds a style name to a menu item (the logic is working properly).
mItem.setStyleName("menuItemMarked", true);
with this set getStyleName yields "gwt-MenuItem menuItemMarked" as expected.
But how to use/apply this style in css (at the moment i put css in uibinder.xml)? (as you may see i am not a css expert)
update: what i tried is that.
.menuItemMarked{background-color: yellow}
this is not working. if i call "inspect element"(chrome) i can see "class="gwt-MenuItem menuItemMarked" but i can not find the style "menuItemMarked" in the list of applied styles?!
Where are you specifying your CSS?
If your code is located within your code packages, it is likely being obfuscated by the GWT compiler. This applies to <ui:style> blocks in .ui.xml files, and .css files included in ClientBundles.
In this case, you will want to check out Programmatic Access to Inline Styles from the GWT docs. This will allow you to change your code to:
mItem.setStyleName(style.menuItemMarked(), true);
Alternatively, you can tell GWT to not obfuscate certain CSS classes. Here is a detailed answer to a similar question
Finally, if GWT does not touch your CSS file (it is being served from your server like other files), then you will need to make sure that your file is being included in your page properly. Your browser's dev tools should be able to help with that.
Make sure you specify correct selector name in your css. In this case you need to have following:
.gwt-MenuItem.menuItemMarked {
background-color: yellow;
}
Since gwt-MenuItem remains the first class name in the list it takes precedence over any styles (incl. background-color) defined in the subsequent classes. The only way to overrule this is to define styles with more specific selector like above. Check this link out for more detailed explanation.