CODEWITHSUNDEEP
htmlcssmobile
Panama Jack
Panama Jack

Reputation: 24448

CSS - Link not clickable inside absolute DIV - mobile

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;
}

Upvotes: 0

Views: 2685

Answers (1)

cereallarceny
cereallarceny

Reputation: 4983

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.

Upvotes: 1

Related Questions