jQWidgets Forums

jQuery UI Widgets › Forums › Editors › DateTimeInput › jqxDateTimeInput in a div styled by display:none

Tagged: , ,

This topic contains 2 replies, has 2 voices, and was last updated by  paolo.macor 12 years, 8 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    jqxDateTimeInput in a div styled by display:none Posts
  • June 22, 2012 at 6:59 pm jqxDateTimeInput in a div styled by display:none #5246

    paolo.macor
    Member

    hello,
    I’m trying to use a jqxDateTimeInput widget in a

    but doing so the text inside (the date) gets shrinked to the bottom …
    When I get the control just out of that

    or I delete “display:none;” everything gets normal.
    If I tag the div with visibility:none the widget appears to be normal.
    Is there any workaround for this?
    thanks
    paolo
    June 22, 2012 at 8:37 pm jqxDateTimeInput in a div styled by display:none #5258

    Peter Stoev
    Keymaster

    Hi Paolo,

    You can do this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="../../scripts/gettheme.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
        <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script>
    </head>
    <body>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    var theme = getTheme();
                    // Create a jqxDateTimeInput
                    $("#jqxWidget").jqxDateTimeInput({ width: '250px', height: '25px', theme: theme });
                    $("#container").show();
                    $("#jqxWidget").jqxDateTimeInput('_arrange');
                });
            </script>
            <div id="container" style="display: none;">
                <div id='jqxWidget'>
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    June 23, 2012 at 6:28 am jqxDateTimeInput in a div styled by display:none #5259

    paolo.macor
    Member

    thank you, Peter. It works as expected.
    And thank you for the prompt response you always give us.
    Now, I’m only in the doubt if to buy a site or a developer license … 😉

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.