Is using [ngClass] and ternary expressions, the same as using *ngIf in terms of hurting the recycling process of elements in ListView and RadListView?
Suppose I have a Label that should sometimes show "missing" text, in the color of red, and sometimes just show other text in black.
What's the most efficient way to show this in NativeScript?
Option #1:
Getting some data from the backend with a boolean flag, suggesting
some element should have the red "missing".
Inside a template in the HTML, conditioning the text color css class with the boolean.
Inside the HTML, conditioning the word "missing" with a ternary expression.
Example:
<Label [text]="!item.isMissing ? item.title : 'missing'" [ngClass]="{'missing-text': item.isMissing, 'regular-text': !item.isMissing}"></Label>
Option #2:
Getting some data from the backend with a boolean flag, suggesting
some element should have the red "missing".
Using template selector and create a template (marked A) that has a red "missing" text.
creating a different template (marked B) for all other elements that are displayed regularly.
Example for the Label in template A:
<Label text="missing" class="missing-text"></Label>
and for the Label in template B:
<Label [text]="item.title" class="regular-text"></Label>
Option #1 works but Option #2 is comparatively more efficient as it wouldn't have to update styles while recycling.
Related
Vuetify has a v-text-field input which is basically combines an HTML form <input type=text...> with a <label> and packs it up in various nested <div> tags(https://vuetifyjs.com/en/components/text-fields/).
By default it has the label sharing the same space as where the value is entered. They developed a behavior so that when a user starts typing in the text field, the label floats above the text field.
There is a property called 'single-line' which prevents floating of the label. I want the opposite effect, where the label is always floating above the text field regardless of whether or not there is input. Is this possible to do?
When I inspect the HTML I notice that the label (when floating) has a class appended to it called 'v-label--active'. I am not sure how to attach that class name to the label since I don't have direct access to the label tag. Instead, I have a <v-text-field > HTML tag which auto generates the HTML <label> tag when compiled.
From what I've read in the documentation there does not seem to be an option for your desired behaviour.
However a work around could be as follows:
When the text field is focused this applies the v-label--active class on the label element as you mentioned. This class applies the css property transform: translateY(-18px) scale(.75).
With your own custom css/scss you can target the v-label class and apply the same transform: translateY(-18px) scale(.75) on it. This will generate your desired effect. When you focus on the input field the text will turn blue (or whatever active state colour you have set).
See example: https://codepen.io/jt-totty/pen/WNoKNmM
I'm using Ublock origin to change how my pages look and hide annoyances.
I want to hide text in an element instead of filtering the object. It's a span object with an unique class that has a specific height. It sits at he top of the page and when hiding the element, a whole chunk of the page moves up, while other objects don't, making the page look bad.
Is there a way to write a filter in ublock origin that replaces the text inside the object with a space?
<span class="unique-id">text to hide</span>
Resources:
ublock static filter wiki
ABP filter guide
How about:
yourWebsite.com##.unique-id:style(display: none !important)
I'm using CKEditor 5 on my website in order to allow users to generate PDF templates for their company.
My issues is, that once I take the data out of the ckEditor, every styled element has a class="CSS-Class-Here", which is problematic due to the fact that when I convert the HTML contents of the CKEditor to PDF, the PDF doesnt know any of these classes.
Is there any way to get CKEditor to save these classes as inline styles?
I know that its possible to create a plugin for a specific element for a specific style, but I want everything to act this way, not something specific.
Also, It's impossible to just inject the styles into the PDF itself, due to the fact that ckEditor keeps their styles in javascript functions and creates them on demand.
For example:
Yellow highlighted text comes out as:
<mark class="" marker-yellow "">Random Text</mark>
I would like it to come out as:
<mark style="background: yellow">Random Text</mark>
Meaning that the style that's present in the marker-yellow class should be applied inline directly to the element itself.
With CkEditor, When I create an A tag and later apply some custom formatting (like color text for instance), the resulting source looks like this:
<p><span style="color:#1abc9c;">some text</span></p>
As you can see, the formatting is around the text but INSIDE the A tag.
I have a personal plugin that outputs a SPAN tag with a specific class. In the wysiwyg editor, when I select the text and apply the same formatting, I get this:
<p><span style="color:#1abc9c;"><span class="command3d">Some text</span></span></p>
This time, the formatting is not simply around the text. It is applied around the SPAN tag.
How can I control this behaviour? I would like to get this result instead:
<p><span class="command3d"><span style="color:#1abc9c;">Some text</span></span></p>
Thanks
Unfortunately there is no ability to control the order of inline styles (based on span tags) inside editor's instance. The only sensible way to achieve desired result is to start with applying text color and then apply your custom style.
However there are two methods to convert output of the editor to the correct format. The first is to add custom handler to editor's data processor via toDataFormat event to check ancestors of span.command3d and swap them in places if necessary. However it's a little bit troublesome as you must traverse through all content, therefore it's easier way: add element callback to editor's filter. Example.
I have a CKEditor widget resembling a tab-module.
As editables I have defined a span.title and div.content.
When I am in editing mode inside a span.title and then paste something using CTRL+V, the span gets broken and I have two spans. As if it gets divided on whatever position I paste.
When I am in editing mode inside a div.content and then paste something using CTRL+V, the contents of the clipboard are correctly inserted into that div.
Is it because span is an inline-element and div is a block-element and CKEditor doesnt allow pasting into inline-elements?
Can I somehow change this behaviour?
CKEditor allows pasting of block and inline elements (keep in mind that content filtering (ACF) can be used which also affects pasting) so it is probably not the issue in this case.
I would also make sure that the content which you are trying to paste does not contain any HTML which may cause the behavior you described.
If you could provide widget HTML/template or code which you are using I will be glad to investigate this issue in more depth.
I had this issue when trying to have a <cite> element as an editable. Trick was to tweak the CKEDITOR.dtd properties.
// This prevents the pasting from splitting parent element.
delete CKEDITOR.dtd.$removeEmpty.cite;
// This tells the editor to allow editing in this element.
CKEDITOR.dtd.$editable.cite = 1;
I imagine this would affect the behavior of all <cite> elements in any editor currently loaded. Not ideal in all cases for most elements, but for our requirements for a blockquote/pullquote widget, the <cite> element is only allowed inside our <blockquote> elements in any editor.