I'm using jquery.flot.tooltip plugin to show tool-tip for pie charts created through jquery.flot.pie, but when loading the pie-chart in a pop-up the tool-tips are showing in the background of the pop-up.
Can anyone help me how to change/set z-index for that tool-tip so that it will appear in the foreground.
jquery.flot.tooltip uses div with 'id' flotTip for rendering the floating tool-tip, adding css z-index:10000 for that 'id' solved my problem.
open: function (event, ui) {
$(ui.tooltip).css('z-index',100000);
...
Related
I have a kendo grid which each row has an edit button. I am using Bootstrap to add a tooltip to the edit button, as well as other things. The edit button brings up a window to edit the attributes of the row model.
The tooltip kept getting cut off by the boundaries of the grid. To solve this I used placement=body when initializing the tooltips.
The problem I have now, is that the the tooltip does not hide if the button is clicked, and the editor window comes up. I tried changing the trigger to just be 'hover', but that did not help.
I tried doing ('[title]').tooltip('hide') in the edit event of the grid, but that doesn't seem to work at all.
I believe the problem has to do with 'edit' opening a kendo window. Because the other buttons with tooltips are fine, as they trigger a BootstrapDialog.
What happens is that the .tooltip has a z-index of 1070 while .modal has a z-index of 1050.
You can add the following to your css to ensure that .tooltip is displayed below .modal :
.modal{
z-index: 1071;
}
Of course, this means that you absolutely can't have a tooltip displayed from inside your modal, so this maybe doesn't suit your specific needs.
If that's the case, you should be able to add another class to your tooltip div and override the z-index on this class.
I'm well aware of the monkey-patch nature of this fix, but I've looked for a solution for this for weeks and couldn't find anything better.
KendoUI version 2013.3.1119
Using Kendo MVVM
I have a color selector that I have build that uses a flat color picker and a color picker using a palette. They both function correctly but the layout of the flat color picker is off where the track for the slider does not render to the appropriate width.
If the flatcolorpicker is loaded directly in a page and not in a kendo window it renders correctly.
There are not any special settings I am applying.
<div id="flatColorPicker"
data-role="flatcolorpicker"
data-bind="value: colorPaletteValue, enabled: enableColorSelection, events: { change: colorPaletteChange }">
</div>
What I have tried
Removed all other html around it, same result within the window.
Tried to forcefully set the size of the track.
Used Chrome dev tools to manipulate the CSS.
Stepped through the Kendo UI javascript to see where it renders initially.
What worked, but not a resolution
Manually re-size the window using the mouse after initial load, it then corrects itself.
Has anyone else experienced this or has any other ideas to try?
KendoUI Window settings:
{
title: "Set Color",
resizable: false,
draggable: false,
width: 550,
height: 300,
actions: ["Close"]
}
Ran in to the same issue:
I don't know if this will fix it for you, but I fixed it by making sure the picker's container element was visible before instantiating it. My code used to look like:
$picker.kendoFlatColorPicker({
// config
})
$container.show(); // $container contains the $picker
Turns out if I just reverse the order it started working:
$container.show(); // $container contains the $picker
$picker.kendoFlatColorPicker({
// config
})
So in this little example I have a square (thumbnail) following the mouse around, in the final product it will be the place where the dragged item will be visible. I ran into a problem however that if I try to drag and drop a svg <image> in Firefox it bugs out and doesn't follow the mouse anymore.
http://jsfiddle.net/Lx7besrw/
Same applies if you have different mouseEvents, they all bug out and stop working until you unpress left mouse button and move again. I've tried e.preventDefault e.stopPropagation and return false to prevent weird behaviour but without luck.
Any help would be GREATLY appriciated.
This solved my problem:
$(document).on('dragstart', function(e){
e.preventDefault();
});
https://bugzilla.mozilla.org/show_bug.cgi?id=511188
I am building a page which contains many charts, which are displayed one at a time depending on which tab you are looking at.
The chart in the initially active tab renders correctly. However when I click to another tab, the chart is not rendered properly.
Presumably this is because the hidden field does not have dimensions until it is made visible. In fact if I resize the window the chart will correct it's proportions, and render so that it fills the available width.
I can fix this problem by explicitly defining the chart size via css, but this defeats the responsive aspect of the charts.
Can anyone tell me how to trigger the same NVD3 event which gets activated when the window resizes? That way I can bind it to the selection of a new tab, and hopefully remedy the rendering issue.
I had the same issue (charts on multiple tabs), and this is the only thing that I could get to work.
$(function () {
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
window.dispatchEvent(new Event('resize'));
});
});
I have a feeling, however, that all of the charts are being re-rendered, regardless of whether they are on the active tab (visible) or in the non-selected tabs (hidden).
Does anyone know how to ensure ONLY the active chart gets resized / redrawn?
I figured out how to trigger the resize event I needed. In my case the tabs are driven by bootstrap. So I simply modified my bootstrap show tab event to trigger a page resize event as well. It's a little indirect, but it gets the job done:
jQuery('#myTab a').click(function (e) {
e.preventDefault()
jQuery(this).tab('show')
jQuery(window).trigger('resize'); // Added this line to force NVD3 to redraw the chart
})
Just add this JavaScript:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
window.dispatchEvent(new Event('resize'));
})
hidden.bs.tab is the event that fires after a new tab is shown as per the Bootstrap docs. This code fires a resize event after each tab change.
Reason For New Answer
Vanilla Javascript is necessary for a lot of people in 2018. As a lot of frameworks and Javascript libraries that exist today do not play well with jQuery. Once upon a time answering all Javascript problems with a jQuery solution was acceptable but it is no longer feasible.
Problem
When loading C3.js or D3.js graphs, if the viewport is not actively in site during page load the graphs do not render correctly.
Example
If you type in the URL then open a new tab and then go back after your page loads.
If you refresh the page that has your graphs on it then minimize the browser and open it back up after the page has loaded.
If you refresh or go to the page with the graphs then swipe away to a new window on your computer. Then go back to the page with the graphs after they have loaded.
In all these cases your C3.js / D3.js graphs will not render correctly. Typically you will see a blank canvas. So if you were expecting a bar chart, you would see a canvas without the bars being drawn.
Background
Although I have seen this question answered I needed an answer that did NOT use jQuery. Now that we have reached the days of everything can not be fixed with jQuery I thought it seemed fit to provide a vanilla Javascript answer to this question.
My team faced the issue that the C3.js / D3.js graphs would not load if you refreshed the page and swiped away or minimized. Basically if you did not stay on the page and keep it in site till it was done loading you would not see the graphs till you resized the page again. I know this is a problem that happens to everyone using C3.js / D3.js but we are specifically using Lightning in Salesforce.
Answer
Our fix was to add this in the controller function that initializes the charts. Anyone can use this in any function they write to initialize their C3.js / D3.js graphs regardless of their stack. This is not Salesforce dependent but it does indeed work if you are facing this issue in Salesforce.
document.addEventListener('visibilitychange', () => {
console.log(document.visibilityState);
window.dispatchEvent(new Event('resize'));
});
I was facing same issue. I was using ng-show to make div hidden . Once I replaced ng-show with ng-if I am able to see graph drawn in expected behavior. Explanation:
When we use ng-show or ng-hide to make div hidden it only changes it display property but div will be in dom.
When we use ng-if div is removed from dom and again added to dom so internally it performs redraw operation on nvd3 graph too. Hence we see correct graph instead of squished one.
The event that usually triggers a redraw is the window resize event -- NVD3 doesn't use a custom event for this. You can control this yourself though; the usual definition is
nv.utils.windowResize(function() { d3.select('#chart svg').call(chart); });
(where "#chart" is the element that contains the graph). There's nothing stopping you triggering the code on another event or even just running the redraw code explicitly when you change the tab.
a more efficient approach would be to use the chart.update() method
var chart_x = nv.models.somechart()
var chart_y = nv.models.somechart()
..... show charts
jQuery('#myTab a').click(function (e) {
e.preventDefault()
jQuery(this).tab('show')
if(jQuery(this)...something === '..x..')
chart_x.update(); //CALL THE UPDATE
else ...
})
I'm using a dojo dijit dialog box to popup data for the lightbox effect.
The problem is that dojo dynamically changes the style attributes of "containerNode", so that if the box is bigger than the browser window a scroll bar appears. It sets "overflow:auto" dynamically.
I know this makes sense to do, but I want to override this and force the user to open up the browsers as the modal/lightbox looks really bad otherwise.
How can I change this behaviour? Sample code would be helpful!
Thanks
You can subscribe to 'show' method of your dialog and modify any styles you need.
dojo.connect(yourDialogWidget, "show", yourDialogWidget, function(){
dojo.style(this.containerNode, "overflow", "hidden");
});