?How to control <td> overflow , contenteditable?

vmars316 · June 26, 2020, 2:51am

Hello & Thanks ;
I have been struggling with this for weeks .
I am using two [aside]s with a [table] in each .
Works fine except for the [td] overflow , it appears to have no boundaries .
I use [table]s so that I can select/copy each [table] separately .
Below are two examples , the first , overflow works as expected but can’t select/copy separately .
With the 2nd , I can select/copy tables individually , but the overlow overlaps the other table .
Sorry I can’t get Post to accept my code , so .

Example 1:

<!doctype html>
<html>
<head>
    <title></title>
</head>
<body>
<h3 style="text-align:center;"> Using multiple HTML5 aside tags . </h3>
        <aside style="float: right; width: 50%; font: 20px Calibri;">
<div style="overflow-x:auto;">
<table  contenteditable="true" style="text-align: left; width: 100%; overflow:scroll;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; overflow:scroll;" ><br>
</td>
</tr>
<tr>
<td style="vertical-align: top; overflow:scroll;" ><br>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><br>
</td>
</tr>
</tbody>
</table>
</div>
</div>
        </aside>

    <aside style="float: left; width: 50%; font: 20px Calibri ">
<div style="overflow-x:auto;">
<table contenteditable="true" style="text-align: left; width: 100%; overflow:scroll;" border="1" cellpadding="2"
cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; overflow:scroll;" ><br><br>
</td>
</tr>
<tr>
<td style="vertical-align: top; overflow:scroll;" ><br><br>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><br>
</td>
</tr>
</tbody>
</table>
</div>
   </aside>
</body>
</html>

Example 2:

<!doctype html>
<html>
<head>
    <title></title>
</head>
<body>
<h3 style="text-align:center;"> Using multiple HTML5 aside tags . </h3>
        <aside style="float: right; width: 50%; font: 20px Calibri;">
<div style="overflow-x:auto;">
<table  contenteditable="true" style="text-align: left; width: 100%; overflow:scroll;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; overflow:scroll;" ><br>
</td>
</tr>
<tr>
<td style="vertical-align: top; overflow:scroll;" ><br>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><br>
</td>
</tr>
</tbody>
</table>
</div>
</div>
        </aside>

    <aside style="float: left; width: 50%; font: 20px Calibri ">
<div style="overflow-x:auto;">
<table contenteditable="true" style="text-align: left; width: 100%; overflow:scroll;" border="1" cellpadding="2"
cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; overflow:scroll;" ><br><br>
</td>
</tr>
<tr>
<td style="vertical-align: top; overflow:scroll;" ><br><br>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><br>
</td>
</tr>
</tbody>
</table>
</div>
   </aside>
</body>
</html>

Thanks for your help!

Gandalf · June 26, 2020, 6:16am

[off-topic]
When you post code in the forum, you need to format it. To do so you can either select all the code and click the </> button, or type 3 backticks ``` on a separate line both before and after the code block.
[/off-topic]

PaulOB · June 26, 2020, 8:11am

I’m not sure what you are trying to do but both sections of code look identical to me anyway?

It is not possible to have overflow on a table-cell. You have to have a wrapper around the table and allow the whole table to scroll or you put a div inside the table cell and allow that to scroll instead.

Usually you would want the table-layout:fixed algorithm on the table otherwise tables will always try to stretch.

As to copying and selecting then that can be a problem of areas with overflow anyway.

PaulOB · June 26, 2020, 11:15am

That method seems to fail when the contenteditable attribute is added.

Does this following example not do what you want?

Chrome and Firefox will allow each row to scroll and the unbroken content will not wrap. Safari will break the unbroken text at the end of the line (which is no big issue).

Haven’t tested Edge as I’m on a mac at the moment.

vmars316 · June 26, 2020, 4:05pm

Thanks
gandalf458 Gandalf the green

10h

[off-topic]
When you post code in the forum, you need to format it. To do so you can either select all the code and click the </> button, or type 3 backticks ``` on a separate line both before and after the code block.
[/off-topic]
The hint says “blockquote” . I wa looking for ‘Code’ .
Yes , sorry I forget that because it is different from all other forums that I know .
Thanks

Ray.H · June 26, 2020, 5:01pm

