var myWindow = Ext.create('Ext.window.Window', {
header: false,
style: 'background-color: transparent; border: false',
bodyStyle: 'background-color: transparent; background-image: url(graphics/ss_message.png); background-size: 100% 100%;',
id: 'ss_banner',
width: 250,
height: component.getBox().height,
border: false,
bodyBorder: false,
frame: false,
cls: 'noPanelBorder',
});
I'm using the window xtype because I can't seem to make a container/panel appear, even if I add renderTo: Ext.getBody(), it doesn't work.
The window appears as such:
I've also tried to use css I'm rather unsure on which properties to use.
Removing window border
If you really want to remove borders of a window, you can use following configuration:
var myWindow = Ext.create('Ext.window.Window', {
// ...
// What shows the 'border' is actually just the background of the window
// shown via padding (+ 1px of actual border)
style: 'padding: 0; border-width: 0;',
// Show automatically
autoShow: true,
// Disable resizing, if you want
resizable: false,
});
Here is a working fiddle of removing window borders
Showing a panel
However, if you don't want to use any of the window functionality and could do with a container or a panel, you should use them. All you should need is the renderTo configuration you mentioned, to render the panel to the body or to any other element. I don't know why this configuration does not work for you, it works perfectly in the fiddle below.
You can try adding a unique class to the panel via cls configuration property and search for it in the rendered HTML code. It is possible it is rendered correctly and just not visible for some reason.
Here is a working fiddle of rendering panel to element
EDIT:
If you need to display only image, there is an image component in ExtJS, Ext.Img. You can work with this component the same way I described for the panel.
This works for me:
var myWindow = Ext.create('Ext.window.Window', {
// What shows the 'border' is actually just the background of the window
// shown via padding (+ 1px of actual border)
style: 'padding: 0; border-width: 0;',
});
Related
I have created a map with clusters created like so:
//create clustering markers
var markers = L.markerClusterGroup({
spiderfyOnMaxZoom: false,
showCoverageOnHover: false,
zoomToBoundsOnClick: false,
singleMarkerMode: true, //makes sure that single incidents looks the same as clusters (but are still treated as single markers)
iconCreateFunction: defineClusterIcon
});
var layer_group = L.geoJSON(geoJson);
markers.addLayer(layer_group);
map.addLayer(markers);
map.fitBounds(markers.getBounds());
In the defineClusterIcon function, I create a SVG which then is converted to HTML and defines the icon:
return L.divIcon({
iconSize: new L.Point(40, 45),
html: html,
classname: 'leaflet-div-icon'
});
I now want to be able to change the style of the cluster (or marker, which also is styled as a cluster), when pressing it - and I want it to return to the original styling when pressed again.
Instead of changing the style of the actual svg elements, I am thinking that it might be easier to just change the style of the class:
.leaflet-div-icon {
background: rgba(0,0,0,0);
border: none;
}
Where I then want to have a border when the cluster/marker has been pressed. I do not know, whether it is possible to change the class within the on clusterclick or click functions, or if it can be done in another way.
My code, as it is now can be found here - where the wanted effect also can be seen on the controls on the right side: http://bl.ocks.org/skov94/f006cd45d2daa2bc67e4f514774fdd0d
Instead of switching the outline property of the leaflet-interactive div, i would toggle a class as you did with the controls on the right side (say a outlined class).
This class toggling has to be done in a "onclick" event handler. Leaflet clustering provide its own cluster click events (clusterclick).
The possible targets of the clusterclick event seem to be either the text, circle, or svg nodes of the cluster. We want to get the enclosing div with class leaflet-interactive to add or remove the outlined class on it. This will be made easily possible with Element.closest:
Javascript file
markers
[...]
.on('clusterclick',function(c) {
console.log("pressed");
map.closePopup();
c.originalEvent.target.closest(".leaflet-interactive")
.classList.toggle("outlined");
});
Then, simply change the style of its circle descendants with css:
CSS file
.leaflet-interactive.outlined circle {
stroke-width: 2px;
stroke: blue;
}
Edit: If you're not familiar with css, the selector means: circle nodes that are descendants of nodes with classes leaflet-interactive AND outlined.
I have been tasked with moving existing ExtJS 4 Panels on a page, rendered to separate divs, into an Accordion layout; I have moved the divs into the Accordion as items, and the Panels are being rendered well enough.
In my particular situation, however, the Accordion Panel applies some (10px all round) padding that I would like to remove.
I have a suspicion that it might be to do with some preexisting table styling that I unfortunately can't remove. What stylesheet modifications should I be making to specifically target the accordion control and its contents, such that the Panels contained within the Accordion Panels fit against all four edges?
If it might not be CSS styling, or if it can be as easy as an Accordion config/property, what should I be setting to remove this whitespace? I have tried some of the settings that looked promising, but have not fixed the issue.
Or, in the more negative circumstances, do I have to move the Panels directly into the Accordion, which brings with it yet more problems?
Essentially, how do I make the contents of each Panel in an ExtJS Accordion Layout fit the width and height of their individual Accordion Panel exactly without whitespace?
Accordion panel ExtJS code:
var accordion = Ext.create('Ext.panel.Panel',{
bodyPadding: '0px',
width: '370px',
autoHeight: 'false',
layout: 'accordion',
items: [
{title: 'Drawing', html: '<div id="Image" style="padding: 0px, margin: 0px; border-spacing: 0px; height: 350px"></div>'},
{title: 'Production Processes', html: '<div id="Process" style="padding: 0px, margin: 0px; border-spacing: 0px"></div>'},
{title: 'Production Item Details', html: '<div id="Details" style="padding: 0px, margin: 0px; border-spacing: 0px"></div>'}
],
renderTo: Ext.get('Accordion')
});
My workaround has been to take the pre-existing panels and apply collapse control variables:
var drawingPanel = Ext.create('Ext.panel.Panel', {
animCollapse: false,
collapsible: true,
autoWidth: true,
titleCollapse: true,
collapseFirst: false,
collapsed: true,
...
This starts the panel as collapsed, and collapse/expand/beforerender listeners to set/get cookies that control a persisted state:
...
listeners:{
expand: function(){
var now = new Date();
var exp = new Date(now.getTime() + 2592000000); //number of milliseconds equal to 30 days from now
Ext.util.Cookies.set('panelCollapsed', 'false', exp);
},
collapse: function(){
var now = new Date();
var exp = new Date(now.getTime() + 2592000000); //number of milliseconds equal to 30 days from now
Ext.util.Cookies.set('panelCollapsed', 'true', exp);
},
beforerender: function (){
var cookieSet = Ext.util.Cookies.get('panelCollapsed');
if(cookieSet == 'true')
{
Ext.apply(Ext.getCmp('panel'), { collapsed: true });
}
else
{
Ext.apply(Ext.getCmp('panel'), { collapsed: false });
}
}
}
});
Other attributes of the panel have been stripped out to demonstrate the salient points.
This implementation does consider a panel on its own; the expand and collapse listeners could feasibly control the collapsed state of other panels as necessary. Admittedly, this probably isn't as efficient as getting the accordion control to work properly, but if they don't work as expected, this is a start.
I am trying to add custom buttons to the left and right navButton but a spacer seems to appear if I set a backgroundImage. If only the title text is set the spacing is correct. Here is my example to reproduce the issue, I added a borderColor to show that the image is not the culprit.
var win = Ti.UI.createWindow({
width: '100%',
height: '100%',
backgroundColor: 'white'
});
var leftBtn = Ti.UI.createButton({
backgroundImage:"/images/headerCmdMenu.png",
width: '81px',
height:'74px',
title: 'left',
borderColor: 'red',
borderWidth: 1
});
var rightBtn = Ti.UI.createButton({
width: '81px',
height:'74px',
title: 'right'
});
win.leftNavButton = leftBtn;
win.rightNavButton = rightBtn;
var nc = Ti.UI.iOS.createNavigationWindow({
window : win
});
nc.open();
Here is a screenshot of the view…
http://imagebin.ca/v/13wq8Jrn1hst
Any ideas how to fix this?
Thanks.
Chris
Note: I did ask this on the official forums, but got no answer after 14 days.
http://developer.appcelerator.com/question/160022/leftnavbutton-and-rightnavbutton-spacer-appears-if-using-backgroundimage-#comment-196608
This is quite long to answer but it might still help someone else looking for same issue.
For images in left/right nav buttons, look for the below points first:
If you only set title, then it will work as expected.
If you set only backgroundImage (not set width & height), then the image will be stretched to take the full space.
If you set only backgroundImage with some width & height, then the button will behave as a normal button with expected spacing and area.
If you set both backgroundImage & title, then it will be the case of this post.
Also remember that always use correct size image files when intend to use as left/right nav buttons.
I have a JQuery UI dialog with two columns of form elements. I'm using CSS float: left to create the columns. The problem is the dialog only shows a single column. What am I missing?
http://jsfiddle.net/CV9RG/1/
You columns has float:left it means if they don't have enough space on the parent to stay side by side they break in a new line. You can set a width for the dialog to auto and fixed for your columns to make it fit:
$('#mydialog').dialog({
modal: true,
resizable: false,
autoOpen: false,
dialogClass: 'no-close',
width : 'auto'
})
and CSS :
.select-col { float: left;width:250px}
See this demo http://jsfiddle.net/CV9RG/11/
In my page, I have the below divs
<div><h2>Test</h2></div>
<div id="chart_div" style="width: 1200px; height: 600px;"></div>
I don't have any style, other than the default provided by bootstrap 3.
But the google chart is rendered with so much empty space at left (see the screenshot)
is there a way to fix this?
Fix Update :
As per davidkonrad suggestion, I added the below option in my chart
chartArea : { left: 30, top:30 }
Now it works
It is not caused by bootstrap - can easily reproduce the behaviour in a "fresh" bootstrap 3. It is caused by the enormous width of the container.
When chartArea is not defined, then chartArea.left, top, width and height is per default set to auto, which means the chart tries to center itself inside the container, both vertically and horizontally. You can observe that yourself by setting a border around the container. Set chartArea.left to force the chart-position where you want it, for example :
var options = {
chartArea : { left: 80 }
};
or
var options = {
chartArea : { left: "10%" }
};