I've installed Medium Editor on our site, on two different pages. They both work fine, and are initialised with the exact same code, but on one of pages the Bold button/shortcut doesn't work.
The page on which it doesn't work gets a lot more styling (and has a lot more js libraries) compared to the one that does work, and so I'm wondering if something else might be getting in the way.
I can't see any js errors in the console. Has anyone encountered this problem? I saw another forum post saying it was something to do with styling on font-weight, but I can't see how this would actually stop the function working completely: it just seems to be disabled - the "B" button in the Medium Editor's popup menu doesn't change color when you click on it.
If it was a css issue I'd expect the button to change color but the text to not look different, perhaps, but it does just seem like "Bold" is disabled. Also, any tags already in the content's html do display ok.
Has anyone else encountered this, or other functions seemingly not working?
EDIT: I just poked it some more and noticed that if something is bold already, and I highlight it, the B button does look activated, and and I can "unbold" it. However, after unbolding the selected text, I can't "bold" it again.
EDIT2: More poking has revealed that if the highlighted text is set to be a heading, or is italicised, then I can bold and unbold it as intended. So it's really just "normal" text which seems to be "bold-resistant".
I found the answer - the problem page had the text area inside a label tag, and so was picking up the styling for label across the site, which had font-weight: 700. This was preventing Medium Editor from applying the Bold style to it.
Related
I'm trying to disable text ellipsis ('...' at the end of text) / overflow-wrap so as to be able to read the full text of the option element within the select element. At the moment the text is getting cut off even though there's plenty of white space left. The catch is that I have to do this using Greasemonkey (not written any code so far), just editing in browser console till I find the correct css option. Things I've tried so far:
changing an option/select width to "100%".
changing option/select line-height to "normal"
changing option/select padding to "0"
changing option/select font-size to something smaller.
setting option/select text-overflow to "clip"
setting option/select white-space to "normal"
var menu = document.querySelector('select');
var option = document.querySelector('select option[value="neteng-deployment-agg-pod1-dub-primary"]');
I'll also attach an image to help explain what I mean:
I am not sure but looks like IE problem.
First of all check the same page with Firefox and Google Chrome.
My gut feeling that this is quite browser default specific, and that it would require browser-specific css hacks to change this, can you confirm if this is the same behaviour in all browsers on your machine?
edit: with knowledge that is same in all browsers:
there's a good chance replacing the default select element with some fancy jquery versions that replace select elements with mirror versions using normal html markup may solve it
https://sitepoint.com/13-jquery-selectboxdrop-down-plugins
im trying to make a rich text editor with execCommand and a div that is contenteditable.
It should have some small functionalities like bold, italic, underline, ol, ul, ... All those things should work with execCommand.
I also wanna have feedback from my cursor when i am standing in a bold word, that my button toggles to 'on' (changes styling), i do this with queryCommandState.
I have encountered numerous bugs and problems and i was wondering if execCommand and queryCommandState are stable? On caniuse.com they say it is but i've come across the following bugs:
In Chrome:
No feedback on subscript and superscript
In Firefox:
When making something italic or underline or ... the cursor cant move in that particular part of the string. This doesn't happen when i make a text bold.
ordered and unordered list doesnt seem to work at all in firefox. the bullet is shown but cant enter any text
In Internet Explorer:
Cant select any text
I'm probably forgetting some bugs, but my overall experience with execCommand and queryCommandState is that it's pretty buggy.
Is execCommand something to consider for apps that go in production? Or is it generally discouraged?
I'm trying to resolve a problem that I encountered with the creation of a tooltip interface in a website I'm developing. I constructed the tooltips with help of HTML, CSS and JavaScript. The script is pretty simple as you can see in the fiddle underneath, and is based on a toggle behaviour, on witch a trigger element open a pop-up tooltip.
jsFiddle
Now! My problem is that i can't figure out how to place the trigger on the top of everything so they are not hidden by the pop-ups! Let me explain. Since the pop-up, even when they are off, sometimes cover the trigger elemets they (the triggers) just result not clickable. is like they are hidden behind invisible pop-ups. Here is a link of how is right now online.
http://271116.lucamule.com/studio-1
I hope you can see the problem! Does anyone know how to resolve this?
You've changed the .pop-ups to "block" as soon as it initializes. $("div.pop-up").css({'display':'block','opacity':'0'})
If you want to show/hide, I would recommend using .fadeIn/.fadeOut: http://api.jquery.com/fadein/
I've been looking for answers, but everything I could find does not seem to fix my problem.
I have a jQuery carousel that lazy-load images on demand (Slick Carousel). My problem is that when you're sliding the images, a thin grey border appears around the img placeholder (most of all on chrome and webkit browsers, but sometimes in firefox with a dotted line). When you click anywhere on the screen, the lines disappear, but if you continue sliding they come around each image.
I've set CSS properties border and outline to 0 and none, I tried to disable the lazy-loading to have a src too, but nothing seemed to make the little border disappear.
Does anyone know how to get rid of it?
I have attached two screenshots, one with the lines and one without them (After clicking in the background, they disappear):
This is the border for the active link element. Quick & dirty solution: Listen for the click event, then focus() on something else.
I got inspiration when writing this, so I checked the issues in the GitHub page of the slider and found this:
https://github.com/kenwheeler/slick/issues/1636
putting outline:none; in the corresponding container fixes it.
Thanks also to Thomas Landauer, haven't I checked the GitHub issues, your answer would have definitely put me in the right direction.
I am having a really weird issue and can't seem to figure out if I'm looking at a javascript or css issue. Here is a jSFiddle for some context of what I am talking about. If you type in the input box and don't see a label popup, delete the text and type it again...weird huh?
I have a form that can be viewed either directly, or in an iFrame. On the inputs, I am using jvfloat.js to give floating labels using the placeholder values.
$(document).ready( function() {
$('input').jvfloat();
});
I get different results across browsers (current releases) and also, oddly enough, when in an iFrame or not.
Chrome
In IFrame:
Typing in text field doesn't popup label. Inspection shows "activeLabel" class added successfully, but it doesn't seem to render. Seems like a CSS transform isn't working to move the label up from behind the input.
Outside IFrame:
Works as expected.
Firefox
In IFrame / Outside IFrame:
Works as expected
I haven't tried it in any other browsers. Every now and then the labels don't work and I can't repeat the problem consistently.
In the jsFiddle, can you see any major problems with the javascript or CSS that would cause this weird behavior?
It's a CSS issue.
You're using display, visibility, and opacity to show/hide your floating placeholder. That's overkill, you only need one! I get opacity, you need it for the effect.
I dropped any use of visibility, and it now works:
http://jsfiddle.net/njjZr/3/