I've noticed strange behaviour using material ui tabs with i18next npm package (useTranslation hook) - for localize my buttons. The main problem is: bottom indicator doesn't recalculate its position after page reload, but when I comment my useTranslation hook - everything is ok. my hook looks like this at top of component:
const { t: tc }: UseTranslationResponse = useTranslation('common');
I don't see any dependency here or any asynchronicity problem why this happens. Any ideas? Thanks
I faced the same issue today. Just like you, I'm using react material tabs with i18next.
To solve this problem, I forced namespaces load on i18n initialization.
I don't know why this bug happens, but this workaround works for me.
i18n.init({ns: ['components', 'pages', 'common', 'generalData']})
You're probably loading your translations asynchronously? Using i18next-http-backend maybe?
Then you may not be using Suspense and also not waiting for the ready flag: https://react.i18next.com/latest/usetranslation-hook#not-using-suspense
I'm currently studying jquery widget. What I did was convert a working javascript code into jquery widget.
So the goal would be able to create a chart and update it when new data arrives. In the code that I'm going to show you, I just used timeout to update the data.
JSFIDDLE
If you're using chartjs, you'll definitely know that you need to call destroy to delete the iframe created by chartjs then recreate it to successfully update the data.
I was able to redraw the chart but when you hover it, I could still see the previous chart. I know that that kind of scenario happens only if I didn't destroy it properly. But I have this code which is supposed to destroy the iframe.
update: function() {
this.destroy();
this._create();
}
1) If I'm not deleting the iframe, then what is?
2) how will I correct this code?
I think the problem with my code is when I used this then called destroy. Because when you say this I think it is referring to the element created not what new Chart(...) returns. So what I did was save the value returned by new Chart(...) then used that to destroy the chart. see how I did that in the jsFiddle
options : {
labels : [],
data : [],
pieChart: null
},update: function(){
pieChart.destroy();
pieChart._create();
}
If you have additional or more meaningful answer than mine, please feel free to post it as well. Thanks :)
The Ionic app I'm working on displays a $ionicPopup when it starts and after closing the popup, the two sidemenus the app contains don't work at all. If I remove the popup from the code, the sidemenus work well.
Does anyone have an idea what the problem could be?
Add the following code to the controller that contains the slidebox:
$scope.$on('$ionicView.enter', function(){
$ionicSlideBoxDelegate.update();
})
I had the same problem than you. I resolved with this.
Solution
I was facing this same problem.
In my case, this was happening because, the enable-menu-with-back-views="true" option in ion-side-menu was set false.
It got back to work when setting it to true. =)
I am creating a CKEditor plugin, using version 4.2.1. I am trying to follow the tutorial on a Simple Plugin. However, the text inputs in my dialog window are not editable / clickable in the dialog, even when I just copy in the entire abbr plugin from the tutorial with no changes.
I can still click the dialog tabs, OK / Cancel buttons, and drag the dialog around. I have added in other elements (like selects) to the dialog in my custom version, and I can interact with those.
When I check the text input elements in Chrome's Dev Tools, I can add text via the Console / jQuery and it appears. I get no failures in the Console.
$('#cke_229_textInput').val('help');
Will add text to the text input and display it on the screen. But I can't interact with the element via mouse / keyboard / browser. Is there something obvious in the CKEditor configuration that I am missing? Sorry if this is a really stupid question--first time working with CKEditor. I have also searched the CKEditor forums and Google, without finding any related issues.
This happens in both Chrome 30 and FF 24.
My call to create the editor:
var me = document.getElementById('resource_editor_raw');
editor = CKEDITOR.replace(me, {
fullPage: true,
removePlugins: 'newpage,forms,templates',
extraPlugins: 'abbr',
allowedContent: true
});
Thanks for any tips or hints!
Update #1
Thinking this might be related, I have also tried setting the z-index of the text element to very high, using Chrome's Dev Tools. No luck, it is still not editable / highlightable...
Update #2
This seems to be this conflict with jQuery UI. The suggested fix doesn't work for me yet, but will poke around...leaving this up for anyone who might stumble across it.
Final Update
So Brian's tip helped me. Both the Bootbox modal backdrop (what I am using to generate the original dialog) and the CKEditor dialog backdrop have tabindex=-1, so they conflict somehow. Manually turning off the Bootbox backdrop (i.e. setting tabindex='') works with Chrome dev tools, so I think I can hack something together with jQuery or whatnot. Amazing stuff...thanks for the help!! Not sure why I got this working in a jsFiddle...if I recall correctly, I might not have had a backdrop on those dialogs.
Also, for reference, a tabindex of -1 makes things untabbable, which makes sense for a backdrop.
The modal html attribute tabindex='-1' is what seems to be causing the issues for me.
The tabindex='-1' is actually in the bootstrap documentation and is needed for some reason that I am unaware of.
Use the 100% working script..
<script type="text/javascript">
// Include this file AFTER both jQuery and bootstrap are loaded.
$.fn.modal.Constructor.prototype.enforceFocus = function() {
modal_this = this
$(document).on('focusin.modal', function (e) {
if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select')
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_textarea')
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
modal_this.$element.focus()
}
})
};
</script>
Note: Include this file after both jQuery and bootstrap are loaded.
OMG I have been googling this for hours and finally fond some code that works!!
Stick this in your dialog page that will have a ckeditor in it:
orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
$.ui.dialog.prototype._allowInteraction = function(event) {
if ($(event.target).closest('.cke_dialog').length) {
return true;
}
return orig_allowInteraction.apply(this, arguments);
};
I found the fix here:
https://forum.jquery.com/topic/can-t-edit-fields-of-ckeditor-in-jquery-ui-modal-dialog
Not sure if anyone else is having this issue now. I was ripping my hair out trying to create a hack. It was a pretty simple solution after a while of digging and search the web. This fix helped me. Just place it on the same page where you want to place your editor - when loading from jQuery. The issue is conflicting tabindex, so I simply removed that attribute from the modal.
<script>
$(function(){
// APPLY THE EDITOR TO THE TEXTAREA
$(".wysiwyg").ckeditor();
// FIXING THE MODAL/CKEDITOR ISSUE
$(".modal").removeAttr("tabindex");
});
</script>
I am using Semantic UI and fix this problem by create an instance of CKEDITOR after create Modal.
$('#modal-send').modal('attach events', '.btn-close-modal').modal('show');
var ckeOptions = {
entities: false,
htmlEncodeOutput: false,
htmlDecodeOutput: true
}
CKEDITOR.replace('message', ckeOptions);
CKEDITOR.config.extraPlugins = 'justify';
I also faced this issue when I updated the CKEditor into 4.14
I found the fix in here - http://jsfiddle.net/kamelkev/HU8Qt/3/
In this case,
$.widget("ui.dialog", $.ui.dialog, {
_allowInteraction: function (event) {
return !!$(event.target).closest(".cke").length || this._super(event);
}
});
It will return false, so the textbox gets disabled/ unfocused (losing focus)
As a solution, we need to return true or need to modify the class .cke in the return statement into .cke_dialog
return !!$(event.target).closest(".cke").length || this._super(event);
I tried to upload images to server from CK Editor[without CKFinder] and on positive side i am able to do. whenever we are trying to create some dialog, they are creating one div on the fly which will hold your dialog box. Better you check the CSS property for your text box using chrome and change it. Hope this will help you.
I'd like to dynamically change the text of a Command depending on some state, so normally I went to Google and LWUIT blogs said that using refreshTheme() on MenuBar should do the trick.
So I used the following code, but it sadly didn't work
if (isPlaying) {
playButton.setCommandName("Pause");
}else{
playButton.setCommandName("Play");
}
this.getMenuBar().refreshTheme();
Is there something wrong with my code? Or did I misunderstand something?
It won't refresh. The text of the button is set when the command is placed so you can't do that.
You will need to use removeCommand(cmd) followed by addCommand(newCmd).
Furthermore, refreshTheme() has absolutely nothing to do with anything.