How to wrap <td> content .

V

vmars316

Joined
May 21, 2012
Messages
44
Reaction score
0
TIA ,
I trying to code <td> so that content wraps , so far no-go .

HTML: 
<!DOCTYPE html>
<head>
<title>
file:///C:/PureBasic-myApps/vmProjects/BUTTONS/Line-By-Line/Line-By-Line-Folder/Create-INDEX/Table-Para-Verticle-Align-Top.html
</title>
</head>
<body>
<table contenteditable style="text-align: left; width: 100%;" border="1">
<tbody>
<tr>
<td style="vertical-align: top; width: 49%; word-wrap: break-word;">
1
</td>
<td style="vertical-align: top; width: 49%; word-wrap: break-word;">
2
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 49%; word-wrap: break-word;">
3
</td>
<td style="vertical-align: top; width: 49%; word-wrap: break-word;">

4</td>
</tr>
<tr>
<td style="vertical-align: top; width: 49%; word-wrap: break-word;">
5
</td>
<td style="vertical-align: top; width: 49%; word-wrap: break-word;">
6
</td>
</tr>
</tbody>
</table>
<br>
</body>
</html>
 
VBService

VBService

Joined
Jul 4, 2023
Messages
475
Reaction score
58
I don't fully understand what you want to achieve, but check this entry
[ on-line ]
HTML: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>
      file:///C:/PureBasic-myApps/vmProjects/BUTTONS/Line-By-Line/Line-By-Line-Folder/Create-INDEX/Table-Para-Verticle-Align-Top.html
    </title>

    <style>
      html,
      body {
        margin: 1em;
      }
      table {
        width: 100%;
        font: 400 0.8em/1.1 system-ui, monospace;
        text-align: left;
        border-collapse: collapse;
        margin-bottom: 1rem; /* instead of using <br> under the </table> tag */
      }
      th, td {
        width: 50%;
        padding: .5rem;
      }
      td {
        border: 2px solid gray;
        word-wrap: break-word;
        vertical-align: top;
      }
    </style>
  </head>
  <body>

    <table contenteditable>
      <tbody>
        <tr>
          <td>
            1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </td>
          <td>
            2 Lorem ipsum dolor sit amet, consectetur<br> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </td>
        </tr>
        <tr>
          <td>
            3 <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </td>
          <td>
            4 Lorem ipsum dolor<br><br> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </td>
        </tr>
        <tr>
          <td>
            5
            <ul>
              <li>Lorem ipsum</li>
              <li>Lorem ipsum</li>
            </ul>
            <p>Lorem ipsum sit amet, consectetur adipiscing elit.</p>
          </td>
          <td>
            6<br>Lorem ipsum<br>Lorem ipsum<br>
          </td>
        </tr>
      </tbody>
    </table>

  </body>
</html>

I highly recommend you to start using even simple CSS code.
 
Last edited:
V

vmars316

Joined
May 21, 2012
Messages
44
Reaction score
0
vmars316 said:
TIA ,
I trying to code <td> so that content wraps , so far no-go .

HTML: 
<!DOCTYPE html>
[QUOTE="VBService, post: 5175281, member: 95965"]
I don't fully understand what you want to achieve, but check this entry
[ [URL='https://codepen.io/przyklady-online/pen/eYbKpQJ']on-line[/URL] ]
[CODE=html]<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>
      file:///C:/PureBasic-myApps/vmProjects/BUTTONS/Line-By-Line/Line-By-Line-Folder/Create-INDEX/Table-Para-Verticle-Align-Top.html
    </title>

    <style>
      html,
      body {
        margin: 1em;
      }
      table {
        width: 100%;
        font: 400 0.8em/1.1 system-ui, monospace;
        text-align: left;
        border-collapse: collapse;
        margin-bottom: 1rem; /* instead of using <br> under the </table> tag */
      }
      th, td {
        width: 50%;
        padding: .5rem;
      }
      td {
        border: 2px solid gray;
        word-wrap: break-word;
        vertical-align: top;
      }
    </style>
  </head>
  <body>

    <table contenteditable>
      <tbody>
        <tr>
          <td>
            1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </td>
          <td>
            2 Lorem ipsum dolor sit amet, consectetur<br> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </td>
        </tr>
        <tr>
          <td>
            3 <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </td>
          <td>
            4 Lorem ipsum dolor<br><br> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </td>
        </tr>
        <tr>
          <td>
            5
            <ul>
              <li>Lorem ipsum</li>
              <li>Lorem ipsum</li>
            </ul>
            <p>Lorem ipsum sit amet, consectetur adipiscing elit.</p>
          </td>
          <td>
            6<br>Lorem ipsum<br>Lorem ipsum<br>
          </td>
        </tr>
      </tbody>
    </table>

  </body>