I’d be inclined to let the long words break and wrap. That’s just my opinion and as an end user I’d rather see that than have to deal with a scrollbar for long words. That may not be what @vmars316 is wanting though.

.row {
  width: 100%;
  overflow: auto;
  padding: 10px;
  border: 1px solid #000;
  overflow-wrap: break-word;
}

vmars316 · June 26, 2020, 5:18pm

Thanks Paul ;
The general rule seems to be if cells are ‘contenteditable=true’ , can only copy one cell at a time . If cells are contenteditable=false , can copy all cells with one copy . And the order of copied is row by row .
So given that , here are three

The 1st:
Of all the layouts I have found , the 1st example is the best for my purposes . I like the way it handles overflow and Enter-key .


<!DOCTYPE html>
<html>
<style>
#Lcol {

}
#Rcol {

}
</style>
<body>
<h4>Non-Editable Copies all [p] as One , No Column Copy</h4>
<p  id="Lcol " contentEditable = "false" style="display: inline-block; background: yellow; width:45%;">This is a paragraph 1. Lcol</p>
<p id="Rcol " contentEditable = "false" style="display: inline-block; background: lightblue; width:45%;">This is a paragraph 2. Rcol<hr></p>

<p id="Lcol " contentEditable = "false" style="display: inline-block; background: yellow; width:45%;">This is a paragraph 3. Lcol</p>
<p id="Rcol " contentEditable = "false" style="display: inline-block; background: lightblue; width:45%;">This is a paragraph 4. Rcol<hr></p>

<p id="Lcol " contentEditable = "false" style="display: inline-block; background: yellow; width:45%;">This is a paragraph 5. Lcol</p>
<p id="Rcol " contentEditable = "false" style="display: inline-block; background: lightblue; width:45%;">This is a paragraph 6. Rcol<hr></p>

</body>
</html>

The second:
table-layout: fixed; width: 100%: Editable . I like the way it handles overflow and Enter-key . But of course it is Editable , no surprise it copies 1 cell at a time only .


<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>

<h4 style="color: rgb(0, 0, 0); font-family: Verdana; font-style: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
table-layout: fixed; width: 100%: Editable</h4>

<table style="border: 1px solid black; border-collapse: collapse; table-layout: fixed; width: 592px; color: rgb(0, 0, 0); font-family: Verdana; font-size: medium; font-style: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
<tbody>
<tr>
<th style="border: 1px solid black;">
Company</th>
<th style="border: 1px solid black;">
Contact</th>
<th style="border: 1px solid black;">
Country</th>
</tr>
<tr>
<td contenteditable="true" style="border: 1px solid black;">
Alfreds Futterkiste</td>
<td contenteditable="true" style="border: 1px solid black;">
Maria Anders</td>
<td contenteditable="true" style="border: 1px solid black;">
Germany</td>
</tr>
<tr>
<td contenteditable="true" style="border: 1px solid black;">
Island Trading</td>
<td contenteditable="true" style="border: 1px solid black;">
Helen Bennett</td>
<td contenteditable="true" style="border: 1px solid black;">
UK</td>
</tr>
<tr>
<td contenteditable="true" style="border: 1px solid black;">
Magazzini Alimentari Riuniti</td>
<td contenteditable="true" style="border: 1px solid black;">
Giovanni Rovelli</td>
<td contenteditable="true" style="border: 1px solid black;">
Italy</td>
</tr>
</tbody>
</table>

</body>
</html>

The 3rd:
Is your code , which I used as a Template to create a Html-Grid-Generator.exe program . It just needs a few finishing touches ;

Also mentioned here :
https://www.sitepoint.com/community/t/how-to-make-each-grid-column-individually-selectable/351615/24

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title></title>
      <!-- https://www.freeformatter.com/html-validator.html  -->
      <style>
         /*  comment */
         .grid-container {
         display: grid;
grid-gap: 2px; /*grid-gap*/ 
         grid-template-columns: repeat(
         auto-fill,
 minmax(120px, 100%) minmax(120px, 100%) minmax(120px, 100%) minmax(120px, 100%)
         );
background-color: blue; /*grid-background-color*/
         padding: 4px; /*padding*/
         }
         .grid-container > .div_div{
         text-align: center;
         font-size: 12px;
         background-color: rgba(255, 255, 255, 0.8); 
         padding: 4px;
         }  
