I'm using Angular 5 with ag-grid 17.x and am just trying to do a simple, "hello world"-type example, but having trouble getting the grid to display appropriately. I have the following HTML in my template:
<div style="width: 800px; height: 500px" class="ag-theme-balham">
<ag-grid-angular
[rowData]="rowData"
[columnDefs]="columnDefs">
</ag-grid-angular>
</div>
...and I don't get any errors, but instead of a grid, it's just rendered as one jumbled column of text.
Anyway, I noticed in dev tools that the styles that the grid was pointing to weren't there, so I imported them in the .angular-cli.json:
"styles": [
"scss/styles.scss",
"../node_modules/ag-grid/dist/styles/ag-grid.css",
"../node_modules/ag-grid/dist/styles/ag-theme-balhom.css"
],
...and this worked, but the solution doesn't seem right to me. I tried to import them in one of my .scss files:
#import '~ag-grid/src/styles/ag-grid.scss';
#import '~ag-grid/src/styles/ag-theme-fresh.scss';
...but got a bunch of reference errors (couldn't find icons, etc.).
My question is how should ag-grid styles and themes be imported into an Angular application? I've dug around in the documentation, but can't seem to find the solution that I stumbled upon, so assume it's wrong...but can't find anything that works either. Thanks for any help!
The link #koolhuman has provided is correct, I would like to add two points on top of that.
You should keep your styles.scss file reference at the last in styles array in .angular-cli.json file. The ag-grid styles you want to override will be overridden if you keep styles.scss before ag-grid styles.
Add class="ag-theme-balhom" or class="ag-theme-fresh" on you <ag-grid-angular> element. In short, whichever theme you want to apply.
Related
I'm trying import css just like I do normally in react.
import "#styles/my_lovely_component.sass"
It obviously shows the error that I cannot import global styles in components. If I change the name from my_lovely_component.sass to my_lovely_component.module.sass, the error is suppressed but the styles aren't really applied/included on my page or components.
I found out people use component styles like this
import styles from "#styles/my_lovely_component.module.sass"
const JustAComponent = () => <img className={styles.doggo_img} />
This gets annoying very quickly. I literally have been working by importing all styles globally in __app.ts, because I couldn't find a working solution to import styles like the good old(well not really old) way.
Any help will be appreciated. Thanks.
(I did consider the other styling methods like styled-jsx/components, emotion and stuff. But they're even more annoying.)
If you want to add global styles for your next project
At first you need loader in next-config.js
then read about _document.js where you can add global styles to the head.
See this minimal demo at GitHub: https://github.com/ErikVerheul/PaletteBugDemo.git
I expected that the code line palette.add(new DefaultTheme()); would do the trick. However, it did not.
When changing the Wicket version to 6.20.0 all works fine.
Did I miss something?
help appreciated,
Erik
Short answer: Remove your paragraph <p> and use a <div> instead of the <span> for the palette.
Long answer
The p paragraph cannot contain other block elements. In Wicket 6.x the palette uses a table to layout the "Available" und "Selected" options. In Wicket 7.x divs are used for that, since tables only should be used for tabular data and not for layouting. Neither tables nor divs are allowed in a paragraph though. I guess browsers are just a bit more forgiving when using tables at wrong places, hence you are seeing a somewhat correct result with version 6.x.
Another problem is that you are using a span tag for your palette. Again, the palette is inserting either a table or several div tags, but neither of these are valid in between the span tag.
So something like this should do it:
<form>
<div class="mystyle">
<div wicket:id="palette"></div>
</div>
...
</form>
Problem SOLVED. Thank you Martin! As a Wicket novice I used a version 6 example not knowing the changes in version 7. The working version is now on GitHub.
It does work fine here: http://examples7-apachewicket.rhcloud.com/compref/wicket/bookmarkable/org.apache.wicket.examples.compref.PalettePage
Please check what is different in your app.
I would like to ask how I can block richText from changing html text under source view.
I'm using Blossom module and defined richText as #Chris J advised me to do:
Add source button to Magnolia CMS richText control
Whenever I put html code in source code, switch to normal view and get back to source view the code is changed. For example the following part of code is missing :
<div class="components"> <div class="product col img-slider"> <div id="product-image" class="royalSlider productImage rsDefault"> <div class="rsContent"> <div class="rsTmb"><img src="/magnoliaPublic/resources/XXX/products/product_7.jpg" alt="">
and is replaced with folowing
<p><img alt="" src="/magnoliaPublic/resources/XXX/products/product_7.jpg" /></p>
I need to provide the possibility for the user to put html code and next to see in on the web page.
Regards
Jan
Jan. I'd ask why you are using a rich text area if you are entering HTML. It is not really designed for this usage. Would you be better off with an ordinary text field? In the STK (you mentioned this in your previous question) you will find a component that serves exactly this purpose.
Under "Configuration" you will find it at /modules/standard-templating-kit/templates/components/content/stkHTML
You will see that the template script is simply:
[#if content.editHTML?has_content]
${cmsfn.decode(content).editHTML}
[/#if]
If you want to stick with a purely Blossom approach, you may need to recreate this but it is an incredibly simple component.
Incidentally, in Magnolia 5.4 there is a code editing field used in a similar component that offers syntax highlighting. You can see this by logging into the demo site and trying to add an HTML component to the main area of the page travel/contact.
I am using CKEditor in DIV mode, as compared to an IFRAME and I am attempting to assign a class to the editor itself. I have found where to add it to things within the editor, but not the editor itself. And, I would prefer to not wrap the editor within another DIV to get the effect I want.
I am also using version 4 of CKEditor.
Edit: The following was my questions to Reinmar after he suggested the Shared Space plugin, which at least for now I have chosen not to use.
Edit: In response to Reinmar I have begun using the Shared Space plugin, and do see the potential benefits of using it over a DIV.
With that said I have the following code:
<div id="topSpace"></div>
<textarea name="data[ArchiveQuarter][description]" class="userContent" id="editor1" cols="30" rows="6"></textarea>
At the bottom of the page I have:
<script type="text/javascript">
CKEDITOR.disableAutoInline = true;
CKEDITOR.replace( 'editor1', {
extraPlugins: 'sharedspace',
sharedSpaces: {
top: 'topSpace',
}
});
</script>
It currently creates the toolbar within the top space, and has the textarea, but both of them are disabled. I probably just messed up some of the configuration, but I'm not sure what.
I would greatly prefer it to use the textarea configuration as it is part of a form instead of extracting the data from inline.
You might be interested in using Shared space plugin:
addon page,
sample.
I'm proposing this instead of using div, because I've got mixed feelings regarding divarea plugin. Your original container is wrapped with editor's structure what changes the real context. IMO it's better to use real inline editing + the shared spaces feature to place toolbar and bottom bar where you need them.
Update:
When you're using inline editor, you don't need textarea. Textarea is only a data container which framed or div based editors replace with themselves.
Inline editing is all about editing real existing elements. So this can be your HTML:
<div id="topSpace"></div>
<div class="userContent" id="editor1"><h1>My page</h1><p>Fooo!</p></div>
And JS:
<script type="text/javascript">
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline( 'editor1', {
extraPlugins: 'sharedspace',
sharedSpaces: {
top: 'topSpace',
}
} );
</script>
Note that I used CKEDITOR.inline not CKEDITOR.replace.
And the huge advantage of inline editing is that that <div> is a real element on your page - it is not wrapped (as in div based editor) and its contents is not moved to the frame (as in framed editor). So your content will inherit styles of your page.
The downside is that you need to implement custom data saving, because there's no form. The simplest way is to add a "save" button which clicked will send editor.getData() via AJAX to your server.
BTW. You probably was confused by the fact that in the shared spaces sample 2 editors are framed and 2 are inline. All of them reuses one top space and one bottom space.
BTW2. To make use of inline editing you don't need shared spaces in fact. Then the "floating toolbar" will be used as in here: http://ckeditor.com/demo#inline
I am using the fullpage plugin:
I am trying to create a way for my users to select multiple layouts(I have about 6 layouts), in the layouts I have different
CSS rules that I would like to for example the background color
so in my layout (and this is just an example for brevity) I have
<style>
body{background-color:red}
</style>
and then my layout.....
<style>
body{background-color:green}
</style>
and then my layout.....
You get the idea ;), (I would like to use stylesheets but this did not seem to work either).
If I go into the editor and select the layout it looks great, until I hit save.
It is removed from the editors returned value (I am saving to a DB).
I have tried multiple things:
If in the layout I do this:
<style><!--Start Style-->
body{background-color:red}
<!--End Style--></style>
and then my layout.....
when the user selects the layout the background color is not displayed but this is:
body{background-color:red} body{background-color:red}
but when I save it saves correctly???.
I have this as my setup
valid_elements : "*[*]",
extended_valid_elements: "style[type]",
I have tried multiple ways, looking for quite a while through tinyMCE's documentation and Googling and no luck.
Can anyone solve or suggest a better approach(The idea is to only have them select one layout which will do everything background color and layout)?
Thanks in Advance!
You should create your own css file for your content (configuration seting content_css) and add the desired class(es) to the formats configuration parameter. If you use the style plugin users are able to select the class from the style-drop-down and everything should be fine.