Relative Content

Tag Archive for htmlcssangular

overlap images on navbar angular

ı have a website and ı want to change ui.There is a navbar in my project.My goal is just to overlap the images on the home page with the navbar. I used and changed z-index many times. But I couldn’t overlap the image and the navbar. And i will make the navbar transparent.

Put small text to the right of an input field

I’m meant to have an input field meant to be disabled on page load until a small text of “Edit” next to the input field is clicked enabling it. I can’t for the life of me figure out how to place this text where it’s meant to. I haven’t yet added the disabled/enabled functionality but that’s straight forward.

Create Two Spotlights using box-shadow property

I’m trying to create a guide that have two spotlights simultaneously. When I trying to add another spotlight, both the spotlight area looks shadowy. How to avoid the shadows of one spotlight area to overlap with other spotlight areas? The box-shadow is to spotlight the desired area while making the other parts of the page looks like there is an overlay above it.
Only one spotlight
Here is how it looks like when there is only one spotlight.
Two spotlights
Here is how it looks like when there is two spotlights.

Scroll Not Working Properly In Angular Project

As you can see below, the overflow I use in my html code does not work properly on mobile devices. It does this problem only on mobile devices and does not cause problems on desktop devices

Directive class styles are not allowing in Angular?

I have a directive which on hovering over the element adds an overlay on that element. Now the each class in the dynamically added element has 5 to 8 properties each so i dont want to perform like add hostbinding or setStyle on the element using Renderer2. I have added the added the classes in the component on which the directive will take place but it is still not applying the class properties.