I used a SmartSortable snippet by Pete Hunt from React.js Google Group that intergates jQuery UI sortable with React.
Unfortunately, after using it, editing input fields makes the text cursor to just to the end of the currently edited input field.
http://jsfiddle.net/NV/jfkn5/
Removing <SmartSortable> from the example fixes the problem.
Why is it happening? I believe, the <input>’s value get’s updated despite being exactly the same; I don’t understand why.
Related
I was just wondering If I could get some thoughts and feedback on my todo app to see where I could improve. Also, one current issue I'm having the is with the checkbox.
I'm using the materialize framework to help create the UI but I can't get the materialized styled checkbox to function properly. My way around that was to place the standard checkbox over the materialized styled one with the help of positioning and Z-index, with the opacity at 0.
So the checkbox can still function while the materialized checkbox displays. The issue with that is that If I input to many characters for the task the standard checkbox moves.
Link to todo-app()
md-autocomplete doesn't show listed suggestions when the chips are closed, for varying list of suggestions.
Scenario: I want to show suggestions only for the chips that are not added. Initially, all the chips are added, so there are no more chips left to add - no suggestions, which is fine. When a chip is closed and the input field is focused, there are still no suggestions but ideally there should be one chip in the suggestions list. The suggestions appear only if one or more characters are typed in.
md-autocomplete should re-render the items even when the query string length is 0, but seems like it is set to 1. This can be inferred by observing the filter function defined in md-items which doesn't get triggered, when the query string is empty.
Here is the CodePen link
Delete the added chips and focus on the input field. Observe that no suggestions for the closed chips are being displayed by md-autocomplete.
This is a bug with Angular Material library. I have raised an issue on Angular Material Github repo. A fix has been committed and is under review. Most probably, the patch should be available in the next release. Here is the link to the issue.
I have running JQGRID version 4.9.1, thanks to Oleg.
I am trying to add search functionality to the columns. I am trying to implement the search input fields on top of columns. When the user types something, it show only those values.
I am attaching an image hoping to clarify my question.
I have found the solution looking at the source code on the projects gitHUB.
It is activated by default I believe. In my case, I had it turned off in one of the settings.
I am working on a WYSIWYG editor (customising someone else's code) and have encountered a few problems that I just can't seem to overcome.
So far I have been able to get most custom divs working, but I am having some trouble with a few things:
Problem 1: If the cursor is before a div element, I am able to press delete and begin to remove the contents of the div without removing the actual div itself. This is how the element should look within the WYSIWYG for example:
But after pressing delete when the cursor is before the element, I get the following:
How can I check if the next element is this custom div and cancel a delete key press?
Problem 2: I am also able to press backspace after an element, which causes any text after the element to appear inside it, like so:
How can I check if the previous element is my custom div and cancel a backspace key press?
Problem 3: When inside a section (where the 'put content here' text is), I am using a div with the attribute contenteditable="true". Every time I press 'enter' within this div, a new <div> tag is created, rather than a line break tag (<br>). How can I force a line break tag to be created instead of a div element?
I have looked far and wide on stackoverflow and have yet to find a proper solution to the problem that is cross-browser.
Disclaimer: I am a CKEditor core developer.
If you want to customise this there are three ways:
You can spend few months (or more) on learning about contenteditable, ranges, selection and all that stuff and trying to implement your custom handlers. You could of course spend only one week or month on that, but the result won't be great, believe me.
You can choose good, existing WYSIWYG editor.
You can lower your expectations regarding the expected behaviour ;).
Now, if you would decide to use CKEditor there's one new feature called Widgets which was introduced in recently released CKEditor 4.3 beta (4.3 stable is going to be released in max. 2-3 weeks). As far as I can see it may be very helpful in your case. Check out the Introduction to Widgets guide. In very short - it is possible to configure how enter key behaves in so called "nested editables" as well as to secure integrity of your custom markup.
I am using the KendoUI html editor, in inline mode. It works fine, but I have found some problems with the arranging of toolbar items. Namely:
I have added custom tools to the toolbar. They are not correctly 'tagged' with the k-group-start, or k-group-end classes, and thus thir edges, and margins are not correct.
I can't influence where the toolbar puts in the 'k-group-break' item (what makes a linebreak on the toolbar).
I have tried to modify these in the selection changed event (according to the demo page, that gets fired every time I click into the edited area), but the kendo built-in logic overwrites my changes after that.
Has anyone encountered this problem? What could be a good solution? I am pretty lost, since I haven't found anything on this topic in the kendo documentation, so some hack might be needed.
Just add a tool ".Separator()" in your tools list and it will create an empty "li" ..
<li class="k-separator k-group-start"></li>
you can than style this element to create the spaces, I have made this li as a block element so it pushed everything which follows down.
Hope this helps.
Cheers