I am using the latest version of Redactor and have noticed that the z-index of the toolbar is set above many other components (Bootstrap modal, drop-down menus, etc). I browsed the docs and could not find any mention of changing the toolbar's z-index.
What is the best way to fix this problem? Is there a setting I missed that can be called upon initializing?
From Art at Imperavi-
Thank you so much for reporting this. At this time, the only
workaround is to manually adjust Redactor's z-index, please see line
58 in redactor.css.
Related
I am using Monaco Editor 0.22.3 in combination with StencilJS and TailwindCSS. Everything works great, except for an annoying visual glitch in the intellisense dropdown as depicted here:
As you can see, the last suggested item is partially obscured.
I suspect it might have something to do with some style coming from TailwindCSS, but I'm pretty much at my wits end here. I tried to use the F12 element inspector to see if I can find some hints, but that is proving to be close to impossible since the intellisense dropdown disappears as soon as it loses focus.
Any hints would be much appreciated!
UPDATE 1
Here's a screenshot with a bigger editor to demonstrate that the dropdown itself does not appear to be clipped:
UPDATE 2
Here's an animated gif showing the issue when trying to debug the HTML elements using the browser developer tools:
As you can see, the dropdown disappears as soon as I click anywhere else.
The issue comes from a fairly common css class being used: .tree. Libraries such as tailwindcss add padding-bottom to it for example. To undo some of its additions for the monaco editor we added the following to our css file:
.monaco-editor .suggest-widget div.tree {
white-space: unset;
padding-bottom: 0;
}
And to get get to that solution for other libraries and styling artefacts:
It should have been quite easy but the suggestion dialog has a tendency to hide when we try to observe it. so a UI guy and I spent a while going through the playbook to try to debug it. The only successful way to inspect it was to abuse the JS debugger by running (which was a hint from a stack overflow post that I'm struggling to find to give credit), and just cause the JS engine to pause:
Run:
setTimeout(5000);
This gives us 5 seconds to get the suggestion window to show (or set to a relative amount of time to the problem). After which, you could mostly inspect it as normal with a quick shortcut:
ctrl+shift+c that brings up the debuggers element selector.
Here we are, the suggestion was from the following post:
How can I inspect disappearing element in a browser?
break on subtree probably would have worked, but we became a bit impatient stepping through the changes. ctrl+ / didn't seem to help in this case, which left the odd setTimout to save the day.
The drop down is clipped at the editor's boundaries. I actually wonder how you can see the last empty part outside of the editor.
For inspection: use your browser's dev tools to see how the containers overlap. This will avoid that the editor hides the drop down.
Update
After your update I think now that somehow the styles are messed up. You will have to figure out a way to show the popup and still navigate the DOM tree in the developer tools. Try to locate the parent and see if that popup is only hidden (it still shows up then in the tree) or if it is dynamically created or is a portal, which lives in a completely different part of the tree.
If that cannot be done then try to disable all CSS you have and see if that solves the issue. If so enable the CSS piece by piece to find the culprit.
I'm using PrimeNG 1.0.0-rc.4 (although had the same issue with earlier version). The dropdown always displays its dropdown pointer to the right. A rollover shows the associated button is also to the right. Tried it with different themes with same result. What's going on and how do I fix it?
My recommendation would be that you better use the grid system provided by PrimeNG, because you maybe solve that specific issue now, but it's so probable that you'll find more like that on the way. Here's the documentation about it: http://www.primefaces.org/primeng/#/responsive
I'm new here (and also with bootstrap and JavaScript) and hopefully im not asking a question already asked before. I did google plenty and search on here and could not find anyone mentioning this specific problem.
I found a bug I think with Bootstrap 2.2.1 .. when you close a modal, the href link which called it now has a blue border around it. This happens with buttons, nav items, anything. This can be seen on the Bootstrap live demo itself - click the blue button "Launch demo modal" under the section "Modals bootstrap-modal.js". You can see a light blue border around the button after closing the modal.
http://twitter.github.com/bootstrap/javascript.html#modals
This issue drove me mad, I messed with the CSS for ages, then tried different browsers, until I downgraded and the issue above is not present on bootstrap 2.0.4.
Does anyone know if this is a known issue with 2.2.1 or has it been present since a particular version?, or what the problem is here?
It's pretty simple fix once you locate what the CSS property is. I think it came from some issue with the modal's focus and they decided to modify the generated html. You need to define the following CSS. It comes from the following link.
.modal-open .modal,.btn:focus{
outline:none!important
}
Hope it helps! I made a jsfiddle of the result (including bootstrap's css + js) so you watch a live demo of it, here. Note that if you're using something that isn't a button the outline may come back, since we're only applying it there. Since you're referring to a href, it's likely that you're calling the modal from a link, and therefore should also trigger a:focus
I'm working on a site and I have a big css problem; my menus are 'Swinging' in a very weird manner when hovered. The css / html code on its own works well, but once I implement the slider within the real site it behaves differently. Its probably a css issue, but also to note is my site is built on a Responsive theme. Anyone with an idea of how I can fix this please lete kme know. Thanks. Here is the link to the site.
When you say "swinging" do you mean the effect where they start at the top-left then grow diagonally to the bottom-right? That's jQuery's ".show" event firing. Try replacing that with ".slideToggle".
Unfortunately the Wordpress template you're using is quite messy so it's hard to troubleshoot.
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.