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.
Related
What I want to do is putting a sort of "container" on top of a Paper component, but the container should overflow the top of the Paper.
I attempted to do this by setting negative marginTop for container so it would overflow:
const useStyle = makeStyle({
container:{marginTop:"-20px"}
});
const classes = useStyle();
return <Paper elevation={1}>
//the 'container' i chose here is Button component
<Button className={classes.container}>login</Button>
// and some other stuff we don't need to care.
</Paper>
It worked ok, but the container is not supposed to be clickable, so it shouldn't be a Button.
And for components other than Button ( i tried with Container,Grid,Paper,Card), the Paper will automatically resize the paper so it could keep the element inside, which is maybe a bug in Material.
Is there anyway, within the scope of Material ,to make this overflow possible? Any help would be appreciated.
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.
I have an issue of z-index stacking on my react component. The codebase has been so complex, and when I tried to do suggestion from here it doesn't work. The simplified problem maybe like this.
What I am trying to do is simply to make a background overlay when a sidebar menu is opened (by default it's hidden). This sidebar menu is the child of the top navbar. And the div overlay background is the sibling to the top navbar.
Something like this:
<div className="overlay" />
<TopNavbar>
<SideMenuBar>
</SideMenuBar>
</TopNavbar>
TopNavbar has z-index=900.
If I set div overlay z-index to 901 and SideMenuBar z-index to 902, the div overlay will still cover all screen.
If I set div overlay z-index to 900 it will cover the background, but the TopNavbar will not be covered.
The other question I wonder when I read here is:
why is this demo works fine while the z-index of span5 is less than span 2, 3, and 4?
In this case React portal will help to render the child element in DOM where you want as per your requirements so that you can handle the layering of element easily.
Portals provide a first-class way to render children into a DOM node
that exists outside the DOM hierarchy of the parent component
Please follow this tutorial this will help you get out of this problem click
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.
I have a set of bootstrap nav-tabs and inside these tabs are nice long information sections. Problem is that our team does not want to have all this information on such a long tab so we have made the tabs container element have an overflow: scroll property. This works great but now we are stuck with an impossibly long inline scroll section and it would take a good 30-40 mouse scrolls to get to the bottom. This will lose us site traffic.
I know that the definition of being a fixed position is being fixed relative to the browser window but I am in need of a way to use bootstrap scrollspy nav-list menu inside of the parent div and not have it able to transverse outside of that div. So we need it the same way that the class="fixed-to-top" attribute works so that is a functionable nav menu but no matter what we try it seems that the fixed positioning always reverts back to being relative to the broswer.
Is it possible to do what we are trying to do?
The code below is not a complete implementation, but I hope it gives you an idea of how it could be done. I.e. change the position property if the fixed div goes outside of its parent/container.
var $nlm = $('#navListMenu');
$(window).bind('scroll', function(){
if($nlm.offset().top < $nlm.parent().offset().top)
$nlm.css({ position:'absolute', top:0 });
else
$nlm.css({ position:'fixed'});
}