I've used #angular/cdk/drag-drop library to implement a drag and drop functionality. It works well, however when dragging an element, the layout of dragged item (div containing mat-angular dropdowns, delete icon and drag handle) breaks.
As soon as I place the item it is back in place looking as it should (img 1), but it looks like during dragging the item loses its parent div, therefore it is not inline, as well as not retaining the same dimensions (img 2)
This is how it looks before dragging
This is how it looks during dragging
I've attempted to solve this with adding a class with required width and height + set its display property to inline flex, however it does not help.
Related
Pop-up window comes with the default search bar in SPO tenant site. So I don't have access to modify any CSS in the search field. I want to set the div in behind when the window pops up.
Explain what you exactly mean. If you want some element in your html appear behind some other element in a single page then you need to use z-index css property. Put an integer as the value of z-index property. The first html element (the one that is behind the other) should have value less than the one that is on the front. give both of the elements z-index.
What I am trying to do is similar to an image map - in reverse. I have a large image (over 2000x2000) and want to give links to coordinates on the image. There are items in the image that I would like users to be able to jump directly to with having to scan over the whole image manually. Is this possible with either CSS or HTML by adding links to coordinates or adding anchors to the image? I would use js if that was an option as well.
Interesting. The notion of jumping to a position on a web browser window is limited in general. Here are some general possibilities, without specific implementation details:
You could treat it as a sprite image, and use JavaScript/jQuery to change the image coordinates so that the point of the image you are interested in moves to the the top left of a div positioned on the page. But the portion of the image above and to the left of that point would not be visible.
You could define it as a background image in a div, and define an invisible table or invisible fixed-position divs within that div, and link to specific divs or cells in that overlay. In this case, a y-coordinate in the image where the div or cell is positioned would probably move to the top of the browser window, but horizontal positioning would be problematic. If the div or cell you target is off the screen to the right or left, the page would shift to expose it, but I don't thing that you could guarantee where the specific x-coordinate would be positioned. Also, if the target is near the bottom of the web page, that target point will not move to the top. But this solution wouldn't require JavaScript/jQuery - it would just mean linking to element ID's on the page.
This is almost the same as #2... You could overlay the image with divs and/or a table at higher z-levels, and link to those divs or table cells.
You could use JavaScript/jQuery to position a fixed-size div with visible borders so that its upper-left corner is at the position in the image that you are interested in. I think you'd still have to link to that div in order to make sure that it is visible in the current viewport.
You should be able to lay out a form over the image and move the cursor to fields on the form. I think that the form could be transparent so that the cursor appears to be moving around on the image. But you'd need be confident that the data entry cursor is sufficiently visible on top of the image to be useful.
I'm attemping some weird CSS effects involving 3D rotations and transforms to set up a scene. This is basically a "menu".
HTML: Each <li> tag contains a text label and I add :after in CSS to insert an image.
Problem: The li element is so large I can't get to some other images "behind" it. The image inserted is 100x160, and the label is drawn over the image itself, but the <li> element (according to the inspector) is 123.411 x 268.049. The label is 123.411x268.049 (no idea why it has huge margins on top and bottom), and the image is showing to be 123.411x197.458 (due to perspective as I've pulled it to the front). The 197 is OK. The 268 is wasting 70 pixels ... blocking access to the next image.
Forcing the heights, even through javascript doesn't help. It only alters the position (position is fixed anyway). I'm about to give up and just make a big clickable image-map that overlays the whole thing, but will hurt my hover effects without using javascript.
Says it wants code to have a jsfiddle link, how stupid
Update: Try https://jsfiddle.net/6ut694yf/1/ (only a section of what I'm doing) and check the height of the candle. Why is it so much larger than the image itself? Hover effects demonstrate the problems. You'll need a large screen to make the viewport wide enough so items aren't on top of each other as I've not yet added scaling for smaller screens (and mobile will have a whole different CSS, hence why all this is in CSS and not in HTML).
This isn't a good answer, so if someone has a better one, PLEASE let me know. What I ended up doing was making a bunch of divs which I positioned over the images (a dozen of them) using the CSS calc() feature in order to attempt to keep the overlays lined up with the display of the images ... remember its 3D perspective and completely sized on the screen, so the actual calculations would be intense. Even window height can affect horizontal position since the rotated plane will change size. So you end up with positions like this:
[data-item="incense"] {
top: calc(42vh - 65px);
left: calc(70vw - 25px - 12vh);
height: calc(35px + 12vh);
width: calc(170px + 6vh);
z-index: 5002;
}
Z-index lets the items overlap, using a higher Z-index for objects that are closer in space. Then these items are added with class for position and display with no content. A bit jQuery does this:
// hot is a temporary hack to correct 3D distortion of targets
$(".hot").hover(function() {
tagname = "#" + $(this).attr('data-item');
$(tagname).addClass('hovered');
$(tagname).trigger('mouseenter');
}, function() {
tagname = '#' + $(this).attr('data-item');
$(tagname).removeClass('hovered');
$(tagname).trigger("mouseleave");
});
$(".hot").click(function() {
tagname = "#" + $(this).attr('data-item');
$(tagname).trigger("click");
});
The data-item attribute of the divs using the "hot" class (the clear overlays used for hot-spots) tie the hotspot to the actual item id being activated. I then add a little extra CSS and create a ".hovered" class to duplicate the natural :hover effects.
The documentation for core-overlay leaves a bit to be desired. Ideally, I want to use a core-overlay that positions itself on the screen not centered horizontally and vertically, but rather more like a dropdown menu.
I'm not using core-dropdown-menu due to other restrictions on the click-event handling on the menu itself (it needs to stay opened and have a resizeable menu div).
It is possible to position an overlay by adjusting its CSS at runtime.
overlay.style.position = 'absolute';
overlay.style.top = (input.offsetTop + input.clientHeight) + 'px';
overlay.style.width = input.offsetWidth + 'px';
overlay.open();
Variable overlay points to an overlay element. Variable input would point to an element underneath of which the overlay should appear.
This approached worked for me well in Polymer 0.5, but it is also applicable to Polymer 1.x. Please note that there is no overlay component per se in Polymer 1.x. Instead one should create a separate element with behaviour Polymer.IronOverlayBehavior.
I have access 2007 form which contains some of the lists and one image that I used to re-size using on-click event but when it gets re-sized it becomes behind my lists even if I set the position property to "bring to front" and "send to back" for my lists and by the way it works well with text fields ; any suggestion ?
I haven't tried Access 2013, but up until Access 2010 Listboxes and a few other elements do not support z-order positioning (behind or in front of other controls). They are always on top.
In 2010 I use Layouts to expand / shrink the form as elements grow. Another thing you could try is to put the image in a new form, and set the window border, title, etc to nothing. Then you could open the image (as a form) and position it using DoCmd.MoveSize