I use active column to generate dynaicly icons like this:
{xtype:'actioncolumn',
width:25,
align: 'center',
items: [{
icon: g_settings.iconUrl + 'view-icon.png' ,
tdCls : 'someClass',
handler: function()
{
alert('HI');
}]
now to add the property which I want (in this case cursor:pointer) in ExtJS forum is written to add
.someClass
{
cursor:pointer;
}
But I'm not sure where this should be written.
Thanks
Leron
Put it in your CSS file that you have included on your page (you have a CSS file, right?).
For example like this:
<link rel="stylesheet" type="text/css" href="styles.css" />
And then put the style definitions you want in the styles.css file. That's all there is to it.
Related
We are using Vite and would like to manually load an external CSS file. Internally to the project we are using CSS modules. We need the external CSS file to load after the CSS generated by CSS modules.
In vite.config.js I have tried to add a plugin that adds the stylesheet link to the head section as follows.
function externalCSSPlugin() {
return {
name: 'external-css',
transformIndexHtml: {
enforce: 'post',
transform(html, ctx) {
return [{
tag: "link",
attrs: {"rel": "stylesheet", "type":"text/css", "href": "/*<link to css>*/"},
injectTo: "head"
}]
}
}
}
}
However, this always results in the stylesheets generated by CSS modules to be appended to the head after the external CSS:
<head>
...
<link rel="stylesheet" type="text/css" href="/public/external-css.css">
/* styles generated by CSS modules */
</head>
We don't want this, as the external CSS sets some CSS variables.
How can we force the external stylesheet to be added to the end of the head section?
The problem only occurs while using the dev server (and not in a build). Since the CSS module styles are always appended to <head> in the dev server, you can ensure your <link> is after those styles by injecting into the beginning of <body>. This should be done for the dev server only (in which case the plugin's ctx.server exists), as Vite already appends the <link> correctly to <head> in production builds:
function externalCSSPlugin() {
return {
name: 'external-css',
transformIndexHtml: {
enforce: 'post',
transform(html, ctx) {
return [{
tag: "link",
attrs: {"rel": "stylesheet", "type":"text/css", "href": "/*<link to css>*/"},
injectTo: ctx.server ? "body-prepend" : "head", 👈
}]
}
}
}
}
demo
<template>
<div class="container">
<head>
<link rel="stylesheet" href="~assets/css/style-light.css" />
<link rel="stylesheet" href="~assets/css/login-light.css" />
</head>
</div>
</template>
Importing css like above results in this error
vue.runtime.esm.js:5717 GET http://localhost:3000/~assets/css/login-light.css net::ERR_ABORTED 404 (Not Found)
Is there really no other way loading css other than putting the whole css in the template?
The first thing you need to know is, you can't declare a html head inside any place, neither in yours tamplate, neither in yours components, neither in yours pages, neither in nowhere.
Keep in mind that you can't use a html tags for this, you will use a json schema.
take a look https://nuxtjs.org/guide/configuration for more detailed explanations.
Now about you doubt if you want to import the CSS as globally, the correct place is inside your nuxt.config.js, inside this file, you have a property called head, and inside the head we will configure all the imports.
So, inside nuxt.config.js find your head session, and then create new property called css, some thing like this:
head: {
css: [
'~/assets/style/app.styl',
'~/assets/style/main.css'
],
}
...
Another way, is import your css directly inside your component, for this you can do some thing like this:
<style scoped>
#import '~/assets/style/main.css';
</style>
OR
<style scoped src="#/assets/styles/mystyles.css">
</style>
In Nuxt, you will need a CSS loader instaled in your application too, so have sure you had intalled a "stylus" and "stylus-loader" in your app.
try to impot your css files in script like this :
<script>
import "#/assets/css/style-light.css";
import "#/assets/css/login-light.css";
///
</script>
EDIT: changed ~ to #
You could bring your files in using the head method like so :
head () {
return {
link: [
{ rel: 'stylesheet', href: '/style-light.css' },
{ rel: 'stylesheet', href: '/login-light.css' }
]
}
}
You should also move these css files into the static folder. See this discussion on the Vue forum https://forum.vuejs.org/t/nuxt-import-css-file-and-js-file/42498
I'm having trouble with AMP and CSS in Next.js. In my head component I have:
<Head>
<style amp-custom>{`
// CSS Here
`}</style>
</Head>
In the HTML source it shows up as <style amp-custom=""></style><style>(CSS Here)</style>
In the console I get this error: The mandatory attribute 'amp-custom' is missing in tag 'style amp-custom (transformed)'.
How can I work with AMPHTML's rules on CSS and Next both? Every other method I've tried (such as importing from a file using #zeit/next-sass) causes the CSS to not be rendered at all. This is the only working version I've found.
Try this:
<Head>
<style
amp-custom=""
dangerouslySetInnerHTML={{
__html: `
amp-img {
border: 1px solid black;
}
`,
}}
></style>
</Head>
...It has to be: <style jsx>...</style>. Very dumb mistake that I've been looking for workarounds on all day. :/
As of Sept 2020, I've been having this issue too. I'm new at this, but with no help from the official tutorials. I did find a workaround.
First, I want to point out a couple of things from Next.js that they tell you.
non-AMP page styles are usually placed in _document.js from the next.js example.
</Head>
<style jsx global>{ reset }</style>
<style jsx global>{ globals }</style>
<body>
<Main />
<NextScript />
</body>
They mention in the tutorial to put <style amp-custom>. They don't say where, but it should be within the <Head></Head> of index.js (or whatever .js file for individual pages) OR _document.js for every page.
Ok, sounds good, BUT it's partially wrong!
I will explain what I found it does when turn on amp pages on in Next.JS.
So on an individual page, such as index.js, you need to this code at the top:
export const config = {
amp: true,
}
Then you have to put this in the return function:
const isAmp = useAmp()
Standard instructions from the tutorial. Now AMP is turned on, here's what happens:
Anything in <style amp-custom> is turned into a <style>
anything that is in <style jsx> is turned into a <style amp-custom> tag.
In addition to #2, it injects a unique random index that ruins any css code in that gets put into the generated <style amp-custom> tag.
<style amp-custom>.jsx-2373233908{/* your CSS code that you put in <style jsx> from before */}</style>
and that .jsx-########### throws a "/ error CSS syntax error in tag 'style amp-custom' - incomplete declaration." when you try to compile.
Is this opposite and odd behavior. YES. I don't get why it does it, but I'm a newb.
So my workaround goes like this:
Install your CSS framework package or put your CSS file into the styles folder (let's say located at : ./styles/styles.css)
I also add raw loader from your terminal window. Because I like to put my css in a file, not type it inlined with the code. Let's be realistic, you're going to separate CSS and you'll need to load that file in.
npm install raw-loader --save-dev
Load the CSS in your _document.js (here's my whole _document.js). I use "}" and "{" with fixCSS to escape the .jsx-########### and the injected code magically disappears.
import Document, { Html, Head, Main, NextScript } from 'next/document'
import styleCSS from '!!raw-loader!../styles/styles.css';
const fixCSS = `}${styleCSS}{`;
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html lang="en">
<Head>
</Head>
<style jsx>{`
${fixCSS}
` }</style>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
That's it. Now your imported CSS is shown on AMP pages. Remember this is for sept 2020 using these packages in my package.json:
"dependencies": {
"amp": "^0.3.1",
"next": "^9.5.3-canary.25",
"next-env": "^1.1.1",
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"devDependencies": {
"cssnano": "^4.1.10",
"now": "^19.2.0",
"raw-loader": "^4.0.1"
},
Try:
<style jsx amp-custom>
`
... my css
`
</style>
I just tested it out and it worked okay. Not the best approach, NextJS should document the ways to add css in somewhere.
This worked:
const ampStyle = `h1{color:red;}`
<style jsx>{ampStyle}</style>
I'm trying to integrate a bootstrap dashboard template into an Angular8 project. but I'm getting the resource not found error when I link the css file in index.html,
<link rel="stylesheet" href="./src/assets/css/theme.min.css" id="stylesheetLight">
<link rel="stylesheet" href="./src/assets/css/theme-dark.min.css" id="stylesheetDark">
In my template they used an id attribute in each stylesheet. Because of this id attribute (id="stylesheetLight"), I'm not able to import it into; neither style.css nor angular.json. And without specifying the id, the design will be broken.
The error I'm getting when I import in index.html:
How can solve the resource not found error? Or is there any way that I can specify the id in style.css as #import ?
You have to add it in angular.json file:
"options": {
...
"styles": [
"src/styles.css",
"src/assets/css/theme.min.css"
"src/assets/css/theme-dark.min.css"
],
"scripts": [],
"assets": [
...
]
}
In Angular, adding style sheet like <link rel="stylesheet" href="./src/assets/css/theme.min.css" id="stylesheetLight"> isn't the correct way
I have the same problem, reason why I want to add id is because i want to do this from https://material.angular.io/guide/theming
<link id="themeAsset" rel="stylesheet" href="/path/to/my/theme-name.css">
function changeTheme(themeName) {
document.getElementById('themeAsset').href = `/path/to/my/${themeName}.css`;
}
so i could change style for whole app styles by click instead of adding classes to every component
You can create a stylesheet, e.g. "shared.css", and add it to angular.json file:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/shared.css"
],
and use your styles conditionally:
[class.my-class]="foo=='light'"
I'm trying to add a background color to an event but with no luck.
$('#calendar').fullCalendar('renderEvent', { id: 1, title: 'hello', start: selected_date, allDay: true, color: '#FF0000', backgroundColor: '#000000' }, false);
Any idea why this won't work? The border color seems to work but not the backgroundColor
If you add both the stylesheets then the backgroundColor will not work.
<link rel="Stylesheet" type="text/css" href="/Content/fullcalendar/fullcalendar.css" />
<link rel="Stylesheet" type="text/css" href="/Content/fullcalendar/fullcalendar.print.css")" />
After removing the fullcalendar.print.css then the backgroundColor decided to render correctly.
Add the media attribute
<link href="../css/fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css" />
<link media='print' href="../css/fullcalendar/fullcalendar.print.css" rel="stylesheet" type="text/css" />
I was setting it up in my bundle config in asp but that didn't add the media property so it was an issue.
The background color for events is defined in the fullcalendar.css file under the section
/* Global Event Styles
(Line 261, in version 2.0 beta)
You can access it programmatically like this:
$('.fc-event').css('background-color','#3a87ad');
Try to make it stick (change false parameter to true, at the end), probably a new event is overlapping and make it change properties.
"Normally, the event will disappear once the calendar refetches its event sources (example: when prev/next is clicked). However, specifying stick as true will cause the event to be permanently fixed to the calendar.", from Documentation, http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/
Here is how I did it: I placed backgroundColor in the chart event:
chart: {
type: 'column',
backgroundColor: 'transparent'
},
try this may be it works for you.
background: '#eeeef0
Do not write backgroundColor.