I have searched the CKEditor forum for this issue, but did not find it.
I am using CKEditor 4.5.3 with ASP.NET Web Forms (.NET Framework 4.6). Firefox version is 46.0.1. The problem does not appear in Chrome or Internet Explorer. Also, the problem does not appear in the official demo, even in Firefox.
There is only one instance of CKEditor on the page. I am using it to edit a job description. The job description is about three times longer than the height of the CKEditor window. To duplicate the bug, I scroll down to the bottom of the job description and select some text. I then use a dropdown on the CKEditor toolbar to change the paragraph format. For example, I might choose "Heading 2". As soon as I change the paragraph format, CKEditor immediately scrolls to the top of the job description, and the altered paragraph disappears below the bottom of the window. I must then scroll back down to the paragraph.
I just encountered this problem in Firefox. We're using custom CSS and it turns out body {height: 100%;} was the culprit.
See
CKeditor jumps to top with certain css
and
https://www.drupal.org/node/1096164#comment-4603964
Related
I'm trying to see what default css values (possibly source code?) are for webkit psuedoelements so that I can create custom webkit items that are very similar to the default, but slightly customized.
These items are shadow elements that don't show up in the DOM. you can enable 'Show user agent shadow DOM' in chrome devtools settings, per
Inspect webkit-input-placeholder with developer tools, but i'm still not seeing elements in the DOM. I suspect the styles are being provided by user agent stylesheet for these webkit items
Load a page utilizing the CSS in question with your browser, then you can use developer features to inspect it.
Right-click the page
In Chrome, the menu choice is 'Inspect'
The screen will split, the page source appears on the bottom of your screen (not sure what happens if browsing on a phone)
On the bottom of the screen, you will see the html, on the bottom right you will see the pertinent CSS you select some html on the right.
Note there is a link to the style sheet on the far right, click to view
Unfortunately, the link is hard to read because all spaces and linefeeds have been removed, but you can paste it into an editor and make it easier to read
I am currently working on an AngularJS project for a tablet with the basic navigation through all the different pages. The project consists of all the basic features like Side Navigation Menu, a Header, the links of different pages, and a Footer.
The project is also created responsively using Bootstrap. I am not facing any responsiveness issue in all the elements created in the project except one.
When keyboard opens, the responsiveness gets disturbed.
Basically, the header div position gets distorted, the footer shifts above and gets placed right above the keyboard opened, and the side-navigation width also gets disturbed.
I tried the following things -
Used position: fixed, position: relative but nothing changed.
Looked into many different SO question links but got no fruitful result.
I have one option (hack) left that is stated in this SO answer given by Roberrrt but that's a long process and I'm short on time and doubt if it will be a positive hack.
Any help would be hugely appreciated.
Update :-
Giving an idea of how the structure of my project is -
This is the main page where a search box that is in-built in DataTables is used. The Header, Footer and Side-Navigation Burger Menu Button are as described here.
When clicked on the Burger menu, the side-nav opens in full-width as shown below -
Now on clicking the search box the following screen shows with all the elements distorted and responsiveness screwed -
For reference purpose, The theme that I'm working on is Inspinia
This may be a stupid question but how do i add a margin to the bottom of the tinyMCE editor. I have a margin on the bottom of the textarea I am targeting with tinyMCE but i assume it is being replaced with the editor and my styling on the textarea is moot. I opened the css files for the advanced theme but I can't seem to find what tag needs the margin added to it.
The answer to this is probably staring me in the face. But its just one of those programming days. I can't burn up anymore hours trying to figure this out I'm moving on but if anyone has any insight that would kick ass.
thanks,
-L
I just applied the following to the "full featured example" on the TinyMCE website via Firebug, it worked nicely. The textarea element is indeed replaced, though you might choose to add margin to the bottom of that too - for when TinyMCE hasn't replaced the element yet, to avoid jumping layout.
table.mceLayout { margin-bottom:100px; }
http://jsfiddle.net/nicktheandroid/3LxRr/
When highlighting a paragraph containing a link that's set to "display:inline-block", there appears a little white block over the top of the link ( when it's selected/highlighted). press Ctrl+A to select everything on the page and you'll see what the problem is.
If I change the line-height down to 16px - it goes away, but the line-height for the paragraph and the link are the same. I need the link to be displayed as an inline-block because I have tool tips that pop up, and if the link gets split in half by a new line, the tool tip appears in the middle of the page, so inline-block is a must.
It only happens in webkit browsers (Chrome and Safari). It's something about how the browser engine renders text selection highlight and is not really a CSS issue. because when you apply background color your code will work same in every browser.
If you believe it's a bug you can report it to webkit.org
I have built a context menu but have found annoyingly that when I right click on my site in firefox all text and images just seem to randomly get selected. It is not a JS issue as I have removed all JS from the site. Thinking it must be a css issue. I have never encountered anything like this before...
I don't have an example page to show I'm afraid. Has anyone experienced this before in Firefox. I am using the latest FF4.
Cheers Guys!
*UPDATE:*
Here is a pasting of the pure html from the page that is having issues,
http://jsbin.com/aneja4/3/edit
did you try to disable all your addons you have installed? maybe one of them is causing the problem.
I have FF 4 but neven encountered this problem before.
And I could be wrong but I don't know of any css code that would be able to select text. it's pure for the design and structure of the site. it will be mostlikely a js problem or something else
I have seen this too... I think it has something to do with the way the site is structured... If you have nexted divs, or a div that does not quite cover the entire page, a right click on the parent div seems to select everything in the nested div. It's quite annoying... especially when trying to build a custom context menu, or use the default menu to refresh the page...
Any fixes/changes that we should know about for FF that is causing this? I'm using FF4 and XP (yeah, yeah... corp. system)
JF
It's likely a problem with your HTML layout that firefox is struggling to work with. But without seeing any code, it's not possible to speculate any further down that path. #JDF's suggestions may help you, though.
If you can't work it out, and can't live with it, you could just disable the ability to select text.
In Firefox (and other standards-compliant browsers), you'd use the CSS user-select: none;.
See this question for more info on how to achieve this: How to disable text selection highlighting using CSS?
This is most likely caused by having a contentEditable element on your page. Any element (other than body it seems) that contains editable content will be highlighted/selected when you right click on it in Firefox (4.0 and 5.0 is all I can confirm). If everything on your page is wrapped in a div it'll appear that the whole page is selected. If you (can) right-click somewhere on the body the regular context menu should work.
Although I can't see any instances of contentEditable in your code on jsbin, it could be added by a script that I can't see (possibly even modernizr?).
I think this is related (although it doesn't match exactly)
http://support.mozilla.com/en-US/questions/766166
http://aloha-editor.org/ exhibits the same behaviour when right-clicking anywhere inside the #wrapper div.