I am new to JqGrid, so please bear with me. I am having some problems with styling the cells when I use a showlink formatter.
In my configuration I set up the AfterInsertRow and it works fine if I just display simple text:
afterInsertRow: function(rowid, aData) {
if (aData.Security == `C`) {
jQuery('#list').setCell(rowid, 'Doc_Number', '', { color: `red` });
} else
{
jQuery('#list').setCell(rowid, 'Doc_Number', '', { color: `green` });
}
}, ...
This code works just fine, but as soon as I add a formatter
{'Doc_Number, ..., 'formatter: ’showlink’, formatoptions: {baseLinkUrl: ’url.aspx’}
the above code doesn't work because a new element is added to the cell
<a href='url.aspx'>cellValue</a>
Is it possible to access programmatically the new child element using something like the code above and change the style?
`<a href='url.aspx' style='color: red;'>cellValue</a>` etc.
UPDATE: In order to work you have to do as follow:
jQuery('#list').setCell(rowid, 'Doc_Number', '', 'redLink');
CSS Class
.redLink a {
color: red;
}
You could add a class to the cell:
jQuery('#list').setCell(rowid, 'Doc_Number', '', 'redLink');
Then define a CSS class along these lines:
.redLink a {
color: red;
}
Related
How can i change the global color attribute in Vuetify dark theme?
Like e.g.
html, body {
color: red
}
I try to set it via variables.scss but i cant find the appropriate variable name.
Is there a variable for this or how am i supposed to change the color?
There are a few ways. If you'd like to use variables.scss you need to enable treeshaking in nuxt.config.js
vuetify: {
customVariables: ['~/assets/variables.scss'],
treeShake: true, // add this line
},
Otherwise if you'd like to define your own colour you'd do it in the same configuration object as well. Then you can then use anywhere in your vue template.
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
themes: {
light: {
myawesomecolour: '#D78480', //#RRGGBB or from the colors packages
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3
}
}
}
},
Or in layouts/default.vue insert a style tag and put in your custom css
<style>
html, body {
color: red;
}
</style>
I am trying to use tailwndo css for a project in laravel and I would like to maintain the nunito font for the whole app but Tailwind has its own font set. Does anybody know how to change it?
Connect the font to the project (as you usually do) and just add your font to tailwind.config.js
module.exports = {
theme: {
fontFamily: {
'sans': ['-apple-system', 'BlinkMacSystemFont', ...],
'serif': ['Georgia', 'Cambria', ...],
'mono': ['SFMono-Regular', 'Menlo', ...],
'your-font': ['Your Font', ...]
}
}
}
https://tailwindcss.com/docs/font-family/#app
tailwind.config.js :
theme: {
extend: {
fontFamily: {
body: ['Rowdies']
}
}
},
css\app.css
#import url('https://fonts.googleapis.com/css2?family=Rowdies:wght#300&display=swap');
shell:
npm run dev
or
npm run watch
now you can use .font-body class in any tag that you want
for example:
<body class="font-body">
<h1>Hello World!</h1>
</body>
font + body = font-body
fontFamily: {
body: ['Open Sans']
}
(you can change body)
I have this:
.a-btn {
//rules here
##{&}__label {
//more rules
}
}
so I am after such an output:
.a-btn {…}
#a-btn__label {…}
BUT That compiles to this error:
SassError: Invalid CSS after "#": expected selector, was "#.a-btn"
So I need to convert .a.btn to a-btn. Therefore I have tried to use str-slice like that:
.a-btn {
//rules here
##{str-slice(&, 2)}__label {
//more rules
}
}
But that yields:
SassError: argument `$string` of `str-slice($string, $start-at, $end-at:-1)` must be a string
Can you try this
.a-btn
#at-root ##{str-slice(#{&},2)}__label
height: 200px
width: 200px
background: red
I'm creating some icon font rules for using in my site. Using Sass I wanted to list all the icons in a list variable and use #each to loop through them all.
Code looks like this:
$icons:
wifi 600,
wifi-hotspot 601,
weather 602;
#each $icon in $icons {
.icon-#{nth($icon, 1)},
%icon-#{nth($icon, 1)} {
content: "\#{nth($icon, 2)}";
}
}
The problem is the backslash on the content: line. I need it for the character encoding, but it escapes the variable interpolation, outputting CSS that looks like this:
.icon-wifi {
content: "\#{nth($icon, 2)}";
}
Adding one more backslash like this: content: "\\#{nth($icon, 2)}"; outputs this CSS:
.icon-wifi {
content: "\\600";
}
Is there a way to get the Sass to output CSS with only a single backslash while keeping the variable interpolation?
I got this to work by messing with the interpolation
sassmesiter demo
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----
$icons:
wifi 600,
wifi-hotspot 601,
weather 602;
#each $icon in $icons {
.icon-#{nth($icon, 1)},
%icon-#{nth($icon, 1)} {
content: #{'"\\' + nth($icon, 2) + '"'}; // <------ See this line
}
}
compiles to
.icon-wifi {
content: "\600";
}
.icon-wifi-hotspot {
content: "\601";
}
.icon-weather {
content: "\602";
}
If you include the backslash in the actual variable, then when the sass generates the css, it will actually generate the calculated unicode character instead of outputting the unicode in the css output. This still usually works but it's hard to debug if something is going wrong and it is a bit more prone to cause issues in the browser in rendering the icon.
To output the actual unicode in the generated CSS, you can do this:
#function icon($character){
#return unquote('\"') + unquote(str-insert($character,'\\', 1)) + unquote('\"');
}
$icon-thing: "e60f";
.icon-thing:before {
content: icon($icon-thing); //outputs content: "\e60f";
}
You can add the backslash to the parameter in the $icons variable. That is,
$icons: wifi "\600", wifi-hotspot "\601", weather "\602";
#each $icon in $icons {
.icon-#{nth($icon, 1)}, %icon-#{nth($icon, 1)} {
content: "#{nth($icon, 2)}";
}
}
Generated CSS:
.icon-wifi {
content: "\600";
}
.icon-wifi-hotspot {
content: "\601";
}
.icon-weather {
content: "\602";
}
Use unquote and double slash
$var:123 → content:"\e123"
content:#{unquote('\"')+("\\")+("e")+$var+unquote('\"')};
If you are using Gulp to compile your Sass files, installing this Gulp plugin is probably the easiest way to get around the issue:
https://www.npmjs.com/package/gulp-sass-unicode
var sass = require('gulp-sass');
var sassUnicode = require('gulp-sass-unicode');
gulp.task('sass', function(){
gulp.src('style.scss')
.pipe(sass())
.pipe(sassUnicode()) // <-- This is the bit that does the magic
.pipe(gulp.dest( "css/" ));
});
There is no need to make any code alterations in your Sass files. Write out your Sass code how you want and the unicode characters are decoded back into regular escaped strings in the output CSS automatically.
Input SCSS
$testContent: "\f26e";
#test {
content: $testContent;
}
Output CSS
#test {
content: "\f26e";
}
Unfortunately, these solutions were not entirely working for me but I was finally able to get it working with SASS maps
//node-sass 4.11.0
//libsass 3.5.4
$hexes: (
checkmark: \2714
);
#function out-content($var) {
#return unquote("\"#{ $var }\"");
}
#each $mod, $code in $hexes {
.#{$mod}-after {
&:after {
content: out-content($code);
}
}
}
//output
//.checkmark-after:after {
//content: "\2714";
//}
I have few input and select controls in my form that each of them have a small question mark icon in front of them that will show a tool tip when mouse is over that gif with help of excellent jquery jquery.qtip-1.0.0-rc3.js(with jquery-1.3.2.min.js) plug-in like this :
$('#questionmark1').qtip({
content: 'sample help content'
, style: { name: 'sampleStyle' }
, position: { corner: { target: 'bottomLeft', tooltip: 'rightTop'} }
});
I also want to show tool tip when ever that corresponding input field get focused and hide when get blurred . the following one do the trick but without showing the tool tip when mouse is over that gif
$('#questionmark1').qtip({
content: 'sample help content'
, style: { name: 'sampleStyle' }
, position: { corner: { target: 'bottomLeft', tooltip: 'rightTop'} }
, show: { when: { target: $('#input1'), event: 'focus'} }
, hide: { when: { target: $('#input1'), event: 'blur'} }
});
but the problem is that something like does not work.
show: { when: { target: $('#input1'), event: 'focus'},
{ target: $('#questionmark1'), event: 'focus'} }
in short the preceding first 2 blocks of code works fine and i can add both to achieve my goal but i want do it the right way .
how can i target multiple targets'events for showing a single tool tip ?
You don't have to wire up all of the show/hide events inside of the call to qtip(). I'd define the mouseover event as the event that triggers the qtip by default:
$('#questionmark1').qtip({
content: {text:'sample help content', prerender: true}
, style: { name: 'sampleStyle' }
, position: { corner: { target: 'bottomLeft', tooltip: 'rightTop'} }
, show: { when: 'mouseover' }
});
(Note the prerender option I added)
And then manually define event handlers for the input that you want to show the qtip for:
$("#input1").bind("focusin", function() {
$("#questionmark1").qtip("show");
}).bind("blur", function() {
$("#" + this.id + "-tip").qtip("hide");
});
See an example here: http://jsfiddle.net/andrewwhitaker/wCgAM/
The only odd thing is that you can make both tooltips show up by focusing the first input and then mousing over the second question mark. This is probably easy enough to fix though.
Hope that helps.