jQWidgets Forums

jQuery UI Widgets Forums Dialogs and Notifications Window jqxButton inside jqxWindow

This topic contains 10 replies, has 2 voices, and was last updated by  alexl 12 years, 4 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • jqxButton inside jqxWindow #16749

    alexl
    Participant

    I’m trying to display a button with an image to left of the button’s label.
    Following instructions in your blog post somewhere, I set up the following markup:

    Add

    And then, in the script,

    $(‘#btnCredAdd’).jqxButton({height:’22px’, theme: theme});

    This works perfectly when a button is set up elsewhere on the screen, but inside the jqxWindow widget i don’t see the bordered div
    that is supposed to encompass the image and the label. The “button” functionality, however, is present, as a click on either the image
    or the label produces the expected activation of the handler.
    Further examination of the DOM reveals that the encompassing div is there, but it’s dimensions are 0x0 and I can’s seem to make them
    budge even at runtime. Any idea what gives?

    jqxButton inside jqxWindow #16766

    Peter Stoev
    Keymaster

    Hi alexl,

    The content of jqxWindow is supposed to be initialized in its “initContent” callback function. Do you use it for initializing the button?

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    jqxButton inside jqxWindow #16835

    alexl
    Participant

    Hello, Peter, thanx for a quick response.

    Yes, i do in fact. And doing it after the window has been initialized is no help either.

    jqxButton inside jqxWindow #16838

    Peter Stoev
    Keymaster

    Hi alexl,

    Ok, then could you please post the code which you use to create the window and the button?

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    jqxButton inside jqxWindow #16849

    alexl
    Participant

    Markup

    Credential Detail

    Add

    Script

    var makeCredentialWindow = function() {
    $(‘#divCredentialWindow’).jqxWindow({
    showCollapseButton:false, resizable:false, draggable:false,
    height:200, width:400,
    position:'{ x: 200, y: 400 }’,theme: theme,
    initContent: function() {
    $(‘#btnCredAdd’).jqxButton({theme: theme, height:’22px’, width:’50px’});
    }
    });
    };

    Also, I suspect that a similar issue might be lurking when using jqxInput inside jqxWindow. Smells like some kind of clash of classes being assigned by the framework, no?

    jqxButton inside jqxWindow #16850

    alexl
    Participant

    Oops! The markup doesn’t show up. Trying again…

    Add
    jqxButton inside jqxWindow #16851

    alexl
    Participant

    Nope, still wrong. How do I post HTML here?

    jqxButton inside jqxWindow #16861

    Peter Stoev
    Keymaster

    Hi alexl,

    To post HTML or JavaScript see this topic: http://www.jqwidgets.com/community/topic/code-formatting/

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    jqxButton inside jqxWindow #16867

    alexl
    Participant

    Let’s see if this works:

                <td><div id="btnCredAdd"><img style="float:left;margin: 4px;" alt="" src="${requestScope['serverConfig']}/img/add.png"/>
    <div style="float: left;margin: 4px;">Add</div></div></td>
    jqxButton inside jqxWindow #16967

    Peter Stoev
    Keymaster

    Hi alexl,

    The sample below shows how to initialize a button with image in jqxWindow:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    $('#window').jqxWindow({
    showCollapseButton: true, maxHeight: 400, maxWidth: 700, minHeight: 200, minWidth: 200, height: 300, width: 500,
    initContent: function () {
    $("#btnCredAdd").jqxButton({ height: 40 });
    }
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id="window">
    <div>title</div>
    <div>
    <table>
    <tr>
    <td><div id="btnCredAdd"> <img style='float: left;' width='32' height='32' src="../../images/building2_small.jpg"/>
    <div style="float: left;margin: 4px;">Add</div></div></td>
    </tr>
    </table>
    </div>
    </div>
    </body>
    </html>

    Hope this helps.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    jqxButton inside jqxWindow #16992

    alexl
    Participant

    It has worked finally, thank you. The issue was in me failing to include jqxButtons component.
    Which brings up a question: is introducing an autoload feature (like the on in YUI, for instance) somewhere on your roadmap?

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.