</html>

I highly recommend you to start using even simple CSS code.
Click to expand...

[/QUOTE]
</html>

[/CODE]
[/QUOTE]
VBService said:
I don't fully understand what you want to achieve, but check this entry
[ on-line ]
HTML: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>
      file:///C:/PureBasic-myApps/vmProjects/BUTTONS/Line-By-Line/Line-By-Line-Folder/Create-INDEX/Table-Para-Verticle-Align-Top.html
    </title>

    <style>
      html,
      body {
        margin: 1em;
      }
      table {
        width: 100%;
        font: 400 0.8em/1.1 system-ui, monospace;
        text-align: left;
        border-collapse: collapse;
        margin-bottom: 1rem; /* instead of using <br> under the </table> tag */
      }
      th, td {
        width: 50%;
        padding: .5rem;
      }
      td {
        border: 2px solid gray;
        word-wrap: break-word;
        vertical-align: top;
      }
    </style>
  </head>
  <body>

    <table contenteditable>
      <tbody>
        <tr>
          <td>
            1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </td>
          <td>
            2 Lorem ipsum dolor sit amet, consectetur<br> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </td>
        </tr>
        <tr>
          <td>
            3 <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </td>
          <td>
            4 Lorem ipsum dolor<br><br> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </td>
        </tr>
        <tr>
          <td>
            5
            <ul>
              <li>Lorem ipsum</li>
              <li>Lorem ipsum</li>
            </ul>
            <p>Lorem ipsum sit amet, consectetur adipiscing elit.</p>
          </td>
          <td>
            6<br>Lorem ipsum<br>Lorem ipsum<br>
          </td>
        </tr>
      </tbody>
    </table>

  </body>
</html>

I highly recommend you to start using even simple CSS code.
Click to expand...
Ah... Perfect , Thank you very much , VBScript
 
V

vmars316

Joined
May 21, 2012
Messages
44
Reaction score
0
Yep , this works darn good .
https://vmars.us/ShowMe/CompareStuff.html

HTML: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>
https://vmars.us/ShowMe/CompareStuff.html
    </title>

    <style>
      html,
      body {
        margin: 1em;
      }
      table {
        width: 100%;
        font: 400 0.8em/1.1 system-ui, monospace;
        text-align: left;
        border-collapse: collapse;
        margin-bottom: 1rem; /* instead of using <br> under the </table> tag */
      }
      th, td {
        width: 49%;
        padding: .5rem;
      }
      td {
        border: 1px solid gray;
        word-wrap: break-word;
        vertical-align: top;
        max-width: 49%;
      }
    </style>
  </head>
  <body>
<h4 style="text-align:center;">Compare Stuff</h4>
    <table contenteditable>
      <tbody>
        <tr>
          <td>
            1
          </td>
          <td>
            2
          </td>
        </tr>
        <tr>
          <td>
            3
          </td>
          <td>
            4
          </td>
        </tr>
        <tr>
          <td>
            5
          </td>
          <td>
            6
          </td>
        </tr>
      </tbody>
    </table>

  </body>
</html>
 
VBService

VBService

Joined
Jul 4, 2023
Messages
475
Reaction score
58
vmars316 said:
Pls note , how <td> element stretches .
How can we fix the stretch ?
Click to expand...

