datepicker takes the whole page width

datepicker takes the whole page width

Hi,

I just started with this framework and I'm trying to have a datepicker the width I want, the position I want but anything I'm trying to do isn't working.  The datepicker is taking the whole page width.  I really don't understand what makes it this large since I even tried !important to my width

  1. <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
  2.     <link href="/Content/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
        <link href="/Content/jquery.mobile.datepicker.css" rel="stylesheet" />
        <link href="/Content/jquery.mobile.datepicker.theme.css" rel="stylesheet" />
  3.     <script src="/Scripts/jquery-2.1.4.min.js"></script>
        <script src="/Scripts/jquery-ui-1.11.4.min.js"></script>
        <script src="/Scripts/jquery.mobile-1.4.5.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#datepicker').datepicker();
            });
        </script>
        <style>
        </style>
    </head>
    <body>
        <div>
            <div data-role="page">
                <div data-role="ui-header">
                </div>
                <div class="ui-content">
                    <input type="text" id="datepicker" data-inline="false" data-role="date" style="width:140px !important" >
                </div>
                <div class="ui-footer">
                </div>
            </div>
        </div>
    </body>
    </html>