jQWidgets Forums
jQuery UI Widgets › Forums › Dialogs and Notifications › Window › jqxButton inside jqxWindow
Tagged: jqxButton image inside jqxWindow
This topic contains 10 replies, has 2 voices, and was last updated by alexl 12 years, 4 months ago.
-
Author
-
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:AddAnd 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?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 StoevjQWidgets Team
http://www.jqwidgets.comHello, Peter, thanx for a quick response.
Yes, i do in fact. And doing it after the window has been initialized is no help either.
Hi alexl,
Ok, then could you please post the code which you use to create the window and the button?
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comMarkup
Credential DetailAddScript
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?
Oops! The markup doesn’t show up. Trying again…
AddNope, still wrong. How do I post HTML here?
Hi alexl,
To post HTML or JavaScript see this topic: http://www.jqwidgets.com/community/topic/code-formatting/
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comLet’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>
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 StoevjQWidgets Team
http://www.jqwidgets.comIt 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? -
AuthorPosts
You must be logged in to reply to this topic.