[ code on-line ]
HTML: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>
      https://vmars.us/ShowMe/CompareStuff.html
    </title>

    <style>
      html,
      body {
        margin: 1em;
      }
      h4 {
        text-align: center;
      }
      table {
        --font-size: 0.8rem;
        width: 800px;
        font: 400 var(--font-size)/1.1 system-ui, monospace;
        text-align: left;
        border-collapse: collapse;
        margin-bottom: 1rem;
        margin-inline: auto;
        transition: width 250ms;
      }
      th, td {
        --padding: .5em;
        width: 49%;
        height: calc(var(--font-size) * 2 + var(--padding));
        padding: var(--padding);
      }
      td {
        border: 1px solid gray;
        word-wrap: break-word;
        vertical-align: top;
        max-width: 49%;
        overflow: hidden;
      }
      td div[contenteditable] {
        width: 100%;
        height: calc(var(--font-size) * 2 + var(--padding));
        overflow-x: auto;
        outline: none;
      }
      td div[contenteditable]:not(:focus-within)::-webkit-scrollbar {
        width: 0;
      }
      td div[contenteditable]:focus-within::-webkit-scrollbar {
        width: .5em;
        cursor: pointer;
      }
      td div[contenteditable]::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
      }
      td div[contenteditable]::-webkit-scrollbar-thumb {
        background-color: darkgrey;
        outline: 1px solid slategrey;
      }
      @media screen and (max-width: 820px) {
        table {
          width: 85dvw;
        }
      }
    </style>
  </head>
  <body>
    <h4>Compare Stuff</h4>
    <table>
      <tbody>
        <tr>
          <td>
            <div contenteditable>
              1 Lorem ipsum<br>
              dolor sit amet, consectetur adipiscing elit,
            </div>
          </td>
          <td>
            <div contenteditable>2</div>
          </td>
        </tr>
        <tr>
          <td>
            <div contenteditable>3</div>
          </td>
          <td>
            <div contenteditable>4</div>
          </td>
        </tr>
        <tr>
          <td>
            <div contenteditable>
              5 Lorem
              <ul>
                <li>Lorem ipsum</li>
                <li>Lorem ipsum</li>
              </ul>
              <p>Lorem ipsum sit amet, consectetur adipiscing elit.</p>
            </div>
          </td>
          <td>
            <div contenteditable>6</div>
          </td>
        </tr>
      </tbody>
    </table>

  </body>
</html>
 
Last edited:
VBService

VBService

Joined
Jul 4, 2023
Messages
475
Reaction score
58
On this webpage:
vmars316 said:
https://vmars.us/ShowMe/CompareStuff.html
Click to expand...
you still has that css code
CSS: 
html,
body {
  margin: 1em;
}
table {
  width: 100%;
  font: 400 0.8em/1.1 system-ui, monospace;
  text-align: left;
  border-collapse: collapse;
  margin-bottom: 1rem; /* instead of using <br> under the </table> tag */
}
th, td {
  width: 49%;
  padding: .5rem;
}
td {
  border: 1px solid gray;
  word-wrap: break-word;
  vertical-align: top;
  max-width: 49%;
}

vmars316 said:
Still stretches both left and right .
Click to expand...
change css for table to this
CSS: 
table {
  width: 800px; /* 800px, 1000px - it's up to you - instead of 100% */
  font: 400 .8rem/1.1 system-ui, monospace;
  text-align: left;
  border-collapse: collapse;
  margin-bottom: 1rem;
  margin-inline: auto; /* table centered horizontally */
}
 
V

vmars316

Joined
May 21, 2012
Messages
44
Reaction score
0
Thanks ;
Ok I update css table stuff :

[URL]https://vmars.us/ShowMe/CompareStuff_Copy(1).html
[/URL]

