I would like to make tinymce work in my CMS with IE but i stumbled over the following problem:
When i click into the editor i get a very ugly box which makes users unhappy.
It is not possible to select more than one paragraph.
I am sure there is a workaround or init setting for this.
Can anyone help me?
I found out the reason for this problem. It was a css setting:
p {
min-height : 18px;
}
After removal everything worked fine.
Edit: The following css setting had the same unwanted effect:
p {
width : 250px;
}
Helpfull link concerning the problem: http://www.satzansatz.de/cssd/onhavinglayout.html
Related
So I've been fighting with this for maybe a week off and on and every time I end up eventually giving up. There's a "search bar" input at the top right of this website I'm working on here. There's lots of information on text-aligning the placeholder text for inputs like this right here on StackOverflow and I've built out lots of these without ever having an issue with this. But for some reason on this site, I can't just apply something like 'text-align: left;', the text remains centered. I know this is a dumb question but I'm really confused on what's causing this. I can't seem to recreate this in a CodePen at all, it always behaves as expected everywhere except for on this production site.
Does anyone know why this specific input seems to not respond to "text-align: left;"? I'm using Chrome but every browser I've tested displays this the same way - centered placeholder text no matter what I do. I think I'm missing something simple here but I don't have a clue what it is.
That is not text. That is placeholder.
please add below to css
input.form-control.search::placeholder {
float: left;
}
I've looked into the code and I honestly have no idea what is causing this but I have a solution :)
<style>
.search::-webkit-input-placeholder{
text-align: left !important;
}
</style>
Set the important tag to tell the browser that that thingie maginie is important and set the property to the placeholder of the '.search'
Probably, he know what is a placeholder. The problem is text-align: center from your placeholder. If you want to see it with developer tools:
The trick is to enable 'Show user agent shadow DOM' in the Settings
panel of Chrome Developer Tools. Thank to Sean Anderson for the
answer
Also you can edit your placeholder using vendor-prefixed selectors
There is a setting in the style.css file:
.header-main .search-wrapper .search::-webkit-input-placeholder {
text-align: center;
}
It's got quite a high specificity so worth copying the lot and simply doing:
.header-main .search-wrapper .search::-webkit-input-placeholder {
text-align: left;
}
I have a problem with a slideshow I coded.
It worked fine before, the website is online since january.
The problem is only when using Firefox 46, other navigators are displaying the elements.
The page with the slideshow : http://www.rotin-file.com/en/accueil
8 buttons appears, in the debugger I can see the 8 containing background images of products, and the absolute containing the title, reference and price, but it doesn't appear in the website...
I tried to change many css properties (with the debugger) to find from where the problem comes (z-index, visibility, display, opacity, ...) but I can't understand why it's ok with Chrome and IE but not ok when using FireFox...
I verified all plugins are desactivated (also adblock is disabled for the whole domain) and tried on other computers with firefox, it never work with it...
Any idea to help me ?
Sorry for my bad english, and thanks for any help.
Two things to do, first remove:
#slideProduits #cntSlide {
perspective: 1200px;
}
Second, you need z-index for your pager, so add:
#ctlSlide {
z-index: 100;
}
But why it does not work in FF46, I have no idea. Guess 'cause css perspective is still an 'experimental technology'.
This is not a question, but an answer which I want to share with you. I've just spent over four hours tearing my hair out on something which turns out to be a bug in either TinyMCE or Firefox.
With TinyMCE loaded, if you specify the HTML5 required attribute on a textarea the form will just not submit in Firefox. No errors, nothing in Firebug, just a stubborn refusal to submit.
I don't know if this is a FF or a TinyMCE bug and don't really care. I just don't want other coders to go through the aggravation I've gone through these last hours.
To ask a question: Is this bug documented anywhere? Does anyone know?
If this is an inappropriate post for Stack Overflow, tell me and I'll delete it.
The problem is far from being a Firefox issue. Indeed Chrome and Opera ("old" opera before the "brain" was transplanted with Chrome's) and probably every other modern browser would give you the same headache.
With both Opera and Chrome, there's a flag insisting the field is a required one, (despite the fact that you have content in it). Chrome is nice enough to give you this error message in the console:
An invalid form control with name='<name of textarea>' is not focusable.
Not too surprising when you consider that TinyMCE actually creates an editable div container, hiding your original textarea. It is this hidden textarea (bearing a required attribute) that the browser is expecting you to provide a value for.
Over at Github, here: https://github.com/tinymce/tinymce/issues/2584, there is a suggested solution which goes like this:
// fix tinymce bug
if($this.is('[required]')){
options.oninit = function(editor){
$this.closest('form').bind('submit, invalid', function(){
editor.save();
});
}
}
I haven't tested this snippet personally, but studying it might be able to get you going, as long as you're able to drop it into the right place.
I realize this was asked 2 years ago, but I'm running into the same problem, so to answer your question:
I found the official bug report here: http://www.tinymce.com/develop/bugtracker_view.php?id=5671
My solution for this (which is related to WordPress TinyMCE setup):
jQuery( function ( $ ) {
$( '.smyles-add-required-attr' ).attr( 'required', 'required' );
tinymce.on( 'AddEditor', function ( e ) {
console.log( 'Added editor with id: ' + e.editor.id, e.editor );
var $editor = tinymce.get( e.editor.id );
$editor.on( "change", function (e){
$editor.save();
});
});
} );
The jQuery above adds the required flag (it can be done numerous other ways as well), and makes sure the text area is updated after being changed
To deal with issue of element not "focusable" just set opacity and height so you can remove display: none;
This CSS assumes you have added the class smyles-add-required-attr to editor when output using the editor_class (for WordPress wp_editor)
textarea[style*="display: none"].smyles-add-required-attr:invalid {
height: 0px !important;
opacity: 0 !important;
position: absolute !important;
display: flex !important;
margin-top: -75px;
}
This adds a red border around editor, assuming it's inside of fieldset in your form
.my-form fieldset:invalid .wp-editor-wrap {
border: 1px solid red;
}
One potential issue is that on page load the red border shows around fieldset, you can use fieldset:invalid:focus-within but beware it has limited browser support https://caniuse.com/#feat=css-focus-within
I'm working on my new online portfolio at http://asbjorn.org/ny/, and I've come across the weirdest issue!
Every time you open the page for the first time, the next and previous buttons for the slideshow don't appear. If I open the inspector, they pop up immediately, and they also appear when reloading the page.
They're pretty standard html elements, not added dynamically, so I have NO clue as to why this happens! Of course I can't have the site visitors reload the page just to see them. :/
I really hope someone can help me! :)
update: seems like it's a chrome only issue. For me it happens consistently in chrome on both Win7 and OSX. A few of my friends also has the same issue (probably in chrome on osx)
So I'll take a stab at an answer. When I see the problem in Chrome 22, and I bring up the inspector, I note that the #previousLink and #nextLink divs have a width of 0 in the broken state. Try setting an explicit width for these in your CSS, or make the nested image use display: block.
#previousLink { width: 31px; }
#nextLink { width: 37px; }
or
#previousLink img,
#nextLink img { display: block; }
I think the combination of these inline items and your overflow: hidden rule are biting you. I think. This is a tricky bug!
Please can anyone help me out. I have an html page in which I have added a modal popup from ColorBox. In the ColorBox popup, I have added a CKEditor. The problem is as follows:
In IE, the CKEditor works fine, but in FF & Chrome, I get the CKEditor like in readonly mode (I can't type anything in it).
If i put the CKEditor directly into the page (and not in the modal popup), it works fine in all browsers.
I think this might be a problem with the z-index on one of the elements generated by CKEditor. But I don't know which one exactly?
I would really appreciate some help plz, thanks in advance!
We got around our problem by switching lightboxes, rather than use ColorBox, use Simple Modal. I have a funny feeling it will work for you. Good luck!
<script>
$(document).ready(function() {
initCKEditor(); //function ckeditor.
$("#id_textarea").val(CKEDITOR.instances.id_textarea.getData());
});
</script>
Render/create ckeditor on colorbox "onComplete" callback.
See callbacks here : http://www.jacklmoore.com/colorbox
After some debugging I found that it is because of a CSS rule.
In the skin named kama you need to change the following CSS rule in mainui.css from:
.cke_skin_kama .cke_browser_ie.cke_browser_quirks .cke_contents iframe
{
position: absolute;
top: 0;
}
To:
.cke_skin_kama .cke_browser_ie.cke_browser_quirks .cke_contents iframe
{
top: 0;
}
Depending on your setup, you might need to change it in skins/kama/editor.css
I however recommend upgrading to a newer version of ckeditor. I found this issue on version 3.6.2.