jQWidgets Forums

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

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

Author

Hiding scroll bars on one panel Posts

February 1, 2022 at 10:45 pm 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

February 3, 2022 at 11:39 am 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/

February 3, 2022 at 4:48 pm 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>

February 4, 2022 at 8:05 am 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/

Author

Posts

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

You must be logged in to reply to this topic.