HTML: 
table {
  width: 800px; /* 800px, 1000px - it's up to you - instead of 100% */
  font: 400 .8rem/1.1 system-ui, monospace;
  text-align: left;
  border-collapse: collapse;
  margin-bottom: 1rem;
  margin-inline: auto; /* table centered horizontally */

and

[URL]https://vmars.us/ShowMe/CompareStuff_Copy(2).html
[/URL]
Code: 
      table {
  width: 100%; /* 800px, 1000px - it's up to you - instead of 100% */
  font: 400 .8rem/1.1 system-ui, monospace;
  text-align: left;
  border-collapse: collapse;
  margin-bottom: 1rem;
  margin-inline: auto; /* table centered horizontally */
      }

But <td> left & right still stretch to fit Pasted text .

To test it copy this:


MatchRegularExpression

www.purebasic.com
into here:


https://vmars.us/ShowMe/CompareStuff_Copy(1).html


and here:


https://vmars.us/ShowMe/CompareStuff_Copy(2).html

Pls , how to fix this , Thanks
 
VBService

VBService

Joined
Jul 4, 2023
Messages
475
Reaction score
58
[ code on-line ]
HTML: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>
      https://vmars.us/ShowMe/CompareStuff.html
    </title>

    <style>
      html,
      body {
        margin: 1em;
      }
      h4 {
        text-align: center;
      }
      table {
        --font-size: 0.8rem;
        --table-width: 800px;
        --visible-lines: 6;
        width: var(--table-width);
        font: 400 var(--font-size)/1.1 system-ui, monospace;
        text-align: left;
        border-collapse: collapse;
        margin-bottom: 1rem;
        margin-inline: auto;
        transition: width 250ms;
      }
      th, td {
        --padding: .5em;
        width: calc(var(--table-width) / 2);
        height: calc(var(--font-size) * var(--visible-lines) + var(--padding));
        padding: var(--padding);
      }
      td {
        border: 1px solid gray;
        word-wrap: break-word;
        vertical-align: top;
        max-width: calc(var(--table-width) / 2);
        overflow: hidden;
      }
      td div[contenteditable] {
        width: 100%;
        height: calc(var(--font-size) * var(--visible-lines) + var(--padding));
        overflow-x: auto;
        outline: none;
      }
      td div[contenteditable]:not(:focus-within)::-webkit-scrollbar {
        width: 0;
        height: 0;
      }
      td div[contenteditable]:focus-within::-webkit-scrollbar {
        width: .5em;
        height: .5em;
        cursor: pointer;
      }
      td div[contenteditable]::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
      }
      td div[contenteditable]::-webkit-scrollbar-thumb {
        background-color: darkgrey;
        outline: 1px solid slategrey;
      }
      @media screen and (max-width: 820px) {
        table {
          --table-width: 760px;
        }
      }
    </style>
  </head>
  <body>
    <h4>Compare Stuff</h4>
    <table>
      <tbody>
        <tr>
          <td>
            <div contenteditable>
              <font face="Verdana, sans-serif" size="2"><p align="center"><b><font size="4">MatchRegularExpression()</font></b></p>
                <p><b>Syntax</b></p><blockquote>
                Result = <font color="#3A3966"><b>MatchRegularExpression</b></font>(#RegularExpression, String$)</blockquote>


                <b>Description</b><br><blockquote>

                Tests the string against the #RegularExpression.

                </blockquote><p><b>Parameters</b></p><blockquote>
                <style type="text/css">
                  table.parameters { border-spacing: 0px; border-style: none; border-collapse: collapse; }
                  table.parameters td { border-width: 1px; padding: 6px; border-style: solid; border-color: gray; vertical-align: top; font-family:Arial; font-size:10pt; }
                </style>
                <table width="90%" class="parameters">
                  <tbody><tr><td width="10%"><i>#RegularExpression</i></td>
                    <td width="90%">
                      The regular expression to use.

                    </td></tr>
                    <tr><td><i>String$</i></td>
                      <td>
                        The string to apply the regular expression on.

                      </td></tr>
                  </tbody></table>
                </blockquote><p><b>Return value</b></p><blockquote>

                Returns nonzero if the string matches the regular expression, returns zero otherwise.

                </blockquote><p><b>Example</b></p><blockquote>

                <pre><font face="Courier New, Courier, mono" size="2">  <font color="#3A3966">; This expression will match every word of 3 letter which begin by a lower case letter,</font>
  <font color="#3A3966">; followed with the character 'b' and which ends with an uppercase letter. ex: abC</font>
  <font color="#3A3966">;    </font>
  <b><font color="#3A3966">If</font></b> <font color="#3A3966">CreateRegularExpression</font>(0, "[a-z]b[A-Z]")
    <b><font color="#3A3966">If</font></b> <font color="#3A3966">MatchRegularExpression</font>(0, "abC ABc zbA abc")
      <b><font color="#3A3966">Debug</font></b> "The string match !"
    <b><font color="#3A3966">Else</font></b>
      <b><font color="#3A3966">Debug</font></b> "No pattern found in the string"
    <b><font color="#3A3966">EndIf</font></b>
  <b><font color="#3A3966">Else</font></b>
    <b><font color="#3A3966">Debug</font></b> <font color="#3A3966">RegularExpressionError</font>()
  <b><font color="#3A3966">EndIf</font></b>
</font></pre>

                </blockquote><p><b>See Also</b></p><blockquote>

                <a href="createregularexpression.html">CreateRegularExpression()</a>

                </blockquote><p><b>Supported OS </b></p><blockquote>All</blockquote><p></p><center>&lt;- <a href="isregularexpression.html">IsRegularExpression()</a> - <a href="index.html">RegularExpression Index</a> - <a href="nextregularexpressionmatch.html">NextRegularExpressionMatch()</a> -&gt;<br><br>

                </center></font>
            </div>
          </td>
          <td>
            <div contenteditable>2</div>
          </td>
        </tr>
        <tr>
          <td>
            <div contenteditable>3</div>
          </td>
          <td>
            <div contenteditable>4</div>
          </td>
        </tr>
        <tr>
          <td>
            <div contenteditable>
              5 Lorem
              <ul>
                <li>Lorem ipsum</li>
                <li>Lorem ipsum</li>
              </ul>
              <p>Lorem ipsum sit amet, consectetur adipiscing elit.</p>
            </div>
          </td>
          <td>
            <div contenteditable>6</div>
          </td>
        </tr>
      </tbody>
    </table>

  </body>
</html>
 
V

vmars316

Joined
May 21, 2012
Messages
44
Reaction score
0
Thanks VBService :
WOW ,
height: calc(var(--font-size) * 2 + var(--padding));
I new that Eventually we would be able to
calc()
But I didn't know it was here yet .
Is calc a function from webkit ?

Thanks
 
V

vmars316

Joined
May 21, 2012
Messages
44
Reaction score
0
Final product looks like this:
HTML: 
<!DOCTYPE html>
<html>
<head>
<title>Compare Left & Right Boxes</title>
<style>
.container {
      display: flex; /* Use flexbox to create a row layout */
}

.box {
  flex: 1;
  min-width: 200px;
  border: 1px solid black;
  padding: 10px;
  overflow-x: auto; /* Add this line to enable horizontal scrolling */
}

textarea {
  width: 100%; /* Set the width of the textarea to 100% */
  box-sizing: border-box; /* Include padding and border in the width calculation */
}
</style>
</head>
<body>
<h4 style="text-align:center">Compare Left & Right Boxes</h4>
<h5 style="text-align:center">Stretch to Fit Container</h5>
<div class="container">
  <div class="box" contenteditable="true">
    <!-- Content of the first div -->
    <textarea class="copyFrom" rows="4" cols="12">1</textarea>
  </div>
  <div class="box" contenteditable="true">
    <!-- Content of the second div -->
    <textarea class="copyFrom" rows="4" cols="12">2</textarea>
  </div>
</div>
<div class="container">
  <div class="box" contenteditable="true">
    <!-- Content of the first div -->
    <textarea class="copyFrom" rows="4" cols="12">3</textarea>
  </div>
  <div class="box" contenteditable="true">
    <!-- Content of the second div -->
    <textarea class="copyFrom" rows="4" cols="12">4</textarea>
  </div>
</div>
<div class="container">
  <div class="box" contenteditable="true">
    <!-- Content of the first div -->
    <textarea class="copyFrom" rows="4" cols="12">5</textarea>
  </div>
  <div class="box" contenteditable="true">
    <!-- Content of the second div -->
    <textarea class="copyFrom" rows="4" cols="12">6</textarea>
  </div>
</div>
<div class="container">
  <div class="box" contenteditable="true">
    <!-- Content of the first div -->
    <textarea class="copyFrom" rows="4" cols="12">7</textarea>
  </div>
  <div class="box" contenteditable="true">
    <!-- Content of the second div -->
    <textarea class="copyFrom" rows="4" cols="12">8</textarea>
  </div>
</div>
<br>
</body>
</html>
 
VBService

VBService

Joined
Jul 4, 2023
Messages
475
Reaction score
58
I have one suggestion, add to textarea css code: resize: vertical;
CSS: 
textarea {
  width: 100%; /* Set the width of the textarea to 100% */
  box-sizing: border-box; /* Include padding and border in the width calculation */
  resize: vertical;
}
 
V

vmars316

Joined
May 21, 2012
Messages
44
Reaction score
0
Thanks VBService ,
What is the purpose of 'resize: vertical;' ?
I was hoping that it would 'auto resize' the textarea
so that user doesn't have to 'resize by hand' ;
I also tried '

.box {
flex: 1;
min-width: 200px;
border: 1px solid black;
padding: 10px;
overflow-x: auto; /* Add this line to enable horizontal scrolling */
overflow-y:auto; /* Add this line to enable vertical scrolling */
/resize: vertical;/
But no go .
I dont mind horizontal scroll bar .
But I want vertical scrolling to be automatic .
How can I make it happen automatic ?
Thanks
}
'
 
VBService

VBService

Joined
Jul 4, 2023
Messages
475
Reaction score
58
Check this
CSS: 
textarea {
  width: 100%; /* Set the width of the textarea to 100% */
  box-sizing: border-box; /* Include padding and border in the width calculation */
  resize: none;
  overflow-x: auto;
}

HTML: 
<!DOCTYPE html>
<html>
  <head>
    <title>Compare Left & Right Boxes</title>
    <style>
      .container {
        display: flex;
        margin-bottom: 1rem; /* instead of <br> after <div> class container */
      }

      .box {
        flex: 1;
        min-width: 200px;
        border: 1px solid black;
        padding: 10px;
        overflow-x: auto;
      }

      textarea {
        width: 100%; /* Set the width of the textarea to 100% */
        box-sizing: border-box; /* Include padding and border in the width calculation */
        resize: none;
        overflow-x: auto;
      }

      /* demo purpose */
      body * { /* for Firefox */
        scrollbar-width: thin;
      }
     
      textarea::-webkit-scrollbar {
        width: .55rem;
      }
      textarea::-webkit-scrollbar-thumb {
        background-color: hsl(0 0% 0% / .6);
        border-radius: .15rem;
      }
      textarea::-webkit-scrollbar-track {
        background-color: hsl(0 0% 0% / .1);
      }
      textarea::-webkit-scrollbar-thumb:hover {
        background-color: hsl(0 0% 0% / .9);
      }    
    </style>
  </head>
  <body>
    <h4 style="text-align:center">Compare Left & Right Boxes</h4>
    <h5 style="text-align:center">Stretch to Fit Container</h5>
    <div class="container">
      <div class="box" contenteditable="true">
        <!-- Content of the first div -->
        <textarea class="copyFrom" rows="4" cols="12">1</textarea>
      </div>
      <div class="box" contenteditable="true">
        <!-- Content of the second div -->
        <textarea class="copyFrom" rows="4" cols="12">2</textarea>
      </div>
    </div>
    <div class="container">
      <div class="box" contenteditable="true">
        <!-- Content of the first div -->
        <textarea class="copyFrom" rows="4" cols="12">3</textarea>
      </div>
      <div class="box" contenteditable="true">
        <!-- Content of the second div -->
        <textarea class="copyFrom" rows="4" cols="12">4</textarea>
      </div>
    </div>
    <div class="container">
      <div class="box" contenteditable="true">
        <!-- Content of the first div -->
        <textarea class="copyFrom" rows="4" cols="12">5</textarea>
      </div>
      <div class="box" contenteditable="true">
        <!-- Content of the second div -->
        <textarea class="copyFrom" rows="4" cols="12">6</textarea>
      </div>
    </div>
    <div class="container">
      <div class="box" contenteditable="true">
        <!-- Content of the first div -->
        <textarea class="copyFrom" rows="4" cols="12">7</textarea>
      </div>
      <div class="box" contenteditable="true">
        <!-- Content of the second div -->
        <textarea class="copyFrom" rows="4" cols="12">8</textarea>
      </div>
    </div>

    <script>
      // demo purpose
      const textarea_1 = document.querySelector('textarea');
      textarea_1.innerHTML = 'Lorem\n'.repeat(10);
    </script>
  </body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Having trouble centering contents of td ? 3
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
SendGrid email issue in responsive Gmail 1
How to have two html audio players on one page? 0
Javascript DOM 1
Help needed with thank you message 5
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Image shifts to the right when export the page to pdf 4

Members online

Total: 53 (members: 2, guests: 51)
Robots: 89

Forum statistics

Threads
473,983
Messages
2,570,187
Members
46,747
Latest member
jojoBizaroo

Latest Threads

Top