When you zoom in AmCharts scroll bar, "Show all" button appears and overlays with link to AmCharts website. Is there a way to force AmCharts link or "Show all" button to be shown in left corner?
Found nothing in docs.
It's possible to hide "Show all" button by setting chart's zoomOutText property to empty string:
var chart = AmCharts.makeChart('chartdiv', {
type: 'serial',
zoomOutText: ''
...
});
and place your own custom button anywhere you wish:
HTML
<div class="container">
<div id="chartdiv"></div>
<button class="show-all-button">Show all</button>
</div>
CSS
.container {
position: relative;
...
}
#chartdiv {
position: relative;
width: 100%;
height: 100%;
}
.show-all-button {
position: absolute;
top: 15px;
left: 15px;
...
}
To make the button working add the following click event handler:
var showAllButton = document.querySelector('.show-all-button');
showAllButton.addEventListener('click', function() {
chart.zoomOut();
});
This approach is useful when you need to add custom controls over your chart.
Indeed, there are no config options to move the "Show all" button.
However, you can set the position of branding link using creditsPosition
I.e.:
AmCharts.makeChart("chartdiv", {
"type": "serial",
"creditsPosition": "bottom-left",
...
});
Related
I had this kendo grid with popup editing here. How to setting Update/Cancel button and textbox size so it have a same size with k-window?
Here I provide a demo
You can tell Kendo how big the window is supposed to be, no need for some CSS or JavaScript: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/editable.window
editable: {
mode: "popup",
window: {
title: "My Custom Title",
animation: false,
width: "800px",
height: "400px"
}
},
Additionally, you have to set the width of the input elements to 100%. Make sure to put this declaration after you've loaded the CSS files from Kendo! Otherwise these changes will not be applied.
<style type="text/css">
.k-edit-form-container {
width: initial;
}
.k-edit-form-container input,
.k-edit-form-container textarea,
.k-edit-form-container .k-datepicker,
.k-edit-form-container .k-timepicker,
.k-edit-form-container .k-numerictextbox {
width: 100%;
}
</style>
I want my app to have no title bar but still be closeable, draggable, minimizable, maximizable, and resizable like a regular window. I can do this in OS X since there is a [titleBarStyle] 1 option called hidden-inset that I can use but unfortunately, it's not available for Windows, which is the platform that I'm developing for. How would I go about doing something like this in Windows?
Above is an example of what I'm talking about.
Assuming you don't want window chrome, you can accomplish this by removing the frame around Electron and filling the rest in with html/css/js. I wrote an article that achieves what you are looking for on my blog here: http://mylifeforthecode.github.io/making-the-electron-shell-as-pretty-as-the-visual-studio-shell/. Code to get you started is also hosted here: https://github.com/srakowski/ElectronLikeVS
To summarize, you need to pass frame: false when you create the BrowserWindow:
mainWindow = new BrowserWindow({width: 800, height: 600, frame: false});
Then create and add control buttons for your title bar:
<div id="title-bar">
<div id="title">My Life For The Code</div>
<div id="title-bar-btns">
<button id="min-btn">-</button>
<button id="max-btn">+</button>
<button id="close-btn">x</button>
</div>
</div>
Bind in the max/min/close functions in js:
(function () {
var remote = require('remote');
var BrowserWindow = remote.require('browser-window');
function init() {
document.getElementById("min-btn").addEventListener("click", function (e) {
var window = BrowserWindow.getFocusedWindow();
window.minimize();
});
document.getElementById("max-btn").addEventListener("click", function (e) {
var window = BrowserWindow.getFocusedWindow();
window.maximize();
});
document.getElementById("close-btn").addEventListener("click", function (e) {
var window = BrowserWindow.getFocusedWindow();
window.close();
});
};
document.onreadystatechange = function () {
if (document.readyState == "complete") {
init();
}
};
})();
Styling the window can be tricky, but the key use to use special properties from webkit. Here is some minimal CSS:
body {
padding: 0px;
margin: 0px;
}
#title-bar {
-webkit-app-region: drag;
height: 24px;
background-color: darkviolet;
padding: none;
margin: 0px;
}
#title {
position: fixed;
top: 0px;
left: 6px;
}
#title-bar-btns {
-webkit-app-region: no-drag;
position: fixed;
top: 0px;
right: 6px;
}
Note that these are important:
-webkit-app-region: drag;
-webkit-app-region: no-drag;
-webkit-app-region: drag on your 'title bar' region will make it so that you can drag it around as is common with windows. The no-drag is applied to the buttons so that they do not cause dragging.
I was inspired by Shawn's article and apps like Hyper Terminal to figure out how to exactly replicate the Windows 10 style look as a seamless title bar, and wrote this tutorial (please note: as of 2022 this tutorial is somewhat outdated in terms of Electron).
It includes a fix for the resizing issue Shawn mentioned, and also switches between the maximise and restore buttons, even when e.g. the window is maximised by dragging the it to the top of the screen.
Quick reference
Title bar height: 32px
Title bar title font-size: 12px
Window control buttons: 46px wide, 32px high
Window control button assets from font Segoe MDL2 Assets (docs here), size: 10px
Minimise:
Maximise:
Restore:
Close:
Window control button colours: varies between UWP apps, but seems to be
Dark mode apps (white window controls): #FFF
Light mode apps (black window controls): #171717
Close button colours
Hover (:hover): background #E81123, colour #FFF
Pressed (:active): background #F1707A, colour #000 or #171717
Note: in the tutorial I have switched to PNG icons with different sizes for pixel-perfect scaling, but I leave the Segoe MDL2 Assets font characters above as an alternative
I use this in my apps:
const { remote } = require("electron");
var win = remote.BrowserWindow.getFocusedWindow();
var title = document.querySelector("title").innerHTML;
document.querySelector("#titleshown").innerHTML = title;
var minimize = document.querySelector("#minimize");
var maximize = document.querySelector("#maximize");
var quit = document.querySelector("#quit");
minimize.addEventListener("click", () => {
win.minimize();
});
maximize.addEventListener("click", () => {
win.setFullScreen(!win.isFullScreen());
});
quit.addEventListener("click", () => {
win.close();
});
nav {
display: block;
width: 100%;
height: 30px;
background-color: #333333;
-webkit-app-region: drag;
-webkit-user-select: none;
position: fixed;
z-index: 1;
}
nav #titleshown {
width: 30%;
height: 100%;
line-height: 30px;
color: #f7f7f7;
float: left;
padding: 0 0 0 1em;
}
nav #buttons {
float: right;
width: 150px;
height: 100%;
line-height: 30px;
background-color: #222222;
-webkit-app-region: no-drag;
}
nav #buttons #minimize,
nav #buttons #maximize,
nav #buttons #quit {
float: left;
height: 100%;
width: 33%;
text-align: center;
color: #f7f7f7;
cursor: default;
}
nav #buttons #minimize:hover {
background-color: #333333aa;
}
nav #buttons #maximize:hover {
background-color: #333333aa;
}
nav #buttons #quit:hover {
background-color: #ff0000dd;
}
main {
padding-top: 30px;
overflow: auto;
height: calc(100vh - 30px);
position: absolute;
top: 30px;
left: 0;
padding: 0;
width: 100%;
}
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<nav>
<div id="titleshown"></div>
<div id="buttons">
<div id="minimize"><span>‐</span></div>
<div id="maximize"><span>□</span></div>
<div id="quit"><span>×</span></div>
</div>
</nav>
<main>
<div class="container">
<h1>Hello World!</h1>
</div>
</main>
</body>
</html>
Ran into this problem and my solution was to keep the frame but set the title to blank i.e.
document.querySelector("title").innerHTML ="";
That solved my problem i.e. I got a window which can be closed, maximized or minimized without a title on it.
I want to close CKEditor if I click outside its window.
Stopping propagation on a div enclosing the textarea being replaced by ckeditor, like so
$('#resumo_div').click(function (event) {
event.stopPropagation();
});
and then detecting the click this seems to mostly work.
The exception are clicks on ckeditor widgets like the Link widget which are being detected as being outside. Is there a standard way to doing this?
Your problem is that the event handler is going to start with the widgets as they are the top-most elements that were clicked. By the time the event gets to your encompassing div, the widget will have been enacted. Instead of enclosing the ckeditor in a div (overlay for my example that when clicked will close the ckeditor). Move the ckeditor outside of the div (overlay).
<div class="overlay"></div>
<div id="ckeditor-container"></div>
<style>
.overlay {
position: fixed;
width: 100%;
height: 100%;
}
#ckeditor-container {
position: fixed;
top: 50%;
height: 200px;
margin: -100px auto 0 auto; /* center the container */
}
</style>
After discovering How to hide ckeditor when we click outside of the editor? I was able to improve the solution posted there that satisfied my needs by intercepting clicks in widgets
$('body').click(function(event){
if($(event.target).parents('#articleEditor').length <= 0 && $(event.target).parents('.cke_dialog').length <= 0)
$('#articleEditor').hide();
})
In my kendo mobile app I have some listviews that require more than one action. I need something like what is show in the Link Items & Detail Buttons demo but more flexible. In my case, I need to cover the following scenarios (all sections clickable):
[icon][text of the item]
[text of the item][icon]
[icon][text of the item][icon]
...where [icon] is some font icon.
I've started on a solution but before I go any further, I want some feedback to make sure I am not overlooking a better approach or something already built into Kendo.
Each "part" of the <LI> needs to perform a distinct action when clicked. To handle this, I have a click binding on the <UL>. I also have a data-command-name attribute on each element in the <LI> template so that I know what the user tapped/clicked.
I have put together a fiddle but jsFiddle is reformatting the HTML part when it loads (I think because of the template script tags). Once you load the fiddle please replace the HTML with the following to get it working:
HTML
<div id="itemsView" data-role="view" data-model="vm">
The red, silver and blue sections along with the X & Y are not part of the design, they are there just to make my intent more obvious.
<ul data-role="listview" data-bind="source: items, click: clickHandler"
data-template="itemsTemplate"></ul>
<script id="itemsTemplate" type="text/x-kendo-template">
<div class = "left-column" data-command-name="left (red)" > X </div>
<div class="right-column" data-command-name="right (blue)">Y</div >
<div class = "content-column" data-command-name="content (silver)"> #=Name# </div>
</script>
</div>
CSS
div.left-column {
float: left;
width: 25px;
margin-top: -5px;
padding-top: 5px;
margin-left: -5px;
padding-left: 5px;
cursor: default;
background-color: red;
}
.content-column {
margin-top: -5px;
margin-left: 25px;
margin-bottom: 0;
margin-right: 25px;
padding-top: 5px;
cursor: default;
background-color: silver;
}
.right-column {
float: right;
width: 25px;
margin-top: -5px;
padding-top: 5px;
cursor: default;
background-color: blue;
}
JavaScript
var vm = kendo.observable({
items: [{
Selected: false,
Name: "Item1"
}, {
Selected: false,
Name: "Item2"
}, {
Selected: false,
Name: "Item2"
}],
clickHandler: function (e) {
var cmd = e.target.context.attributes["data-command-name"]
if (cmd) {
alert(cmd.value);
}
},
});
kendoApp = new kendo.mobile.Application(document.body, {
transition: "slide",
platform: 'android'
});
Here is the fiddle: http://jsfiddle.net/8Kydw/
So to summarize my questions:
1) Is there a better/built-in way of doing this?
2) If not, any tips on the CSS? For instance, why in Android is the height of the list items smaller than prior to my customization?
1) I think the strategy that you are using is completely fine and acceptable for Kendo UI Mobile.
2) Kendo UI Mobile applies some pretty specific styling in the way of line-height and a few other items that will affect how the list item is displayed if you then customize margin or padding with your own CSS. I wouldn't worry too much about it though.
jqGrid textbox contains jQuery UI autocomplete.
I tried to add button to open combocode below based on Oleg great answer in Add multiple input elements in a custom edit type field .
If dropdown menu is open and jqgrid is scrolled, dropdown menu position does not change.
How to anchor dropdown menu to textbox so that it remais in textbox corner on scroll ?
{"name":"Custtype","edittype":"custom","maxlength":15,
"editoptions": {"custom_element":function(value, options) {
return combobox_element(value, options,'24','Klliik0_nimetus','Klient')}
,"custom_value":function(elem, operation, value) {
return $("input", $(elem)[0]).val();
}
}
}
function combobox_element(value, options, width) {
var elemStr = '<div><input style="width:' + width + 'px" value="' +
value + '"/>' +
'<button type="button" style="height:16px;vertical-align:center" class="ui-icon-triange-1-s" style="margin-left:-1px" tabindex=-1/></div>';
var newel = $(elemStr)[0];
var input = $("input", newel);
input.autocomplete({
source: 'AutoComplete',
position: { collision: 'flip flip' }
}
)
.autocomplete('widget').css('font-size', '12px');
return newel;
}
index.aspx contains style from Fixed positioned search box with Autocomplete suggestions
but dropdown menu does not move with textbox if jqgrid is scrolled vertically.
<style>
.ui-autocomplete
{
max-height: 300px;
overflow-y: auto; /* prevent horizontal scrollbar */
overflow-x: hidden; /* add padding to account for vertical scrollbar */
padding-right: 20px;
z-index: 99999;
position: fixed;
top: 0px;
margin: 20px 0px 0px 0px; /* The top margin defines the offset of textbox */
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete
{
height: 100px;
}