I've got a problem to render an esri Map with sencha touch. I display a tabPanel with a tab containing the map, and 3 other tabs.
My problem is that when I'm on another tab than the map-tab, when I resize the window (or change orientation of phone), the map diseapears.
I identified the source of the problem. when I resize the window being on another tab, the map tab goes from current size to 0x0 to the new size. Problem is that when the width and height are set to 0x0, the Esri Map require tiles of dimension 0x0, and then the error appears.
I tried to set minWidth and minHeight to my tab but without success.
do you have any clue how i could fix that ??
thank you in advance !
I believe I had the same problem (I didn't really know the exact cause at the time). Whenever the orientation of the screen changed I was manually changing the dimensions of the esri map to match the panel and then firing the map's reposition and resize methods. However, if this was fired from a different panel, the basemaps would drop out of the map.
I was able to fix this by calling the following function every time orientation changed, or the map panel was set as active:
function resizeMapDiv(){
if (appPanel.getActiveItem() === mapPanel){
var mapdiv = document.getElementById('mapDiv');
var mappanel = document.getElementById('mapPanel');
if ((mapdiv != null) && (mappanel != null) && (mapdiv.style.width != mappanel.style.width)){
mapdiv.style.width = mappanel.style.width;
mapdiv.style.height = mappanel.style.height;
map.reposition();
map.resize();
}
}
}
Related
I'm trying to set the initial scroll position of a ListView in react native.
Right now, I'm doing this:
componentDidMount() {
let i = this.props.images.indexOf(this.props.current);
if(i != -1) {
this.refs.listView.scrollTo({ x:i*this.props.width, y:0, animated:false });
}
}
where the images prop is the datasource for the ListView, the current prop is where I want to be initially scrolled to, and the width prop is the width of the component. (The component scrolls horizontally).
This works, but there's a delay between the initial render and the call to componentDidMount, giving me a flash of the end of end of the list before the list is scrolled.
Is there a way of setting an initial scroll position of the list? Or better way of doing this to get rid of that flash?
On iOS you can use the ScrollView#contentOffset to set the initial scroll position of a ListView, which inherits the properties of ScrollView.
If you are looking for an Android solution, the ListView.scrollTo method you are calling seems like the best bet for the general case.
That said, if I interpret your code sample correctly, you are using the ListView for a paginated, horizontal list, perhaps with the help of the pagingEnabled property? If this is the case, on Android you might look at using ViewPagerAndroid instead, and setting the initialPage property.
I use scrollviewer in my windows store application, but after calling SetHorizontalOffset function some times scrollviewer doesn't change horizontal scrolling. The same thing with vertical scrolling. Does anybody know how to work with it? May be scrollviewer scroll only for visibility for offset (I mean that if it's see that user can see offset its doesn't scroll at all)
It appears the ScrollViewer's offset lags by one frame.
If the below code is run every frame, diffPrevDesiredActual is always 0. That is to say, the value provided by ChangeView does not take affect immediately.
...
var scrollPosition = /*some new value*/;
MyScrollViewer.ChangeView(null, scrollPosition, null, true);
var current = MyScrollViewer.VerticalOffset;
var diffDesiredActual = scrollPosition - current;
var diffPrevDesiredActual = previous - current;
previous = scrollPosition;
...
private double previous;
If nothing on your screen is animating when you change the scroll offset, then it is possible the ScrollViewer won't show the new value until something triggers the draw of a new frame. To test this hypothesis, try adding an infinite animation (eg ProgressRing) to ensure frames are constantly being drawn.
i want to show the thumbnail of the previous image taken by camera instead of the cancel button while camera is running ...
Is that possible ?? Need help ..
Yep. Just capture the last image, keep it in memory (or save it to disk), then use it as one of the controls. We can do this using the overlay property of the Titanium.Media.showCamera function. Here is a quick example:
First we need an overlay view to show the image.
var overlayView = Ti.UI.createView();
var imageView = Ti.UI.createImageView({
width:44,
height:44,
left : 5
});
overlayView.add(imageView);
Now this is the function we use to open the camera with the overlay view. Note that we don't have controls so you need to add those (for closing etc). All we do right now is set the overlays image.
Titanium.Media.showCamera({
success:function(event) {
// called when media returned from the camera
imageView.image = event.media;
},
cancel:function() {},
error:function(error) {},
saveToPhotoGallery:true,
allowEditing:true,
mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO],
overlay : overlayView,
showControls: false // This is important!
});
To really make this work, you may need to save the event.media in a global variable, or use a similiar technique make sure overlayView will not be nulled out / garbage collected.
Also this is a barebones solution, not very robust, but this is the basic method I would use!
ALL!
I have dojo tooltip which is connected to an element.
It is created when/after page is loaded/ready. BUT, the problem is that content is loaded dynamically, when connected element is hovered the first time.
Content is loaded via AJAX. And - as far as the size of HTML content is unknown (widget is created, but content is still empty) - after hovering and content loading - Tooltip is appeared, but ARROW does not point to a connected element, but shifted down.
How to reposition a widget arrow after content is loaded dynamically?
Thanx a lot in advance!
UPDATE
After some investigations i have found, that position of tooltip Arrow is adjusted by
.tundra .dijitTooltipRight .dijitTooltipConnector class height (14px by default)
So i made quick and dirty fix for now:
function fixArrowForTooltip() {
// FIX ARROW (TODO HACK)
$(".tundra .dijitTooltipRight .dijitTooltipConnector").css("height",
"14px"); // restore to default for multiple tooltips in the page
var newHeight = $("#dijit__MasterTooltip_0").height() - 14;
$(".tundra .dijitTooltipRight .dijitTooltipConnector").css("height",
newHeight + "px");
// end of FIX
};
And placed this into onShow()...
I know, this should be re-worked, but.. WORKS PERFECT :)))
For any number of tooltips in the page arrows point DIRECTLY to connected elements :)
I'm creating a seemingly simple dojo 1.8 web page which contains an app layout div containing a tab container and an alarm panel below the tab container. They are separated by a splitter so the user can select how much of the alarms or the tabcontainer they want to see.
Here's the example on jsfiddle:
http://jsfiddle.net/bfW7u/
For the purpose of the demo, there's a timer which grows the table in the alarm panel by an entry every 2 seconds.
The problem(s):
If one doesn't do anything and just lets the table grow, no scroll bar appears in the alarm panel.
If one moves the splitter without having resized the browser window first, the splitter handle ends up in a weird location.
Resizing the browser window makes it behave like I would expect it to begin with.
Questions:
Am I doing something wrong in the way I'm setting things up and that's causing this problem?
How can I catch the splitter has been moved event (name?)
How do I resize the splitter pane to an arbitrary height? I've tried using domStyle.set("alarmPanel", "height", 300) and this indeed sets the height property... but the pane does not resize!
Any help greatly appreciated!
I forked your jsFiddle and made some modifications to it: http://jsfiddle.net/phusick/f7qL6/
Get rid of overflow: hidden in html, body and explicitly set height of alarmPanel:
.claro .demoLayout .edgePanel {
height: 150px;
}
This tricky one. You have two options: to listen to splitter's drag and drop or to listen to ContentPane.resize method invocation. Both via dojo/aspect:
// Drag and Drop
var splitter = registry.byId("appLayout").getSplitter("bottom");
var moveHandle = null;
aspect.after(splitter, "_startDrag", function() {
moveHandle = aspect.after(splitter.domNode, "onmousemove", function() {
var coords = {
x: !splitter.horizontal ? splitter.domNode.style.left : 0,
y: splitter.horizontal ? splitter.domNode.style.top : 0
}
dom.byId("dndOutput").textContent = JSON.stringify(coords);
})
});
aspect.after(splitter, "_stopDrag", function() {
moveHandle && moveHandle.remove();
});
// ContentPane.resize()
aspect.after(registry.byId("alarmPanel"), "resize", function(duno, size) {
dom.byId("resizeOutput").textContent = JSON.stringify(size);
});
Call layout() method after changing the size:
registry.byId("alarmPanel").domNode.style.height = "200px";
registry.byId("appLayout").layout();