jQuery UI Widgets › Forums › Editors › Button, RepeatButton, ToggleButton, LinkButton › Problem with Button on splitter for collapse
This topic contains 2 replies, has 2 voices, and was last updated by laumic 10 years, 2 months ago.
-
Author
-
I don’t understand why the two buttons are not enable ?
You can find the code here and test the page here : http://test.novae.info/5.php
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Mise en forme avec jQwidget</title> <link rel="stylesheet" href="http://test.novae.info/jquery_plugins/jqwidgets/styles/jqx.base.css" type="text/css" /> <style type="text/css"> html, body { height: 100%; width: 100%; margin: 0px; padding: 0px; overflow: hidden; } .barreHaut { position: absolute; width: 100%; height: 70px; background: #EBEBEB; } .regionCentral { position: absolute; box-sizing:border-box; -moz-box-sizing:border-box; padding-top: 70px; padding-bottom: 32px; width: 100%; height: 100%; } .barreBas { position: absolute; bottom: 0; background: #EBEBEB; width: 100%; height: 30px; } </style> </head> <body> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="http://test.novae.info/jquery_plugins/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="http://test.novae.info/jquery_plugins/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="http://test.novae.info/jquery_plugins/jqwidgets/jqxsplitter.js"></script> <script type="text/javascript" src="http://test.novae.info/jquery_plugins/jqwidgets/jqxpanel.js"></script> <div class="barreHaut"> <input type="button" style='margin-top: 5px;' value="Expand first" id="expandFirstButton" /> <input type="button" style='margin-top: 5px;' value="Collapse first" id="collapseFirstButton" /> </div> <div class="regionCentral"> <div id="mainSplitter"> <div style="position: absolute; width: 300px; height: 100%;"> Align Left </div> <div style="position: absolute; width: 100%; height: 100%;"> Content </div> </div> </div> <div class="barreBas"> Align Bottom </div> <script type="text/javascript"> $(document).ready(function () { var panels = [{ size: '150px' }, { size: '100%' }]; $('#mainSplitter').jqxSplitter({ height: '100%', width: '100%', panels: panels }); $('#mainSplitter').jqxSplitter({ splitBarSize: 2 }); $('#expandFirstButton').jqxButton({ width: 100 }); $('#collapseFirstButton').jqxButton({ width: 100 }); $('#expandFirstButton').click(function () { panels[0].collapsible = true; panels[1].collapsible = false; $('#mainSplitter').jqxSplitter({panels: panels}); $('#mainSplitter').jqxSplitter('expand'); }); $('#collapseFirstButton').click(function () { panels[0].collapsible = true; panels[1].collapsible = false; $('#mainSplitter').jqxSplitter({panels: panels}); $('#mainSplitter').jqxSplitter('collapse'); }); }); </script> </body> </html>
Thank you for any help.
regardsHello laumic,
Just remove
position: absolute;
for the class regionCentral and the buttons should be clickable.Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/thx you very much for your awnser, i try and it’s ok.
But, i’m lost the disposition of layer, then i try another solution, im put
z-index: 10; in
.barreHaut {
position: absolute;
width: 100%;
height: 70px;
background: #F1F1F1;
z-index: 10;
}now, all is ok, with the initial disposition.
best regards
-
AuthorPosts
You must be logged in to reply to this topic.