Jump to content

CSS Android Issue


Go to solution Solved by Irate,

Recommended Posts

Hello, I'm having a problem with a popup I'm making.  This problem is only in the android default browser however it works well in any other browser.  

 

With JavaScript, I found out that when I click anywhere within the popup, it doesn't tell me I'm in #popup, it tells me that I am in the #popup_wrapper

 

I imagine it's something witht he size because when i zoom out it works well.  

What would cause this issue?

 

Thanks in advance.

 

My code is actually inline and not like here.  I just put it out like this because I thought it would be easier to read.  

<style type="text/css">
    #popup_wrapper{
        overflow: hidden;z-index: 100;width: 100%;height: 100%;background-color: #c0c0c0;background: rgba(0, 0, 0, 0.5);position: fixed;top: 0px;left: 0px;font-family: 'Karla', Arial, Sans-Serif;color: #5a5353;
    }
    #hor_wrapper{
        width: 100%;height: 450px;position: relative;top: 15%; z-index: 101;
    }
    #popup{
        height: 450px;width: 450px;margin: 0 auto;background-color: #fff;border-radius: 7px;box-shadow: 3px 3px 5px #000; z-index: 110;
    }
    #popup_header{
        width: 400px;height: 150px;margin: 0 auto;
    }
    img{
        width: 250px;height: 100px;position: relative;left: 75px;margin: 15px auto;
    }
    h1{
        text-align: center; font-size: 25px; margin-bottom: 0px;
    }
    p{
        width: 350px;height: 40px;margin: 15px auto;line-height: 20px;font-size: 16px;
    }
    #opt1{
     line-height: 100px;border: 2px dashed #fcc4ab;outline: #fcc4ab solid 2px;text-align: center;color: #fff;height: 100px;width: 150px;background-color: #fcc4ab;float: left;margin: 40px 20px;text-transform: uppercase; cursor: pointer;   
    }
    #opt2{
        line-height: 100px;border: 2px dashed #aca9a9;outline: #aca9a9 solid 2px;text-align: center;color: #fff;height: 100px;width: 150px;background-color: #aca9a9;float: right;margin: 40px 20px;text-transform: uppercase; cursor: pointer;
    }
</style>
 
<div id="popup_wrapper" style="">
    <div id="hor_wrapper" style="">
        <div id="popup" style="">
            <div id="popup_header" style="">
                <img src="image.jpg" alt="image goes here" style="">
                <h1 style="">
                    Lorem ipsum!
                </h1>
                <p style="">                    
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. 
                </p>
                <div id="opt1" style="">
                    Option 1
                </div>
                <div id="opt2" style="">
                    Option 2
                </div>
 
            </div>
 
        </div>
 
    </div>
 
</div>

Edited by pwntastic
Link to comment
https://forums.phpfreaks.com/topic/281284-css-android-issue/
Share on other sites

  • Solution

If I'm not mistaken, Android browsers handles click events with propagating up to a higher hierachy.

 

Add, within the click function, the line event.stopPropagation();, which will prevent any event from bubbling up to a higher hierachy element.

 

So, for example, $('#popup').click(function(e){ e.stopPropagation(); /* rest of your code here */});

Link to comment
https://forums.phpfreaks.com/topic/281284-css-android-issue/#findComment-1445624
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.