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.

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

  • laumic
    Participant

    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.
    regards


    Dimitar
    Participant

    Hello laumic,

    Just remove position: absolute; for the class regionCentral and the buttons should be clickable.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    laumic
    Participant

    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

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

You must be logged in to reply to this topic.