I need to implement the drag&drop feature of items which are placed inside the translated container (like transform: translate3d(60px, 60px, 0px);). The container is from the external library and I can't remove it.
Below there is a simplified example of my problem. Dragging on Chrome/Firefox works fine. On Safari it doesn't (after removing transform is starts to work):
https://jsfiddle.net/siggp/hpb1j0m9/3/
It looks like draggable works on coordinates before the transform operation (changing value to transform: translate3d(30px, 30px, 0px); makes that drag ghost is visible but cut).
Is there any way to fix it?
Related
I tried
:controls="false" on vl-map
The buttons disappear but you can still zoom with trackpad or mouse and move the map
then I tried setting min-view and max-view on vl-view but this has no effect on zoom
then I set the extent on vl-view and that partially works: I cannot move the map but can still zoom
How do you make the map completely static ?
Though i'm not familiar with the Vue-library, Several of the interactions you mention are derived from the "interaction" module, and not the "controls" module. See for example:
https://openlayers.org/en/latest/apidoc/module-ol_interaction_DragRotateAndZoom-DragRotateAndZoom.html
https://openlayers.org/en/latest/apidoc/module-ol_interaction_MouseWheelZoom-MouseWheelZoom.html
I would check if it's possible to remove these interactions the way you removed the controls. Alternatively you can call your map object and use removeInteraction(interaction):
https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html#removeInteraction
I need to be able to animate drag and drop in my vertical list. I used vuedraggable, wrapped my list in a transition-group and it all worked sweet. Until I fetch new data from the server. Now because of the introduction of transition-group for a split second the old data and the new data live together in the DOM causing the expansion of the list and pushing subsequent div down and back up.
This is kind of expected per the docs:
the DOM operations for insertion and/or removal will be executed
immediately on next frame (Note: this is a browser animation frame,
different from Vue’s concept of nextTick).
Regardless of being able to drag and drop the element, if we were to fade in/fade out the new/old elements they will co-habitate for the time of the animation, which is not great as seen in this pen
Anyway to fade out, change the data, then fade in the new one, while maintaining the height of the list?
Note that without fade the problem is still obvious:
Pen of my issue: click the switch data button to see the issue.
Turns out it's pretty know issue. By reading through this thread and toying with this example, i was able to achieve something to my liking by using:
list-leave-active {
display: none;
}
Resulting Pen
A css fix may be to wrap the contents within a box of some height and set overflow hidden.
So, even when new elements co-exist the jump in scrollbar can be avoided.
I have a NotificaitonBar-Control as content element of a detail view, which is a element of a splitApp.
In Google Chrome there is no problem, but on the iPad there is a display issue. The notificationBar is between the master- and the detail-View.
The masterview overcovers a part of the notificationBar and the detail-view did not.
How can I resize the notificationBar. I did not find any method or propertie to modify the notificationBar.
If I look at the API I do not understand why it does not match to the detailview:
A NotificationBar is a "toolbar" that can be added to a page to show messages and notifications from the application. Its position, height and width is inherited from the element that the notification bar is added to.
SAPUI5 NotificationBar API
How can I solve this issue?
From the namespace sap.ui.ux3 I assume that the NotificationBar is not really responsive and therefore not working on smaller devices like the iPad.
I found a demopage for the NotificationBar which has some interesting information:
If the NotificationBar should be smaller than per default a separate CSS-class must be added to the NotificationBar
This means you have to do the resizing via good old CSS. The example they gave looks similar to the following snippet.
style.css (or however your custom CSS file is named)
.slimNotificationBar {
left : 60px;
right: 100px;
}
To make it work on both iPad and Desktop, you should make it responsive by adding media querys (see here: https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries)
Your.controller.js (or however it's named)
// after instantiating your NotificationBar
oNotificationBar.addStyleClass("slimNotificationBar");
Link to the demopage: https://sapui5.hana.ondemand.com/sdk/test-resources/sap/ui/ux3/demokit/NotificationBar.html
However, if you prefer a built-in and responsive solution, you might want to try the following approach.
Add a sap.m.Toolbar to your detail page, which has a button that opens a sap.m.MessagePopover.
See the following example: https://sapui5.netweaver.ondemand.com/sdk/explored.html#/sample/sap.m.sample.MessagePopover/preview
I posted this a week or so ago:
Position simplemodal modal on top of an existing div
and thought that I had solved my problem, but when the window is scrolled, the modal container moves.
I think I need to change it from fixed to absolute positioning, but when I change it in the script, the right side of the container lines up with the left side of the div (but it does stay in the same place vertically).
Here's what I'm doing now:
$('.slider-caption #large-spot-two').click(function (e) {
$('#basic-modal-content-two').modal({appendTo:"#slider1", autoPosition: false});
return false;
});
What's the best way for me to keep the modal container above the div, whether the page is scrolled or not?
Thanks,
Wendy
The plugin was created to be fixed (not move when the page is scrolled, etc.). Changing the CSS position works until the page is resized or scrolled, as you have found.
The code required to change that behavior would require more work that I currently have time for. You might try BlockUI, as it sounds like that would fit your needs better?
I'm using a TabLayoutPanel in a GWT application, attached to the RootLayoutPanel of the page.
Inside each tab I have a ScrollPanel, which is used to display a FlexTable.
Is it possible to make the TabLayoutPanel grow vertically, so the user can scroll the entire page using the browser scroll bar, instead of using the internal ScrollPanel ?
The short answer is: It's not possible with LayoutPanel's. The reason: LayoutPanel's are specific for applications that need to fill the browser client area, or in other words the part that is visible by the user. One of the problems with browsers is to have a widget that has exactly the height of the visible area and also automatically resizes when the browser window is resized. This is one of the problems the LayoutPanels solve.
If you want to use the browser scrollbar and be able to create pages longer than the visible area use the 'normal' Panels.
BTW just FYI you are aware the FlexTable is slow in rendering and if possible better use Grid.
Just add a new style to the TabLayoutPanel:
this.addStyleName("tab-style-content");
And define in your CSS as:
.tab-style-content .gwt-TabLayoutPanelContent
{
overflow: auto;
}
Thus, the property overflow will be overwritten in the gwt-TabLayoutPanelContent and the scrollbar will be shown automatically.
If you make the TabLayoutPanel bigger than the root panel, you will get a browser scroll bar.
If I want to achieve something like this, I always put the TabLayoutPanel in a SimplePanel and add the SimplePanel to the RootPanel. I guess this is not the best way, but it works.
public void onModuleLoad() {
//Create TabPanel
TabPanel tp = new TabPanel();
tp.add(new HTML("Foo"), "foo");
tp.add(new HTML("Bar"), "bar");
tp.add(new HTML("Baz"), "baz");
tp.selectTab(1);
// Create SimplePanel and add TabPanel
SimplePanel sp =new SimplePanel();
sp.add(tp);
// Add SimplePanel to the root panel.
RootPanel.get().add(sp);
}