jQuery UI Widgets Forums Layouts Layout and Docking Layout Hiding scroll bars on one panel

This topic contains 3 replies, has 2 voices, and was last updated by  admin 1 year ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Hiding scroll bars on one panel #121458

    NormB
    Participant

    Here is my layout:

    		
    	var layout = [{
    		type: 'layoutGroup',
    		orientation: 'horizontal',
    		items: [{ // LHS
    			type: 'layoutGroup',
    			width: '40%',
    			orientation: 'vertical',
    			items: [{
    				// LHS - Upper
    				type: 'tabbedGroup',
    				height: '65%',
    				items: [{ // LHS - upper
    					type: 'layoutPanel',
    					title: 'ABC',
    					contentContainer: 'AbcPanel'
    				}]
    			},
    			{
    				// LHS - lower
    				type: 'tabbedGroup',
    				height: '35%',
    				items: [{ // LHS - lower
    					type: 'layoutPanel',
    					title: 'Options',
    					contentContainer: 'OptionsPanel',
    					selected: true
    				}]
    			}]
    		},
    		{ // RHS
    			type: 'tabbedGroup',
    			width: '60%',
    			items: [{ // RHS - upper
    				type: 'layoutPanel',
    				title: 'Music',
    				contentContainer: 'MusicDisplayPanel',
    				selected: true
    			},
    			{ // RHS - lower
    				type: 'layoutPanel',
    				title: 'Messages',
    				contentContainer: 'MessagesPanel'
    			}]
    		}]
    	}];
    
    	$('#jqxLayout').jqxLayout({ theme: 'energyblue', width: '100%', height: 750, layout: layout });
    

    And the essential part of the html:

    
              $textareastyle = 'width:100%;height:100%;background-color:white;resize:none;border:none;';
    
    				<div data-container='AbcPanel'>
    						<textarea id='mytextarea' spellcheck='false' style=$textareastyle;></textarea>
    				</div>
    				<div data-container='MusicDisplayPanel'>
    					<div id='musicdiv'></div>
    				</div>
    				<div data-container='MessagesPanel'>Messages</div>
    

    Setting width and height of the text area to 100% causes scroll bars to appear in the AbcPanel. I can set width and height to 97% and they go but it is less than elegant. How do I apply overflow:hidden to that panel – or another way?

    Thanks

    Hiding scroll bars on one panel #121466

    admin
    Keymaster

    Hi NormB,

    I tried to reproduce that:

    <HTML>
    	<HEAD>
    	</HEAD>
    	<BODY>
            <div id="jqxLayout">
    				<div data-container='AbcPanel'>
    						<textarea id='mytextarea' spellcheck='false' style=width:100%;height:100%;background-color:white;resize:none;border:none;;></textarea>
    				</div>
    				<div data-container='MusicDisplayPanel'>
    					<div id='musicdiv'></div>
    				</div>
    				<div data-container='MessagesPanel'>Messages</div>
            </div>
    	</BODY>
    </HTML>

    and Javascript

    $(document).ready(function () {
       var layout = [{
    		type: 'layoutGroup',
    		orientation: 'horizontal',
    		items: [{ // LHS
    			type: 'layoutGroup',
    			width: '40%',
    			orientation: 'vertical',
    			items: [{
    				// LHS - Upper
    				type: 'tabbedGroup',
    				height: '65%',
    				items: [{ // LHS - upper
    					type: 'layoutPanel',
    					title: 'ABC',
    					contentContainer: 'AbcPanel'
    				}]
    			},
    			{
    				// LHS - lower
    				type: 'tabbedGroup',
    				height: '35%',
    				items: [{ // LHS - lower
    					type: 'layoutPanel',
    					title: 'Options',
    					contentContainer: 'OptionsPanel',
    					selected: true
    				}]
    			}]
    		},
    		{ // RHS
    			type: 'tabbedGroup',
    			width: '60%',
    			items: [{ // RHS - upper
    				type: 'layoutPanel',
    				title: 'Music',
    				contentContainer: 'MusicDisplayPanel',
    				selected: true
    			},
    			{ // RHS - lower
    				type: 'layoutPanel',
    				title: 'Messages',
    				contentContainer: 'MessagesPanel'
    			}]
    		}]
    	}];
    
    	$('#jqxLayout').jqxLayout({ theme: 'energyblue', width: '100%', height: 750, layout: layout });
    });

    In the ABC panel there are no scrollbars.

    May be I missed something. Please, let me know what you think.

    Best regards,
    Peter Stoev

    jQWidgets Team
    https://www.jqwidgets.com/

    Hiding scroll bars on one panel #121467

    NormB
    Participant

    Hi Peter,

    That is odd.
    I notice that I did not include all the elements in the layout (the options panel also has some widgets in it). I show below the full form. However, even if I cut out the contents of the option panel I still see scroll bars – I have tested on my Linux box (Firefox and Opera) and my Windows box (Edge and Chrome). In all cases I see scroll bars, with just a tiny overflow. If I then populate the textbox with text that overflows I get the textbox scroll bars as well. Might there be something else that I am not showing you?
    Here is the full form

    
    		<form id='$formname' name='$formname' method='post'>
    			<table>
    				<tr>
    					<td><strong>Type a title</strong></td>
    					<td><div class='ui-widget'><input id='titles' size='30'></div></td>
    				</tr>
    			</table>
    			<input type='hidden' id='AbcText' name='Abc' value=''>
    			<input type='hidden' id='titleID' name='ID' value=''>
    			<div id='jqxLayout'>
    				<div data-container='OptionsPanel'>
    					<table>
    						<tr>
    							<td><label for='check_parts'><strong>With parts</strong></label>
    								<input type='checkbox' name='ShowParts' id='check_parts' checked class='warnreload'></td>
    							<td><label for='check_bass'><strong>Strip bass notes</strong></label>
    								<input type='checkbox' name='StripBass' id='check_bass' checked class='warnreload'></td>
    							<td class='check_pre'><label for='check_pre'><strong>Show processed %%chords</strong></label>
    								<input type='checkbox' name='ProcessChords' id='check_pre' class='warnreload'></td>
    						</tr><tr>
    							<td><strong>Transpose:</strong></td>
    							<td><input size=2 name='Transpose' id='Transpose' value=0>&emsp;semitones</td>
    						</tr>
    					</table>
    					<table>
    						<tr class='disabled'>
    							<td><input type='submit' id='RefreshBtn' value='Refresh' title='Refresh with changes' class='gobutton'></td>
    							<td><input type='submit' id='DownloadBtn' value='Download' title='Download PDF' class='gobutton'></td>
    							<td><input type='submit' id='ReloadBtn' value='Reload' title='Reload ABC from database' class='gobutton'></td>
    							<td><input type='submit' id='UploadBtn' value='Upload' title='Upload changes to database' class='gobutton'></td>
    					</table>
    					<div id='ReloadMessage' style='color:red;text-align:center;' ></div>
    				</div>
    				<div data-container='AbcPanel'>
    						<textarea id='mytextarea' spellcheck='false' style=$textareastyle;></textarea>
    				</div>
    				<div data-container='MusicDisplayPanel'>
    					<div id='musicdiv'></div>
    				</div>
    				<div data-container='MessagesPanel'>Messages</div>
    			</div>
    		</form>
    
    Hiding scroll bars on one panel #121469

    admin
    Keymaster

    Hi NormB,

    I tried in a new page, because I was testing in jseditor online so I suppose that the difference came out because online I tested with the energyblue theme.

    Here’s the updated sample:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id="Description">This demo shows the default functionality of the jqxLayout widget.
            This control allows the creation of complex layouts with panels that can be nested,
            resized, pinned, unpinned and closed.</title>
        <link rel="stylesheet" href="../../../jqwidgets-src/styles/jqx.base.css" type="text/css" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />	
        <style type="text/css">
            .jqx-layout-group-auto-hide-content-vertical
            {
                width: 200px;
            }
        </style>
        <script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
        <script type="text/javascript" src="../../../jqwidgets-src/jqxcore.js"></script>
        <script type="text/javascript" src="../../../jqwidgets-src/jqxribbon.js"></script>
        <script type="text/javascript" src="../../../jqwidgets-src/jqxlayout.js"></script>
        <script type="text/javascript" src="../../../jqwidgets-src/jqxtextarea.js"></script>
        <script type="text/javascript" src="../../../jqwidgets-src/jqxtree.js"></script>
        <script type="text/javascript" src="../../../scripts/demos.js"></script>
        <script type="text/javascript">
         $(document).ready(function () {
       var layout = [{
    		type: 'layoutGroup',
    		orientation: 'horizontal',
    		items: [{ // LHS
    			type: 'layoutGroup',
    			width: '40%',
    			orientation: 'vertical',
    			items: [{
    				// LHS - Upper
    				type: 'tabbedGroup',
    				height: '65%',
    				items: [{ // LHS - upper
    					type: 'layoutPanel',
    					title: 'ABC',
    					contentContainer: 'AbcPanel'
    				}]
    			},
    			{
    				// LHS - lower
    				type: 'tabbedGroup',
    				height: '35%',
    				items: [{ // LHS - lower
    					type: 'layoutPanel',
    					title: 'Options',
    					contentContainer: 'OptionsPanel',
    					selected: true
    				}]
    			}]
    		},
    		{ // RHS
    			type: 'tabbedGroup',
    			width: '60%',
    			items: [{ // RHS - upper
    				type: 'layoutPanel',
    				title: 'Music',
    				contentContainer: 'MusicDisplayPanel',
    				selected: true
    			},
    			{ // RHS - lower
    				type: 'layoutPanel',
    				title: 'Messages',
    				contentContainer: 'MessagesPanel'
    			}]
    		}]
    	}];
    
    	$('#jqxLayout').jqxLayout({ theme: 'energyblue', width: '100%', height: 750, layout: layout });
    });
    
        </script>
    </head>
    <body>
           <div id="jqxLayout">
    				<div data-container='AbcPanel'>
    						<textarea id='mytextarea' spellcheck='false' style="border: none; box-sizing: border-box; overflow: hidden; width:100%;height:calc(100% - 3px);background-color:white;resize:none;border:none;"></textarea>
    				</div>
    				<div data-container='MusicDisplayPanel'>
    					<div id='musicdiv'></div>
    				</div>
    				<div data-container='MessagesPanel'>Messages</div>
    
    </div>
    <div style="position: absolute; bottom: 5px; right: 5px;">
    <a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
    </div>
    </body>
    </html>

    The scrollbars of the textbox are hidden as the height is set to calc(100% – 3px) and also box-sizing is set to border-box.

    Best regards,
    Peter Stoev

    jQWidgets Team
    https://www.jqwidgets.com/

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

You must be logged in to reply to this topic.