I am using angular-google-map api http://angular-ui.github.io/angular-google-maps/#!/api
The info window displays on the top of the marker. Is their a way to change it's position to right with the top aligned with the marker? I saw some infowindows fully custom with a custom position and a custom color but we never have the codes or how it is done. Do you have any exemples with the codes or a tutorial to show me? Thanks
UPDATE:
The Infobox instead of the infowindow can do the trick. But I did not manage to find a way to use the infobox with my angular-google-map ui. Can someone please help?
Inside map object you can set inside window.options param pixelOffset
map: {
control: {},
...
window: {
...
options: {
visible: false,
pixelOffset: {
width: -1,
height: -25
}
}
}
I have asked the same question on their support page and got a valuable reply. You can find it here https://github.com/angular-ui/angular-google-maps/issues/1434#issuecomment-130292587
Since infobox is included in the angular google maps library, all you need to do is provide options as follows
windowOptions:{
boxClass: "YOUR CSS CLASS",
boxStyle: { "YOUR STYLE" }
}
and then use it in your view like this
<ui-gmap-google-map>
<ui-gmap-window options="windowOptions"></ui-gmap-window>
</ui-gmap-google-map>
Fiddle: http://jsfiddle.net/Danscho/L789znLk/
Related
I have this polar chart from react chart js 2. I want these (pointed with red arrow) background lines to be removed. Is it possible to remove these lines? I have tried several solutions like changing background lines image color to background etc. Here is codebox: https://codesandbox.io/s/agitated-wood-2xpk3p?file=/App.tsx. Anyhelp would be greatly appreciated.
As you can see you are getting TS errors because you are using V2 syntax, if you configure your options in the following way it works fine:
const chartOptions = {
scales: {
r: {
grid: {
display: false
}
}
}
};
https://codesandbox.io/s/hidden-tree-8gdqxg?file=/App.tsx
We have been using Froala editor within Wagtail for years, and even though Draftail is nice, the end user wants to continue to use Frola, especially as a license fee has been paid for it, and it offers extra functionality that they use.
I have used the following which works great for any version of Wagtail prior to version 2.2:
https://github.com/jaydensmith/wagtailfroala/pull/5/commits/d64d00831375489cfacefa7af697a9e76fb7f175
However in Wagtail version 2.2 this has changed:
https://docs.wagtail.org/en/stable/releases/2.2.html#javascript-templates-in-modal-workflows-are-deprecated, this causes selecting images within Froala to no longer work correctly. You get to pick the image, but it fails to move onto the 2nd dialog to select alignment and then click insert.
It looks like wagtailfroala/static/froala/js/froala.js needs to be changed to add onload to the ModalWorkflow.
$.FE.RegisterCommand('insertImage', {
title: 'Insert Image',
undo: false,
focus: true,
refreshAfterCallback: false,
popup: true,
callback: function () {
var editor = this;
return ModalWorkflow({
url: window.chooserUrls.imageChooser + '?select_format=true',
responses: {
imageChosen: function(imageData) {
editor.edit.off();
var $img = $(imageData.html);
$img.on('load', function() {
_loadedCallback(editor, $(this));
});
// Make sure we have focus.
// Call the event.
editor.edit.on();
editor.events.focus(true);
editor.selection.restore();
editor.undo.saveStep();
// Insert marker and then replace it with the image.
if (editor.opts.imageSplitHTML) {
editor.markers.split();
} else {
editor.markers.insert();
}
var $marker = editor.$el.find('.fr-marker');
$marker.replaceWith($img);
editor.html.wrap();
editor.selection.clear();
editor.events.trigger('contentChanged');
editor.undo.saveStep();
editor.events.trigger('image.inserted', [$img]);
}
}
});
},
plugin: 'image'
});
But what needs to be added to make it work? I can't find any documentation or examples on how do to this? Please help or point me in the direction of the documentation for how this should be done.
Thank you so much in advance.
I am working on AngularJS base web application.
I used Angular-highchart.js to draw line graph.
In this application, there are 80 of graph lines in a page. So, I want to highlight graph line when users click it.
But I couldn't find out proper options to highlight graph. Are there any options to highlight graph line when users click it?
Yes, you can use series' click event for this:
plotOptions: {
line: {
events: {
click: function() {
this.update({
lineWidth: 5 // increase the width of the line
});
}
}
}
}
Live demo: http://jsfiddle.net/kkulig/2j5fedwh/
API reference: https://api.highcharts.com/highcharts/series.line.events
I am using golden layout in single page application. Golden layout normal 'open in new window' works pretty well (https://jsfiddle.net/shafaq_kazmi/xs5r6mma/6/)
var myLayout = new GoldenLayout({
content: []
}, $('#layoutContainer'));
myLayout.registerComponent('example', function(container, state) {
container.getElement().html('<h2>Hello World</h2>');
});
myLayout.createDragSource($("#button"), {
type: 'component',
componentName: 'example',
componentState: {
text: 'Button'
}
});
myLayout.init();
But when I am trying to integrate it in SPA, when I popout any widget, the whole application gets loaded in popup window instead of the particular widget. Do I need to have some specific configurations to fix this behavior? How can I achieve the actual popout feature.
Any help on this?
Here is PR which fixed the issue with GL when used with SPA. Use latest js from github and try again
https://github.com/deepstreamIO/golden-layout/pull/152
Just started using progressbarwidget, I want the text from my textTpl to be center aligned within the progress bar at all times regardless of what percentage the bar is at, when I mean centered I mean the center of the progress bar and not center of the progress value. See fiddle below and attached image
https://fiddle.sencha.com/#fiddle/1dm7
I seen a reference on another thread to set position : relative, this does set the text to the center of the bar but doing so means the bar does not show the progress anymore. I see when the progress bar is created it has 2 divs, containing the following classes, x-progress-text and x-progress-bar, both contain the text value.
Thanks in advance
You can extend ProgressBarWidget, and override the template, like:
Ext.define('Fiddle.view.ProgressBarWidget', {
extend: 'Ext.ProgressBarWidget',
xtype: 'fiddle-progressbarwidget',
template: [{
reference: 'backgroundEl'
}, {
reference: 'barEl'
}, {
reference: 'textEl',
style: {
left: 0,
right: 0
}
}],
});
Working example: https://fiddle.sencha.com/#fiddle/1dn4
The definitive solution is to add an onResize handler on the progress bar container:
onResize: function () {
var me = this,
progressBar = me.down('progressbarwidget');
// Set text width to element width so that it can be centered
progressBar.setWidth(progressBar.el.getWidth());
}
This idea is copied from what happens in Ext.grid.column.Widget.onResize().
The solution from user CD.. doesn't work (nor does the one in user2751034 comment)
in the case you have two-color-text, like in Classic theme:
even if you reproduce the template in Sencha sources (with textEl children of barEl):