I'm using the base example of mxGraph which can be found here: graphEditor to start.
In the example above, the tooltips open to the right of the icons from the left sidebar. For example, shapes, lines, etc.
I have my graph contained in a div, smaller area on page... but the tooltips are now floating way off to the left as if this thing is full screen still. I'm not sure of how to share additional details but hoping tagging this with mxGraph those of you who have experience working with this may have run into the same issue.
I added following piece of code
graph.tooltipHandler.div.style.position="absolute";
This solved the issue
Related
I get strange behavior when I try to insert icons to my elementor page design in SVG format.
This is the original design (supplied with zeplin.io) which im trying to implement with elementor
before I add the last icon, the result in elementor is:
You can see that only the first icon display as expected
Which is strange, but even more strange is that when I had the last I con I get this:
Now non of the icon display as expected, although some of then are more similar to the expected result.
The heart icon got flipped, and the colors changed for the other icons,
Why would adding a new icon effect other icons in such a way?
Why the color and the icon direction doesn't display as set by the SVG design?
NOTE, the direction might be RTL related, but why only the heart got flipped?
I know that I could easily solve this issue by changing the format to PNG, but I could like to understand the reason behind this behavior.
This is happens because the icons have duplicate class values, i.e. the svg is added as-is to the dom tree, along with the <style> definitions.
Therefore any class or id that is duplicated in two SVGs will collide, and the solution is
open the svg with any text editor
search/replace all id/class defined in <style> to have unique name
NOTE: the reason it doesn't happen in the orginial design is that there, the SVGs are added with img tag.
Woprdpress doesn't allow uploading SVGs as images for security reason (I have no idea what kind of security issue it can create, but this is a question by itself)
EDIT: I just noticed that once you add an SVG as an icon, it also become available as an image, so it might be a better solution to upload the SVG as icon and then use them as images. but I didn't try it.
Having an issue with an app that has huge dependencies on Highcharts+Highstocks. The issue is that the labels for simple bar charts aren't tucked neatly under the bars but instead are skewed to the left way too much. I have too many theories as to why it happens to even mention but if you look at the image I attached you'll see right away (also it's noted in the image).
I've done quite a bit of research and experimentation on this and --- I saw some promise on the API side of things - to really muscle those labels around looks like it might be embedded in the Highcharts js codebase, to which access & forcing overrides is a little bit tricky in the way we implemented Highcharts + Highstocks.
Has anyone encountered this before? If so would you mind a comment or two as to how you managed to get those labels to align under the bars themselves? In a perfect world I'd have those MMM-YY labels centered right beneath the centerline of the bars.
Thank you in advance for your time and for reading this! Any ideas are appreciated and welcomed!
This is the issue I'm referring to:
According to documentation:
HTML labels that can be positioned anywhere in the chart area.
Use CSS to position those labels, either:
text-align: center;
or
margin: 0 auto;
Depending on how the code is structured. If you post your code I can give a more specific fix.
I am in the process of setting up a website via Enjin's web hosting for a game server I run. I have an HTML module that will display a map of the island our game server takes place on, with a grid overlay already.
What I am trying to do (if possible), is to create a dynamic grid with css and html (javascript if needed) that overlays the grid of the image and highlights each cell as a user hovers over it, with a small pop-up with details on a specific coordinate (such as any bases, or other special information about a specific area)
I have tried looking around via google, but all searches come up with creating a grid out of multiple images (which is not what I am after), or using the area tag without much explanation on how to turn it into a fullout grid.
I am unfamiliar with how to approach this problem, and would like any input or advice if possible. Thanks!
NOTE: For those wishing to see the map in question I am using, to better help understand my question and assist me, please see here.
I'd like to implement a sidebar, where each entry will have an Icon along to it's text.
In deactivated state, the sidebar shall display only the icons, wheres in activated state, the sidebar shall expand to its whole width, showing its entries with both icons and text.
Just like the menu button in Expanding Menu Button, but this behaviour for the whole sidebar.
Can this be done using Semantic UI?
I have asked a similar question a while ago here, and I managed to solve it myself, by modifying some of Semantic-UI's source code.
Unfortunately, the modifications were too extensive to post them directly in this answer, so I have created a github repo with an example here. Hopefully it helps. Due to the fact that the source code from Semantic-UI was modified, normal sidebars will probably be buggy.
I managed to add embedded assets to htmlText of my TextArea like described here (Sly_cardinal's post, currently the third one):
Unable to access embedded images in htmlText
But all the images appear in the top left corner (overlayed)!
Interesting is that the place where the images should be, is actually empty and the text wraps around it, like they were there. But they are all in the corner.
I'm using large p tags for the text and all html displays perfectly where it should be. My only problem are these images.
Hope somebody has at least an idea. Thanks.
P.D. sorry for not showing code, it's cluttered at the moment with other things. But I hope the description is enough to get some useful tips.
P.D. 2. I did a test now with exactly the same code but using normal path to png file instead of asset and that works!.