asked on

HTML element vertical positioning does not work with jQuery mobile?

Hi Experts:

I wrote this code to try to make a canvas in the middle of web browser:

<!DOCTYPE html>
<html style="height: 99%; width: 99%; padding: 0; margin:0">
<head>
    <title>abc</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="js/jquery.mobile.theme-1.4.5.css">
    <link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.4.5.css">

    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.4.5.js"></script>
</head>
<body style="width: 100%; height: 100%; margin: 0; padding: 0; border: 5px blue solid;">
        <canvas style="background-color: red; width: 50%; height: 50%; position: relative; top: 25%; left: 25%"></canvas>
</body>
</html>

Open in new window

The vertical positioning of the canvas does not work, such that it still locates at the top of the web page.
However, if I remove the reference to jQuery mobile:

    <script type="text/javascript" src="js/jquery.mobile-1.4.5.js"></script>

Open in new window

then the canvas will be in the middle of the web page.

Seems jQuery mobile has conflict with the vertical positioning. Is this a bug? or jQuery mobile is designed to do that? How can I do vertical positioning when using jQuery mobile?

Thank you!

huangs3

ASKER

I tried to replace the Canvas element with DIV element. But got the same result.

<div style="border: red solid 1px; width: 200px; height: 200px; position: relative; top: 25%; left: 25%"></div>

Open in new window

I am using Chrome browser.

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

huangs3

ASKER

Thank you, it works.

Julian Hansen

You are welcome.