I am trying to add customized styling to every second row in my AgGrid.
I am using the following snippet of code in my onGridReady:
gridOptions.getRowStyle = function (params) {
if (params.node.rowIndex % 2 === 0) {
return { background: "#f0f1f4" };
};
The issue I am having is I would like to add a variation indicating whether the row is selected or not. Currently the style remains the same either way.
What should I add to my code to achieve this?
Thank you in advance for reading and responding.
AgGrid exposes multiple class names of each row elements to describe its current state (ag-row, ag-row-odd, ag-row-selected...). You can take advantage of that information to override the row style if it's currently selected like below:
.ag-theme-alpine .ag-row.ag-row-odd {
background-color: pink;
}
.ag-theme-alpine .ag-row.ag-row-odd.ag-row-selected {
background-color: red;
}
Live Demo
What I'm looking for could work like this (it doesn't)
<span data-css-var="--my-css-var"></span>
:root {
--my-css-var: some-color // created by js
}
span[data-css-var] {
background-color: var(attr(data-css-var)) // error
}
The thing is I cannot set styles on the elem (3rd party), only data- attributes.
Any thoughts guys?
This one is read - https://css-tricks.com/css-attr-function-got-nothin-custom-properties/
What happens if I create two class or id with the same name but different property, which one will execute and why ?
I think in this case the class created first will give priority.
I just want to know.
Here's an example to show you:
html {
background-color: blue;
}
html {
background-color: red;
}
html {
background-color: lime;
}
<html></html>
As you can see, the last duplicate rule defined is the one that is applied.
I think it is more likely to be the second one, because generally computers will go by what value was assigned to a class or variable last. For example:
var num = 1;
var num = 2;
alert(num);
//will alert “2”
A dot on top of an variable means its derivative with time. I want to type this in a HTML page. How do I do that??
PS-essentially the equivalent of \dot{x} in latex.
MathJax can to that for you :)
or even you can use a simple script to change your text in to an image using this:
http://www.codecogs.com/latex/integration/htmlequations.php
using the script above you can get this:
http://latex.codecogs.com/svg.latex?\dot{x}
and these are all latex codes you may need:
http://web.ift.uib.no/Teori/KURS/WRK/TeX/symALL.html
Although this question is years old, I did not find a solution without external libraries. So, here is one. I created a Razor component, but of course you can avoid this by copying its content to your HTML and replace #ChildContent by the letter(s) you need the dot above.
DottedLetter.razor
<span class="d-inline-flex justify-content-center dot-wrapper">
#ChildContent
</span>
#code {
[Parameter] public RenderFragment ChildContent { get; set; }
}
DottedLetter.razor.css
.dot-wrapper {
position: relative;
width: fit-content;
}
.dot-wrapper::after {
position: absolute;
bottom: 50%;
content: '\2024'
}
Usage in HTML
<DottedLetter>Q</DottedLetter>
Note, there are many dotted letters available, see here, but e. g. not <DottedLetter>Q</DottedLetter>.
There are many possible values for list-style-type CSS property (e. g. decimal, lower-latin, upper-greek and so on). However there are none for the Cyrillic alphabet (which, btw, has different variations for different languages).
What is the best way to style an ordered list with Cyrillic letters?
(I'm providing a solution I ended up with despite I'm not very happy with it.)
I know nothing about Cyrillic list schemes so I’m at risk of a bit of cultural embarrassment here, but CSS3 Lists module (still in working draft) defines quite a few Cyrillic alphabetic list types: lower-belorussian, lower-bulgarian, lower-macedonian, lower-russian, lower-russian-full, lower-serbo-croatian, lower-ukrainian, lower-ukrainian-full, upper-belorussian, upper-bulgarian, upper-macedonian, upper-russian, upper-russian-full, upper-serbo-croatian, upper-ukrainian, upper-ukrainian-full. As expected, the state of support for these is deplorable currently (certainly nothing in Gecko or WebKit), but hopefully going forwards these will start to be implemented.
Update: some changes have been made – the definition of list types has been moved into the CSS3 Counter Styles module whose current draft (Feb 2015) has unfortunately lost all alphabetical Cyrillic types. This is in Candidate Recommendation stage so it’s unlikely that additions will be made at the point. Perhaps in CSS4 List Styles?
In this method I'm using CSS-generated content in before each list item.
.lower-ukrainian {
list-style-type: none;
}
.lower-ukrainian li:before {
display: inline-block;
margin-left: -1.5em;
margin-right: .55em;
text-align: right;
width: .95em;
}
.lower-ukrainian li:first-child:before {
content: "а.";
}
.lower-ukrainian li:nth-child(2):before {
content: "б.";
}
/* and so on */
Disadvantages
Hardcoded, restrict list to a certain max length.
Not pixel-perfect as compared to a regular order list
Here is another solution for Cyrillic letters with pretty clear code: jsfiddle.net
(() => {
const selector = 'ol.cyrillic',
style = document.createElement('style');
document.head.appendChild( style );
'абвгдежзиклмнопрстуфхцчшщэюя'.split('').forEach((c, i) =>
style.sheet.insertRule(
`${selector} > li:nth-child(${i+1})::before {
content: "${c})"
}`, 0)
);
})();
PS. You can convert this next-gen code to old one with Babel: babeljs.io
I'm surprised that there is no Cyrillic numbering. Here's a quick JS solution for you:
function base_convert(n, base) {
var dictionary = '0123456789abcdefghijklmnopqrstuvwxyz';
var m = n.toString(base);
var digits = [];
for (var i = 0; i < m.length; i++) {
digits.push(dictionary.indexOf(m.charAt(i)) - 1);
}
return digits;
}
var letters = {
'russian': {
'lower': 'абвгдеёжзийклмнопрстуфхцчшщъыьэюя',
'upper': 'АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ'
}
}
$('ul, ol').each(function() {
if (!(results = $(this).prop('class').match(/(upper|lower)-([a-z]+)/i))) return;
var characters = letters[results[2]][results[1]];
$('> li', this).each(function(index, element) {
var number = '', converted = base_convert(++index, characters.length);
for (var i = 0; i < converted.length; i++) {
number += characters.charAt(converted[i]);
}
$(this).attr('data-letter', number);
});
});
My written Russian is admittedly bad, as you can see by my inability to count with letters, so change the letters object appropriately.
Demo: http://jsfiddle.net/JFFqn/14/