I have an angularJs directive that create an ChartJs chart. I would like to resize the chart when the parent div is resized. According to documentation this is possible with:
.resize()
Use this to manually resize the canvas element.
This is run each time the browser is resized,
but you can call this method manually if you
change the size of the canvas nodes container element.
Here a plunkr: http://run.plnkr.co/KarokZXZ0hGNJpe9/
If you wanna see the files: http://plnkr.co/edit/1cx681?p=info
Try to click button, the chart does not change dimension. If you try to change window size, it's resized.
How can I obtain this without having to change window dimension?
I was having this same issue and used the Firebug extension in Firefox to see what ChartJS is doing when you resize the browser. I found that it is passing some parameters to the resize method. The following worked for me:
$scope.$apply();
chart.resize(chart.render, true);
You may not need the $scope.$apply(), but in my case I found it necessary since I am changing scope properties that cause the canvas size to change.
Related
After setting up the storybook-tailwind-dark-mode add-on for Storybook (by following these steps), my component is no longer displaying correctly in dark-mode in the Canvas view. The component displays correctly while in Document view and other components are displaying correctly in canvas view, so not every component has this issue.
The elements are visible for a split second before the page goes blank. When inspecting the page, I can see all of the elements are there, but they are just not visible.
The only difference to the HTML seems to be the dark class added to the body element.
Any ideas as to why the elements are no longer displayed would be greatly appreciated ⚡️
I've inspected the elements to see what could be causing the elements to not be displayed. I was expecting to see a change to display:none or an element that is in front of the other elements, causing them to be hidden, but it seems the only change is the dark class being added to body.
I've also looked at ./storybook/preview.js and ./storybook/main.js for anything suspicious but I haven't found anything that looks out of place.
There was a modal <div> that had a dark:bg-gray-800 class that was being overlayed over all of the other elements.
The modal was correctly set in light mode to show and hide according to when the modal was open/closed, but this conditional was not applied for dark mode, so the modal was always open, and hiding the other elements.
I'm trying to use CSS with 'position: fixed' to create a dialog box. When I 'open' the dialog box in chrome I can see the 'dialogbox' in the dropdown where the markup of the fixed element is, but it is not rendered in the way I expect.
Chrome shows that the dialog is there and the position is correct, but the rendering is wrong.
I'm expecting fixed elements to be drawn relative to the viewport regardless of where they are in the DOM, and the z-index is larger than all other elements. What am I doing wrong?
I have an amchart in a div whose show/hide is managed by angularjs. Sometimes it charts data that's already in memory. When that is the case, the div opens, chart is rendered and the SVG in there has a width of 10. As a result the chart does not appear on screen. Resize the window a mite and the chart appears because amcharts is listening to resize events I guess. This I think is a known issue - I have seen some SO posts on them and I hope one of them will work for me. My suspicion is that the angular machine does not get cycles to run open the div before amcharts gets to draw its magic (just a hunch no solid evidence.)
Next, I added an event watcher
piechart.write(divs.chart_div.attr('id'));
divs.chart_div.on('yes', 'snowy', function(){ // same with 'shown','resize'
console.info('============= woah ========');
});
Now a strange thing happened. I see the following error stack in my console
Error: [jqLite:onargs] jqLite#on() does not support the `selector` or `eventData` parameters http://errors.angularjs.org/1.3.13/jqLite/onargs
at REGEX_STRING_REGEXP (http://localhost:8100/lib/ionic/js/ionic.bundle.js:8762:12)
at jqLiteOn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11733:39)
at Object.JQLite.(anonymous function) (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11951:17)
at Object.makePieChart (http://localhost:8100/common/services/graphinghelperService.js:528:34)
at obj.controller.$scope.myExt.renderFunc (http://localhost:8100/directives/boxRenderers2.js:179:24)
at _render_it (http://localhost:8100/modules/dashboard/dashboard.js:246:30)
at $scope.showBox.deferred.promise.then.workarea.showChild (http://localhost:8100/modules/dashboard/dashboard.js:310:17)
at processQueue (http://localhost:8100/lib/ionic/js/ionic.bundle.js:21888:27)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:21904:27
at Scope.$get.Scope.$eval (http://localhost:8100/lib/ionic/js/ionic.bundle.js:23100:28)
And that funky behavior is gone ! The chart appears if I click to redraw it out of cached data, hides when click again, and all good. No more bland background colored div to stare at!!.
However, if I change the watch to divs.chart_div.on('shown', function(){ then the event handler is not called and the chart does not appear when rendered out of cached data.
I wonder what's going on.
Looks like something (might be the armchart library?) is expecting jQuery to be available to bind to an event. Angular comes with jqLite, a stripped down version of jQuery so that's why you're getting that exception.
I'm guessing it's something here on this line.
at Object.makePieChart (http://localhost:8100/common/services/graphinghelperService.js:528:34)
Use the full version of jQuery instead to take care of that problem: http://www.bennadel.com/blog/2752-using-jquery-instead-of-jqlite-in-angularjs.htm
I am trying to create a masonary style layout using isotope. The layout must be a responsive grid with flexible columns. However each grid item has an hidden text element which opens when the image is clicked. This text will come from wordpress and therefore as an unknown length. I am trying to use the
.isotope("reLayout");
function to reset the layout when the item is toggled however it does not work. If you alter the size of the browser when the text is visible you can see that that the isotope layout kicks back in and gives the desired effect.
I have created a codepen to illustrate my issue. Any help would be appreciated
http://codepen.io/GlynnJohnson/pen/bLBCJ
Thanks
You need top use:
$container.isotope("layout");
Not
$container.isotope("reLayout");
Codepen
I put my carousel in container item.
In portrail mode, I set height 150, the images display fullscreen in carousel.
But when I change to landscape orientation, there are two white blank in two side of images.
I want change size carousel by setting another value of height. Can you help me solve this problem?
You need to catch the orientationchange event
(http://docs.sencha.com/touch/2.0.2/#!/api/Ext.viewport.Default-event-orientationchange) and upon catching it call a function which will resize your container.
You can try something like this:
Ext.Viewport.on('orientationchange', 'handleOrientationChange', this);
Then in the handle function set your desired size of component:
handleOrientationChange: function(){
Ext.getCmp('idOfMyContainer').setWidth('480px'); //or setHeight() depending on the real problem
}
You could also set the width and height according to the real size of screen, which you can get by calling these methods. Note that orientation change doesn't affect the return values of these so you would need to switch it manually:
Ext.Viewport.getWindowWidth();
Ext.Viewport.getWindowHeight()