Need to Highlight multiple words. It should not highlight any of HTML tags or HTML attributes in the HTML code based on the input received.
Simply put want to implement the CTRL+F function Within in my project
It will need application level filtering.
When you receive the document or comment or any kind of text, check if you have something in the search field.
If Yes, find and replace the contents of text with special HTML & Class to highlight specific part.
You can check the implementation of common React Autocomplete libraries. The highlight is in the list but you can use same approach in the Global manner.
I'm trying to set up a form.IO form that will let me use the value of a field as part of the css class. This needs to take effect when the item is in the table view. If it also influences the form view that's ok because we don't have the element showing in the form view.
Specifically I want to get the following output:
<div class="[value]Stoplight"> </div>
The values from the object are going to be colors e.g. "yellow" so the result would be:
<div class="yellowStoplight"> </div>
Once I have that I can have my CSS file specify a background image based on the class and make it display the way I want.
Alternatively if I could put an html element of type image and have the source be different based on the value of the object that would work too.
Any ideas on how I could make either of those work? I'm not finding anything that relates to "dynamic css". Perhaps I'm looking for the wrong search criteria.
I have kendo grid which has some columns where it's showing text of the underlying value.
For e.g. Contract Name- its showing ABC as the text but value is say 10.
When we apply sort on datasource, it sorts it using the values i.e. 10 and not the text.
Example : http://dojo.telerik.com/epOnU
I want to sort the datasource on the text of the column and not on the value.
You can change your implementation using sort.compare function. I also use a template function instead of column.values option.
http://dojo.telerik.com/#uygard/opIbE
I have a combo box in ext js , which is dynamically populated. Nothing very complex...and it populates correctly. This is the structure of the display values of the combo:
Name: [dynamicName]
Gender : [dynamicGender]
Age: [dynamicAge]
The objective is to have the Name:, Gender: and Age: inside <b></b> tag. The dynamic values should be in normal text.
Let's say I define an array from which i will populate the datastore of the combo. This is the array:
var arr=[[id1, <b>Name:</b>],[id2, <b>Gender:</b>],[id3, <b>Age:</b>]]
The thing is when i click the dropdown, in the list, they show up proper. As soon as the user selects an option, let's say Name...in the selected option, the formatting goes all wrong. By wrong I mean, the bolded text is not shown. Instead , the string literal <b>Name:</b> dynamicName is showed.
How can i use tpl syntax to solve this?
You can solve this with css. Here is one way:
In the config for the combo box, add:
itemCls: 'make-bold'
(or name this class whatever you want)
Then, in a style sheet, add (using the same name):
.make-bold input {
font-weight: bold;
}
This will style your input box (what's displayed after you've selected from the combo box) in bold.
While the option list is made of <div> elements, thus allowing for styling, the field itself is just an <input> element, and these do not support content styling.
So the answer is: no, you can't.
The extended answer is: I'm pretty sure someone did an alternate implementation of combobox component, that uses different HTML markup and allows for styled content in the field. Try asking on ExtJS forums.
I had a similar issue. I want to have a few selections in the combo list bold, but I don't want the HTML markup in the input when the value is selected:
1. Use a Template as this tutorial explains, see Using templates to change the look of combo box items.
Or
2.Use a Select Listner and Regex. You can put a listener on the "select" event and then simply use some regex to strip HTML tags like /<[^>]*>/g to remove HTML tags from input field. Now your HTML used to format the list won't affect the input.
I am having some issues getting TinyMCE to be as flexible as I need it to be. In my editor (used in a cakePHP-based app) I am not allowing users to edit the html, so we are relying entirely on the WYSIWYG. Unfortunately, TinyMCE is currently not allowing users to apply two CSS classes to the same text. Whichever style is applied last wipes out the original.
To give an example: If a user wants to designate a line of text to be both 'huge' and 'highlighted' (both CSS classes), they would highlight the text and choose 'huge' from the CSS style dropdown, then highlight the same text again and choose 'highlighted'. What results is text that only has the 'highlighted' class applied to it.
I can work around this problem currently by just adding an extra character to the text I am trying to style, apply the 'huge' class to that, apply the 'highlighted' class to the original text, and then delete the extra character. But, this really is far from an ideal solution.
Does anyone know of a way to resolve this issue?
You will have to write your own plugin looking similar to the style plugin.
When the user selects a class from the dropdown you just add it to the selected text instead of replacing it.