//		 .div_div { resize: vertical; }
		 textarea { resize: none; 
		 height: 200px; /*textarea-height*/
		 Width: 100%; 
		 }
      </style>
   </head>
   <body>
      <h5 style="text-align: center;" >Generated By Html-Grid-Maker</h5>
      <!-- comment  -->
      <div class="grid-container">
<!--  <div class="div_div" style="order: 1;">1</div>  -->
<div class="div_div"style="order: 1;"> Row 1 Col 1 </div>
<div class="div_div"style="order: 5;"> Row 2 Col 1 </div>
<div class="div_div"style="order: 9;"> Row 3 Col 1 </div>
<div class="div_div"style="order: 13;"> Row 4 Col 1 </div>
<div class="div_div"style="order: 17;"> Row 5 Col 1 </div>
<div class="div_div"style="order: 21;"> Row 6 Col 1 </div>
<div class="div_div"style="order: 2;"> Row 1 Col 2 </div>
<div class="div_div"style="order: 6;"> Row 2 Col 2 </div>
<div class="div_div"style="order: 10;"> Row 3 Col 2 </div>
<div class="div_div"style="order: 14;"> Row 4 Col 2 </div>
<div class="div_div"style="order: 18;"> Row 5 Col 2 </div>
<div class="div_div"style="order: 22;"> Row 6 Col 2 </div>
<div class="div_div"style="order: 3;"> Row 1 Col 3 </div>
<div class="div_div"style="order: 7;"> Row 2 Col 3 </div>
<div class="div_div"style="order: 11;"> Row 3 Col 3 </div>
<div class="div_div"style="order: 15;"> Row 4 Col 3 </div>
<div class="div_div"style="order: 19;"> Row 5 Col 3 </div>
<div class="div_div"style="order: 23;"> Row 6 Col 3 </div>
<div class="div_div"style="order: 4;"> Row 1 Col 4 </div>
<div class="div_div"style="order: 8;"> Row 2 Col 4 </div>
<div class="div_div"style="order: 12;"> Row 3 Col 4 </div>
<div class="div_div"style="order: 16;"> Row 4 Col 4 </div>
<div class="div_div"style="order: 20;"> Row 5 Col 4 </div>
<div class="div_div"style="order: 24;"> Row 6 Col 4 </div>
	  </div>
	  <br><br>
   </body>
</html>

Next I think I’ll see if I can write .js code for the Non-Editable examples above to Copy/Capture each cell , by column . Do you think this is possible ?
Thanks

Btw: The code you Posted above gives really strange results in Chrome ; try propagating , let’s say , a ‘zzzzzzzzzzzz’ til it overflows .

Gandalf · June 26, 2020, 5:45pm

I don’t have a complete answer for you, but ids must be unique in the document.

PaulOB · June 26, 2020, 5:48pm

I think the codepen I gave you above allows the cells to be copied as required so not sure what you require that is not already in place in that code. If you apply contenteditable to the parent then the children become editable and seem to behave like you want?

Hi Ray, that’s exactly what the contentediatable property does (in Chrome) as it adds that overflow-wrap:break-word by default. You can see it added in the devtools inspector and that’s why I had to counter it with the normal.

I agree that the default version was better but just trying to ascertain what was required

It copies all cells if you apply the contenteditable to the table element andf not the cells. The cells still remain editable.

<table contenteditable="true" etc..

Only tested on Chrome as I didn’t want to waste time on a wild goose chase if I’ve misunderstood.

I didn’t see any unexpected strange results. Unbroken text will almost always overflow unless you control it. If you want unbroken words to wrap then tell them to do so.

.grid_container{overflow-wrap:break-word;}

vmars316 · June 26, 2020, 6:43pm

Thanks
gandalf458 Gandalf the green

1h

I don’t have a complete answer for you, but id s must be unique in the document.

THanks , I was thinking it was the other way around , where class had to be unique .

vmars316 · June 26, 2020, 6:51pm

Thanks [Ray.H]
I just found out about overflow-wrap: break-word; today : )

system · September 26, 2020, 1:51am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.