How to customize plaintext's scrollbar and using load and save method? #188

kitepad · 2021-09-14T01:40:09Z

kitepad
Sep 14, 2021

Some characters (or lines for h-scrollbar) will be override when scrollbar is visible if I use scroll-indicator. I don't know how to customize plaintext scrollbar appearance if I use overflow: visible.
I will meet "type is not function" when I use these methods: load, save on plaintext.
plaintext.plaintext.load('d://test//test.txt'); plaintext.plaintext.save('d:\\test\\test.txt');

kitepad · 2021-09-14T01:42:44Z

kitepad
Sep 14, 2021
Author

This is screenshot without scrollbar:

Below is screenshot with scrollbar:

0 replies

c-smile · 2021-09-14T17:49:59Z

c-smile
Sep 14, 2021
Maintainer

CSS:

plaintext { overflow-y: scroll; overflow-x: auto; }

0 replies

kitepad · 2021-09-17T01:35:00Z

kitepad
Sep 17, 2021
Author

Thanks. My meaning is how to customize appearance of plaintext scrollbar.

0 replies

c-smile · 2021-09-17T03:56:54Z

c-smile
Sep 17, 2021
Maintainer

See: scrollbar-styling-XXX.htm in https://github.com/c-smile/sciter-sdk/tree/master/samples/scrollbars-n-scrolling/

0 replies

kitepad · 2021-09-18T16:10:36Z

kitepad
Sep 18, 2021
Author

I meet a problem to customize appearance:

right bottom corner background color is widget-back, it's ok in normal theme. But in dark mode as below when h and v scrollbar is visible:
h scrollbar is not showed even input text exceed widget width, scrollbar will show after input enter.

Below is sample code for you reproduce problem:

    <html>
	<head>
		<title>Width 120% is cute</title>
		<style type="text/css"> 
		
body { 
	font:10pt Verdana;  
	background: linear-gradient(top,white,peachpuff); 
}

@set std-plaintext < std-plaintext-base
{
  :root 
  {
    background: #000;
	color: #fff;
  }
}
/* style block defining vertical scrollbar */
@set my-v-scrollbar
{
  .prev { display:none; }
  .next { display:none; }
  
  .base,
  .next-page, 
  .prev-page { background:transparent; border-left:1dip solid #c0c0c0; }
  
  .slider    { background: gray; }
 
  .base:disabled { background: blue; }
    
  .slider:hover  { background: gold; border-left:1px solid #202020; }
  
  .slider:active { background: tomato; }
  
  .base { width: 10dip;} /* explicit declaration of its width */
  .corner { foreground-color: #000;}
  
}

@set my-h-scrollbar
{
  .prev { display:none; }
  .next { display:none; }
  
  .base,
  .next-page, 
  .prev-page { background:transparent; border-left:1dip solid #c0c0c0; }
  .base {height: 10dip;}
  .slider    { background: gray; }
 
  .base:disabled { background: blue; }
    
  .slider:hover  { background: gold; border-left:1px solid #202020; }
  
  .slider:active { background: tomato; }
  
  .base { width: 10dip;} /* explicit declaration of its width */
  .corner {  }
}

#horizontal-container 
{ 
	size:*;
	flow:horizontal; 
}

plaintext {
	vertical-scrollbar: my-v-scrollbar;
	horizontal-scrollbar: my-h-scrollbar;
	overflow-y:scroll;overflow-x:scroll;
	size:*;
}

#horizontal-container > div { height:50vh; width:*; }
ul { 
  vertical-scrollbar: my-v-scrollbar;
	margin: 10px; 
	padding: 5px; 
	size: *; 
	border: dashed black 4px; 
	list-style-type: none; 
	color: black; 
  overflow-x: hidden;
}
li { 
	margin: 5px; 
	padding: 5px; 
	width: 80%; 
	border: dashed black 1px; 
	background-color: white; 
	color: black; 
	}
#window-scroll-always
{ 
	overflow-y: scroll;
}
#window-scroll-auto
{ 
	overflow-y: auto; 
}
#window-scroll-hidden
{ 
	overflow-y: hidden; 
}
#window-scroll-visible
{ 
	overflow-y: visible; 
}

	</style>
	</head>
	<body>
	<h1>gradient background and transparent overflows</h1>
	<div id="horizontal-container">
		<div>
			<center>oveflow:scroll</center>
			<ul id="window-scroll-always" tabindex=0>
				<li>
					Hello</li>
				<li>
					Wibble</li>
				<li>
					Foo</li>
				<li>
					Bar</li>
				<li>
					Baz</li>
			</ul>
		</div>
		<div>
			<center>oveflow:auto</center>
			<ul id="window-scroll-auto" tabindex=0>
				<li>
					Hello</li>
				<li>
					Wibble</li>
				<li>
					Foo</li>
				<li>
					Bar</li>
				<li>
					Baz</li>
			</ul>
		</div>
			<div>
		<plaintext/>
	</div>
	</div>
	</body>
</html>

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to customize plaintext's scrollbar and using load and save method? #188

{{title}}

Replies: 5 comments

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

How to customize plaintext's scrollbar and using load and save method? #188

kitepad Sep 14, 2021

Replies: 5 comments

kitepad Sep 14, 2021 Author

c-smile Sep 14, 2021 Maintainer

kitepad Sep 17, 2021 Author

c-smile Sep 17, 2021 Maintainer

kitepad Sep 18, 2021 Author

kitepad
Sep 14, 2021

kitepad
Sep 14, 2021
Author

c-smile
Sep 14, 2021
Maintainer

kitepad
Sep 17, 2021
Author

c-smile
Sep 17, 2021
Maintainer

kitepad
Sep 18, 2021
Author