I am using Tabs and CCK Fieldgroup Tabs module to put node GMap CCK location map in a tab.
When I put GMap location map in one of the node tabs (Tabs module) other than first one (default), the map view does not centre properly the marker. It slides one width off the screen to the east (right). I need to press "scroll right" arrow once on the map controls to have the marker centred properly.
I have read all the Drupal threads touching this issue and all I found are suggestions to play with resizeMap() function.
Anyone knows where exactly to play with it? Where to apply the change to the code to accomplish the task in the least invasive way?
Attached screenshots:
What solved my problem was to override tabs ccs styles from drupal-tab.css:
.ui-tabs-hide {
left:-15000px;
position:absolute;
top:-15000px;
visibility:hidden;
}
to:
.ui-tabs-hide {
position:absolute;
visibility:hidden;
left: 50%;
top:-15000px;
}
in my theme css.
The crucial part is to override left css property of position:absolute.
Works for firefox, safari and google chrome. Not tested in IE as I am sitting on Mac ;-)
If anyone knows better solution for this map display issue please share.
Related
In my markup, I add a label on it using (x,y) co-ordinates using "markup.markups[0].getClientPosition". This works, but if I change camera mode or rotate it will lose it place, so am wondering how I can put it back to the new position as per the new markup position?
I understand I have to add event listener for "CAMERA_CHANGE_EVENT", but how I should relate the label with its corresponding svg markup, what if there are more than one markups?
Thanks in advance.
I'd suggest to use the 3d markup extension to make things easier - it supports navigation right out of the box
Follow here to get started: https://forge.autodesk.com/blog/3d-markup-icons-and-info-card
Or SVG markups work well as well: https://forge.autodesk.com/blog/create-pushpin-markup-svg
I'm trying to use a tiny context menu library, to provide context menu to events, however, the menu position always shows off in the bottom corner instead of by the event were "right-click" took place.
In this example, I have tried using FullCalendar with React component, I have also tried using vanilla javascript version and got the same issue.
Here is my sandbox
https://codesandbox.io/s/fullcalendar-react-7nggi?fontsize=14
Any ideas on how I can go about fixing such issue?
I managed to resolve this issue with a workaround, by taking the coordinates of right-click event and re-position the menu accordingly.
$('.fc-event').on('contextmenu', function (e) {
$('.bootstrapMenu').offset({ top: e.pageY, left: e.pageX })
});
This one is getting tricky for me.I have the google map in my page which is working properly ,above it lies a canvas. I need to make the google map clickable .i.e when i click on the canvas ,the map should behave normally .I have added pointer-events:none;attribute.It works properly in Firefox ,chrome and IE11.
However my requirement is I need to make it clickable in IE9 on wards,which am unable to replicate. How to do that?
If any one can replicate the behavior in a fiddle ,that will be really helpful to me.
There's an old jQuery hack that simulates pointer-events:
Listen for a click event on the canvas and in the click handler:
Hide the canvas: $(this).hide();
Ask the document to get the element at the clicked xy: var $map=$(document.elementFromPoint(event.clientX,event.clientY); (Adjust clientX/Y by any offset to the map/canvas elements) If the map is the only element under your canvas, you could define $map at the start of your app and avoid this step.
trigger the same event on the google map: $map.trigger(event);
redisplay the canvas: $(this).show();
I have an app that is designed to start up in Landscape mode, this all works fine. I add an imageview to cover the screen and then add a scrollview halfway down. Again all works fine.
I then add a series of uiimageviews again all fine. I notice if i try to click the far right image there is no response but the other images preceding this work fine. With lots of digging around I discovered the viewcontroller keep portrait coordinates. I have a tabbar at the bottom when I click to go to another view and then go back to the main view the far right uiimageview not works. Has anyone seen this before? I am guessing the view is redrawing itself when it comes back?
You should use .bounds property instead of the .frame property of the view.
Bounds honor the UIVIew's coordinate system.
It's well explained in this answer: https://stackoverflow.com/a/8181113/402223
See this article which answered my question here
- (void)viewDidLayoutSubviews
{
// fix for iOS7 bug in UITabBarController
self.selectedViewController.view.superview.frame = self.view.bounds;
}
note don't add it to viewdidload method.
Thanks Martijn you put me on the right track.
I'm using GWT 2.4 Drag and Drop API to drag elements for data transfer between widgets. Implementing the Drag and Drop behaviour was straight forward but I'm having problems changing the cursor while dragging an element.
I've done a bit of research and I've found a few articles on how I could achieve this.
This article http://blog.vjeux.com/2012/css/css-cross-browser-drag-cursor.html suggests that it can be done by setting the cursor property to whichever acceptable value we would want. I've tried (cursor: -webkit-drag; or cursor: move;) on the element to be dragged or the element where an element can be dropped but only added a small image to the bottom right of the cursor icon.
Took a look at this http://www.html5rocks.com/en/tutorials/dnd/basics/, it is said that the cursor(effect) can be changed when dragging or dropping by setting effectAllowed and dropEffect from the dataTransfer object. Despite the GWT Drag and Drop API not exposing none of these properties, I can set them through JSNI yet the effect was the same as before (with CSS).
I've found these questions HTML5 Drag & Drop Change icon/cursor while dragging and Changing Mouse Cursor for HTML5 Drag Drop Files (GMail Drag Drop) on the same subject but none seemed to help to actually change/replace the icon while dragging.
Any help is appreciated.
Test environment:
Ubuntu 12.04.1
Chrome 22
Cheers,
I guess the easiest way is to use:
RootPanel.getBodyElement().getStyle().setCursor(Cursor.MOVE);
whenever you start moving and:
RootPanel.getBodyElement().getStyle().setCursor(Cursor.DEFAULT);
whenever your done.
Also you can set CSS-property:
cursor: whatever;
on whatever element you want. You would usually use it like this:
div.over-this-div-the-cursor-becomes-different:hover {
cursor: move;
}
see: http://www.w3schools.com/cssref/pr_class_cursor.asp