Regarding concern about limited text space in adjacent windows

All that relates to Javascript, CSS, HTML, ....
Post Reply
bedesign
Posts: 7
Joined: Sat May 29, 2021 11:28 am
Has thanked: 3 times
Been thanked: 6 times

Regarding concern about limited text space in adjacent windows

Post by bedesign »

Hi (just managed to register today)

Remembering someone had a concern about limited text space in
adjacent windows -
Here is one idea for width sharing:
Load the demo in a browser (on Android, Opera is good for mouse interaction and more)

Dragging a vertical divider could be another solution, but never investigated that.

Code: [Local Link Removed for Guests]

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
<style>
      
      .container {
        font-family: "SourceCodePro-Regular", "Droid Sans Mono", "monospace", "monospace"; // band aid
        position: absolute;
        display: flex;
        width: 50%;
        height: 90%;
      }
      

      .left {
     
        max-height: 100%;
        min-width: 33%;
        max-width: 67%;
        padding: 10px;
        flex: 1 1 auto;
        overflow: none;
        white-space: break-spaces;
        background-color: green;
        outline: none;
      }

      .right {
        max-height: 100%;
        min-width: 33%;
        max-width: 67%;
        padding: 10px;
        flex: 1 1 auto;
        overflow: none;
        white-space: break-spaces;
        background-color: red;
        outline: none;
      }
      
</style>
</head>
<body>
	
<p>Demo of Auto Sharing Column Widths</p>
<div class="container">
		
<div class="left" contenteditable>Write here to expand<br>and shrink 1111111 222222222 3333333 444444<br>- Auto wrap at word     
  endings.

With this config - consecutive spaces are preserved, 
*BR* is active and hidden, embedded CR/LF is active.

Here is table for different adaptions:
https://developer.mozilla.org/en-us/docs/Web/CSS/white-space</div>

<div class="right" contenteditable>Erase both fields and please try it at home - 
Look, no heavy framework or java script!<div style="font-size: 24px">&#x1F632;</div>============================
The initial column widths are 50/50% wide.
Both the red and green columns will dynamically yield it's width
within 33 > 67% of the total container width if the adjacent
column currently has the longest line length.

Ex. If a wide log listing is erased, the other column
will directly reclaim it's eventually yielded width.
</div>
</div>
</body>
</html>      
Post Reply