AngularJs ChartJs tooltip z-index issue - angularjs

I am using this template https://coreui.io/v1/demo/pro/AngularJS_Demo/#!/dashboard for my angular project. In that it includes chart.js and angular-chart.js. After good amount of googling, I am still not able to get the tooltip in the chart above all element presents.
In all the other product of coreui it shows properly. But I am not sure why it not showing here. Please help me.


Looking at the source code, it seems they are using ChartJs for the charts.
ChartJS should automatically find the right position for your tooltips, but since the chart area is so small, the tooltip would look cut-off when it has a top position too. Try increasing the area around the chart to give the tooltip some more space. Because all the other examples in your dashboard have larger charts/containers, the problem happens only in the small boxes.
When you want to have some more power over the tooltip, you can also switch to HTML tooltips so the tooltip will be added outside of the canvas, and can be configured through CSS (like Z-index).

Related

Nivo charts tooltip is hidden behind other charts

When putting multiple charts tooltips from charts are hidden behind others.
Also, I am using custom tooltips for this picture, the default tooltip also shows in the same way.

First, looks like you're using Canvas, maybe using the SVG version of your chart can help.
If it does not, you'll find more parameters for theming in this issue : https://github.com/plouc/nivo/issues/308
Then you will be able to set precisely zIndex

material ui, layout component for desktop to mobile responsive transition

I am writing a Single Web App with material ui, that needs to be responsive, but I do not know which is the control where I must allocate the mains component, if it is a grid or a box.
The next image show the main components arrangement in md,lg,xl
The next image show the main components arrangement in sm,xs when width < 960
In the web I found many complex and very difficult to understand layouts, but not find a basic example. Some like "material ui responsive for dummies".
The mobile version, will have a breakpage between the Appbar and Sidenav, both will occupy the full height, and the Map in the second page will fill the screen.

I did it for you with MU Grids and media queries, if you have questions, ask. I am always ready to help. This is codesandbox link. Let me know if it help you.
https://codesandbox.io/s/charming-shirley-oq6l5

Show my codesandbox answering your problem : https://codesandbox.io/s/amazing-sound-1nj87
It display your layout for md lg xl correctly. For xs and sm screens, sidenav & map take full height with a break page between sidenav and appBar

Thanks to both, it solved the main part o what i need.
Also need to implement a change of page.
I forget to mention that the map will be React-Leaflet,
so need to implement a flap button over the map for the mobile version.
The button is for scroll to up, because any finger movement in the map area only will affect the map content.
Do not will have effect in the scroll.
Another thing to implement is the break page concept:
The behaviour of the break page is like when you see a pdf in presentation mode and press
the keyboard button Repag - Avpag, it change all the content and never see the half top and the half down.
Grettings

Dygraphs 2.x legend posittioned off the right of graph

I have been trying to update our code to dygraphs 2.x from 1.1.1, but I have encountered a issue with the legend.
I believe it is related to the way our page is structured. We are also using React so this may also have an impact.
The dygraph is on a tab which is initially hidden until the user clicks a button after selecting various options and data sources to generate a time series line chart.
The legend option set to 'always' seems to push the legend off the right of the graph which is not readable by users.Unless they full screen the browser.
After debugging the source I can see that offsetWidth is being used to position the legend and is returning 0. I can only surmise that because the div the chart is inside is only made visible probably after the chart is drawn is messing the position of the legend.
If I regen the chart while visible the legend appears over top the chart as desired. But if I then hide the chart (by clicking on the other tab) and then show the chart (clicking on it's tab) the legend if off to the right again.
I'm not sure how to workaround this.
Presently I reverted back to 1.1.1 which does not have this issue.
Hope someone can suggest something.

angularjs ng-repeat bootstrap position

I'm using a bootstrap tooltip within an angular ng-repeat - its ok except I cant see how I can change the position of the actual tooltip, by default it will popup centred above the icon but I'm looking to have it left aligned from the icon - see image to see what I mean...
how to change bootstrap tooltip alignment
I cant hardcode it as such, as it will be available on separate columns on the same row, so I cant say in CSS its 80px from the left of screen ...typically (its never that easy)...
:-)
if you have any advice...appreciated- thanks

try use attribute "data-placement", Example:
Hover
Here doc tooltip Bootstrap:
http://getbootstrap.com/javascript/#tooltips

Angular strap tooltip auto placement

I'm working with an angular strap dropdown and i want it to stay on screen when it is shown. problem described in the picture.
http://i.imgur.com/cznMsAw.gifv
The dropdown takes in an placement attribute which can be set to auto to help it stay on screen but it isn't good enough because it only calculates from the parent element not the screen width and height.
This can been seen in the code in the tooltip module
https://github.com/mgcrea/angular-strap/blob/master/dist/angular-strap.js#L1067
Line 4416 to 4454
does anyone have a solution to this problem.

Resources