I'm trying to transition an existing PrimeNG Datatable over to the newly-released TurboTable spec, and I've been able to get everything more or less working easily, but I lost the auto-generated sort direction indicators on column headers.
Is there a built-in solution for displaying a sort indicator based on template binding provided by p-table, or do I have to attach to the p-table's (sort) event, figure out which column is sorted and what direction, and then update my template from a component method?
There is a SortIcon component. Look at this example:
<th *ngFor="let col of columns" [pSortableColumn]="col.field">
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
If anyone had the same problem as me - had the <p-sortIcon> tag but the icons didn't show anyway - try installing the new PrimeIcons package (npm install primeicons --save) and including its .css file as a dependency (<link rel="stylesheet" type="text/css" href="/node_modules/primeicons/primeicons.css" />).
Related
Unfortunately there's no details/summary element in the default CKEditor configuration of TYPO3 and I'm looking for a way to add it.
What I've been trying to do:
I searched and found a widget on https://ckeditor.com/cke4/addon/detail , but it's repository on GitHub has been archived and the widget does not work as expected. It requires 'api,widget' and this generates a JavaScript error:
[CKEDITOR.resourceManager.load] Resource name "api" was not found at "/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Contrib/plugins/api/plugin.js?t=K24B-4e13cc129f".
When removing this requirement for "api", there's an error regarding line 72
CKEDITOR.api.parser.add(item, el);.
Then I found a similar widget at GitHub , which looks like an older version of the former without requirement for "api".
It already looks quite good, but is still a bit buggy: the HTML structure is changed when saving and the summary is duplicated. When switching to the source code, the HTML structure specified in the template ...
<details><summary>Summary</summary><div class="details-content"></div></details>
… get's partially lost.
I'm not sure if the widgets are buggy or if the editor is limited by the integration into TYPO3 and I was also not able to combine the two in a way that would lead to a working solution.
Update (Jul 22):
I successfully modified the Creating a Simple CKEditor Widget (Part 1) example to create
a widget with the following HTML structure:
<div class="expander">
<p class="expander-title">Title</p>
<div class="expander-content"><p>Content...</p></div>
</div>
With the help of a small JavaScript snippet and some CSS it now behaves almost like a details-summary element, but is not quite as good in terms of SEO and accessibility.
If I replace the elements <div class="expander"> and <p class="expander-title"> with <details> and <summary> in the widget, it unfortunately doesn't work properly anymore and changes the structure when saving. For some reason the RTE treats them differently.
I have already manually added the following to the RTE configuration:
processing:
allowTags:
- details
- summary
allowTagsOutside:
- details
- summary
Previously (I thought?) it was possible to put HTML into vuetify hints but for me this is no longer working. For example, in one of my components I have:
<v-checkbox
v-model="create"
label="Nice label"
persistent-hint
hint="<span class="red--text">Red hint</span>"
/>
This hint used to display in red but now I see the full HTML code. Has something changed or am I doing something wrong?
In the Vuetify forum, MajesticPotatoe pointed me towards the bug report https://github.com/vuetifyjs/vuetify/issues/9647. This gave the following slots workaround, which works in my code:
<v-checkbox
v-model="create"
label="Nice label"
persistent-hint
hint="<span class="red--text">Red hint</span>"
>
<template v-slot:message="{ message, key }">
<span v-html="message"></span>
</template>
</v-checkbox>
It seems that this used to work without slots before the patch https://github.com/haggys22/vuetify/commit/f0d5edd7ddf7e01ba057b7f3d14604199b6db68d was merged.
behaviour changed from 1.5.19 to 1.5.20
1.5.19 (and before) treats html tags as expected
1.5.20, 1.5.21 treat html tags as simple text
'hint' is the 'string' type so you can't add HTML tags. Here is the screenshot from documentation: https://prnt.sc/qlag61
So, I think you can apply red color from CSS / SCSS using this class name '.v-messages__message' if you really need red color in hint.
I have this line in code into a longtext field in ckeditor:
<div style="width:100%"> <canvas id="canvas3"></canvas></div>
but when I save then delete and replace by:
<div style="width:100%"> </div>
so delete all: I use to show graphics. Any idea to solved it?
Thanks
You need to add config.extraAllowedContent = 'canvas[*]{*}(*)'; inside your config.js. Basically none of existing plugins has reported canvas element to Advanced Content Filter (ACF) thus they get removed. This filter lets you decide what tags, attributes, styles and classes can be used inside the editor.
Once you add this, please simply switch to source mode. If canvas are there it means CKEditor is fixed and it no longer removes that tag. If the tag, despite being in editor, still isn't saved in your data base, please check your server-side code for potential HTML filters.
If you wish learn more about ACF, please see:
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_acf.html
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_advanced_content_filter.html
https://ckeditor.com/docs/ckeditor4/latest/guide/dev_disallowed_content.html
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-allowedContent
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-extraAllowedContent
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-disallowedContent
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_filter.html#method-addTransformations
I've tried to implement the formatting attribute for Dandelion Datatables as specified here using Thymeleaf to no avail, like so:
<table dt:table="true" dt:serverside="true" dt:url="#{/somefnplace}">
<thead>
<tr>
<th dt:property="someCurrencyField" dt:format="{0, number, #.##}">
</tr>
</thead>
</table>
...but this does not do anything. Anyone got an idea on how this is supposed to work, or do I have to create render functions for every column because this feature is broken?
Unfortunately, the dt:format attribute is not compatible with AJAX sources. See the last column of the link you've mentioned.
In the upcoming version, it will simply be removed, because using DOM sources, expression utility objects meet all needs perfectly.
So yes, currently the only way is to use the dt:renderFunction attribute, which will refer to a rendering function, one for each column to need to display in a specific format.
I'm trying to change the style of a blog post (for instance change the title color), based on the labels associated to the post.
I'm a bit new to the templating, so I though I would be going to add a class with the label in the title <h3> element, and then add my CSS rules.
So I found this which would generate a proper list of labels separated by a space:
<b:loop values='data:post.labels' var='label'><data:label.name/> </b:loop>
However, it seems the validator does not let me add this inside the class attribute as follow:
<h3 class='post-title entry-title <b:loop values="data:post.labels" var="label"><data:label.name/> </b:loop>'>
From there, I found half the solution. Apparently, I should use expr:class instead of class as follow:
<h3 expr:class='"post-title entry-title " + data:list_of_labels'>
So now:
- How can I build this variable data:list_of_labels? (basically how to set a variable)
- Is there a full description of the template syntax somewhere?
- Is there another way to go around this?
Thanks,
JB
This should do it. Using XML entities allows you bypass the XML validation and move the Blogger functions to where you need them. Longer explanation here: http://www.karlhorky.com/2012/06/add-blogger-labels-to-post-as-css.html
<div class="post<b:if cond="data:post.labels"><b:loop values="data:post.labels" var="label"> <data:label.name></data:label.name></b:loop></b:if>">
<data:post.body>
</div>
There is no way to set variables in the blogger data xml, however you can set variables using javascript.
There are many pages on the blogger data xml. Google is your friend. For example this one.
You are on the right track: do a loop, use javascript to check for the combinations you want, change the style properties or load a css file dynamically.