I am currently developing a Webapp and I am trying to use QuillJS as a WYSIWYG Editor. I am trying to use the 'Bubble' theme as it fits nicely with the rest of my webapp, however when the tooltip is supposed to appear it does not appear on the screen and after checking using the Development console I found that the tooltip is being displayed with a Top value of somewhere around -700 to -1000 and I have absolutely no idea why.
I have tried using an element that was high-up in the HTML Heirarchy in case a parent div was messing something up but that did not solve my problem either.
Can anyone tell me why the tooltip appears so far off the screen?
Here is a JSFiddle with the current state of my code: https://jsfiddle.net/RBrNx/nwozxLzz/
Please Note: Most of my webapp does not function or look great in the JSFiddle, this is not an issue as most of the functionality involves a local database.
You may need the bounds option，set offset parent
bounds
Related
The Atom 'Script' package allows you to see the output of your code in a separate panel to your script. However by default it puts the panel horizontally, below the script panel.
I want the output panel to be displayed vertically, to the right of the script panel. I found out out to do this here: https://github.com/rgbkrk/atom-script/pull/1516 by "adding position: right in the constructor's super method" in the lib/script-view.js file.
However, this side panel is very thin and there is no way to expand or contract it as there was when it was horizontal.
Why has this functionality disappeared, and how do I re-instate it?
I had the same question for this because I wanted to use atom for python but since I had only been using python IDLE and editing in IDLE I have come to move the IDLE window to the left side of my screen and the program that I am working on on the right side.
I was finally able to locate the file that is responsible for creating the panel and determining its location.
To change the location of the panel you will have to navigate to the file location where the atom packages are located. For me it was within the path
C:\Users*nameOfUser*.atom\packages\script\node_modules\atom-message-panel\lib
in the folder there should be a JS file called "MessagePanelView". Open within your desired text editor. Once open you will see within "var MessagePanelView" there is
"this.position = params.position || 'bottom';"
once spotted you have the option of changing the text from 'bottom' to ['left','top','right'].
NOTE: when I had changed the positioning it worked almost as expected, the only problem was that the panel had auto adjusted and it ended up being too skinny. To fix this issue you can scroll down to "MessagePanelView.prototype.attach" and you should see "$(".panel-body", this).css" within this portion you will see that there is a value of "maxHeight" set, now all you have to do is add "width:" and the size that you would like.
I know that for the most part this solution is a temporary and clunky solution and that the panel is also not resizable is width. hopefully someone will be able to create a cleaner solution to the problem than I would be able to.
I have an idea to implement something like this.
There is a small image down and on hovering i need to be able to select some particular area and display that portion of image in zoomed format with the scroll bar. That enables user to see the whole image. I googled for the zoomer and got lots of plugins in JQuery. But i think they are not suitable for my requirement. I need suggestions for how to achieve the end result.My technology stack is angular js.
I am having problems trying to drag a container (which is inside a navigationview) outside of the navigationview. Every time I try to do that, the container that is dragged disappears behind other components when it is dragged outside navigationview.
I have written a small fiddle that explains the problem that I'm facing:
https://fiddle.sencha.com/fiddle/d0
Is there a way I can make the container visible even outside the navigationview?
I've reproduced the code in your fiddle, copying and pasting it in a fresh Sencha Touch 2.2.1 app but I was not able to reproduce the issue. In my app, draggable components does not disappears behind the navigation view as in your fiddle.
The only difference between your fiddle and my working version is that I had to write the MyDroppable class in a separate js file and require it in the Main controller.
By the way, you can try to add
z-index: 1000;
to the style attribute of all the three draggable components.
sorry if this seems not to be a valid answer, but I've not yet the reputation score to post a comment
I am having issue with the facebook like box. The stream isn't displayed correctly. So i wonder if there is a way so that i can customize the the css. I just need to add float:left to a div and it will all be working but i am not getting a way to do this.
If anyone can guide me so that i can have the desired result, that would be awesome.
You can check the current look of the like box Here. If you just scroll down you can see the texts are not displayed correctly.
I tried to design with js and css too but couldn't get it to work.
If you want the text on the right to display properly, you simply need to change the width from 395 to about 480. Or, are you trying to have the text on the right display below the image? You won't be able to handle that unless you are able to manipulate the source of the iframe -- or use JS after the iframe is loaded.
Sorry maybe I was not clear in my original question below...
What I am looking for is a way to get a popup to move inside the windows viewable area (not actually create the popup itself). As seen in Google image's when you mouseover a image at the edge of the screen, somehow (which is what I want to know), the script detects that there is not enough space for the popup to appear in the window, so it pushes it inside the viewable range.
So I want to know how this is determined and calculated.
How can I use javascript to make sure
a popup div fits inside the window
when it appears?
A good example is google's image
search. When a image does not fit in
the window (either it is the far right
most or bottom most image), somehow it
is pushed inside when the popup is
opened with the mouseover event. How
is this calculated and how can I
create a script to calculate this.
you can use already build pop-up box/overlay window js library. Use jQuery js framework and go for any plug-in that provide you the same feature. I recommend you to use facybox http://fancybox.net/ with jQuery which makes this very easy.
There's no "use this code in your JS file" fix for this but the general idea is to reposition and override the offsets of the element in question, taking into account the viewport's bounds (to state the obvious).
For example, a couple of good tooltip plugins for jQuery support this behaviour, such as bassistance's jQuery Tooltip Plugin and also qTip. It might be worth digging into their source and seeing how they handle this.
This is one of the best i've come across http://gettopup.com/