I'm not able to click links inside a div the is position:absolute. It seems to not work on mobile android as it works fine on the desktop in Chrome and even ie8.
As soon as I remove the style it works. The class msg-inner is only for jQuery which has it scrollTop no styling on it. I've read many answers and to use z-index or position:relative on the inner div but none works. I even tried using position:fixed on msg_container and same problem. The inner div scrolls and everything looks right but just the links are broken, BTW sporadically some will work and some don't. I took away all styling and just put plain links inside to see if it was a format issue and still nothing.
<div id="msg_container" class="absolute" style="overflow-y:auto;width:100%;height:75%">
<div class="msg_inner">
.... stuff in here with links
</div><!--msg inner-->
</div><!--msg_container-->
CSS
.absolute {
position: absolute;
}
Your #msg_container shouldn't have a position of absolute, the .msg_inner should. Try this:
HTML
<div class="msg_container">
<div class="msg_inner">
.... stuff in here with links
</div><!--msg inner-->
</div><!--msg_container-->
CSS
.msg_container {
position: relative;
width: 400px;
height: 400px;
}
.msg_inner {
position: absolute;
top: 0px;
left: 0px;
}
Also note that I made msg_container a class, not an ID. It's considered bad practice to have multiple ID's of the same name. While I don't know your code of course, I assumed that you might have multiple msg_containers on a page... so I used a class instead.
Related
I have problem scrolling with touch scrolling, it's working just fine with mouse and keyboard arrows but not by touching.
This is the html code:
<div class="drive-dashboard">
<div id="dashboardContainer" class="dashboard-container"/>
</div>
And this is the CSS part
.drive-dashboard {
height: 100%;
width: 100%;
position: absolute;
overflow: auto;
}
Any suggestions where the problem is?
I've run into this before and in React i've been able to solve it with something like:
`document.addEventListener("touchstart", function() {}, true);`
But, I have to admit sometimes i've needed to use it and sometimes not, so I am not sure which html elements respond and which don't.
Here is some reference
I have an element that overlays another element. The main element is a canvas where elements constantly have mouse interactions and the element directly overtop of it just shows elements that act as little markers. Same position, same size and it's important the overlay is overtop of the canvas.
What would it mean to make this "overlay" only exist visibility wise? As in having no possible user input because for its purposes it's not really there to be interacted with, just showing something.
Removing selection in CSS stops you from clicking on it but it's still overtop of the other element and doesn't allow mouse events. Hiding the element removes its presence but also makes it invisible.
In a normal desktop application you would just draw something to the screen and add functionality if you wanted but with HTML those two things are inherently the same.
I believe adding in the CSS the following code solves your issue:
.no-interaction {
z-index : -5
}
OR
.interaction {
z-index : 5
}
Turns out all it took was setting the pointer-events CSS attribute to none on whatever you want to have no presence.
I figured it would be a little more interesting than that, but there's a built in way in CSS.
<div id="canvas"></div>
<div id="overlay"></div>
#canvas, #overlay {
width: 500px;
height: 500px;
position: absolute;
}
#canvas {
background: blue;
}
#overlay {
background: red;
pointer-events: none; // right here
}
$('#canvas').click(function() {
alert('Clicked');
});
https://jsfiddle.net/ufsy33aw/
Is it possible to place an Html element outside of a newly generated one?
Well, I have an IONIC2 app that generates a new element <scroll-content>, the issue is that this element has some CSS properties that affects the child elements.
So, what I would like to do it either to place that my div element outside of that <scroll-content> or even better to disable the CSS properties of <scroll-content> on the div
Here is the code, so I can make things clearer:
HTML
<ion-content id="contentPadding">
<div class="header">
</div>
</ion-content>
When Ionic renders the above code, the browser generate something like this:
HTML
<ion-content id="contentPadding">
<scroll-content>
<div class="header">
</div>
<scroll-content>
</ion-content>
CSS:
.top{
background:black;
}
//generated
scroll-content{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
display: block;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
will-change: scroll-position;
}
I guess, it's clearly shown that a new element called <scroll-content> is being created and <div class="header"> inherits all the css properties of <scroll-content> which I would like to avoid in my case.
Your header (child) is inheriting its parent's (scroll-content) CSS styling. You need to clear any unwanted inherited rules by explicitly changing the inherited styles. For example, if you want to reset the css-display, write
.header {
display: initial;
}
Hopefully in the future we can avoid this with the all:initial trick - however, it currently isn't supported enough.
I'm embedding a page that hosts a silverlight application inside an IFRAM inside my html page. now I'm trying to display a div over the IFRAM (containing the silverlight page) using z-index but the div is always hidden under the silverlight content. how can I achieve this?
Note: if I embed another page that doesn't use silverlight everything works fine.
It's hard to say without code but something like this should do it. Remember, when working with z-index, you have to have position explicitly set.
Also, you can actually target and style iframes like this:
<style>
.iframe-wrapper iframe {
display: block;
position: absolute;
z-index: 0;
}
.foo {
display: block;
position: absolute;
z-index: 1000;
}
</style>
...
<div class="iframe-wrapper">
<iframe ... />
</div>
<div class="foo">bar</div>
Is there a valid non js way to turn a collection of headings, paragraphs and lists into one url? (like in advertisements?)
<a href="http://www.example.com" class="allclickable">
<h2>Fresh Bread</h2>
<p>Delivered to your door</p>
<ul>
<li>Daily</li>
<li>Fresh</li>
<li>Bread</li>
</ul>
</a>
This does not validate and I do want the href to be display as block element (so also the space around the text is clickable).
Cheers
Might be a less ugly way to do this but:
HTML:
<div id="wrapper">
<h2>Fresh Bread</h2>
...
<a class="allclickable" href="http://www.example.com"></a>
</div>
CSS:
#wrapper { position: relative; }
.allclickable { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
Basically you just pust the link over the stuff. Only downside is that the text underneath is unselectable. But it's valid :).
Of course you will have a problem with IE, see solution here: problem with z-index of an empty div layer in IE8
Use html5. In html5 this is allowed.
But be aware that some browsers will generate a different DOM where they will remove the link and place it inside every block element. So
<a><h3>header</h3><p>para</p></a>
will become
<h3><a>header</a></h3><p><a>para</a></p>.
Not that big of a deal, but it might mess up some CSS selectors.