Yes that’s basically what the code I gave you does.
CSS does not allow selection of data you would need JS to do that if I understand correctly. You can copy and paste content by the usual highlight method and dragging the cursor over the text you want to copy but once you set contenteditable="true" to true then you can only copy the text in that element and not all other elements in that column.
As son as you set contenteditable then you can only highlight the text in that element (browsers may vary but Chrome only allows the current element to be selected).
You could create a nested grid and put contenteditable on the column but then that would stop you having separate row styling as editing it would duplicate the whole element including html and not just the content.
The columns won’t drop below in both the examples I have given.
It sounds to me as though you will need to add some JS connected to a button that will allow the user to highlight and copy the whole column rather than them trying to drag the mouse across multiple rows.
That example doesn’t use the contenteditable attribute that you were using to edit the text. As I said above there is n o issue in selecting the text without that attribute.
Here is my example code without that attribute and you can copy each column as required,
As soon as you add the attribute mentioned then you can only copy the one cell. Unless you use the example from my previous post but with the caveats already mentioned.
Of course I may be misunderstanding what you want exactly and missing the target
PaulOB ;
I have a related question :
Is there a way to force the 1st row 2nd column to expand in accordance to what is in the 1st row 1st column , or vice-versa?
Thanks
That’s a good question and one that seems to defeat me at the moment.
My CSS grid skills are pretty basic I can usually do most of the stuff I want without grid and when I find something complex I want to try then grid can’t seem to do it either
It seems as though you would need the new CSS subgrid option which will allow the nested grid columns to maintain alignment but browser support is sparse at the moment.
The only option I can think of at the moment to simplify things is when you output the html (! assume you are doing this from a database or generating automatically somewhere) is that you directly write a style attribute into the html and apply the order property.
This would entail counting the items in the list and then applying odd numbers to the first half of results and even numbers to the second half of results. This would result in this codepen.
The css is simplified but the html has the order property written directly into the tag.
<div class="grid-container">
<div style="order:1">1) Col 1 row 1<br>
test<br>
test<br>
test</div>
<div style="order:3">2) Col 1 row 2</div>
<div style="order:5">3) Col 1 row 3<br>
test<br>
test</div>
<div style="order:7">4) Col 1 row 4</div>
<div style="order:9">5) Col 1 row 5<br>
test<br>
test</div>
<div style="order:11">6) Col 1 row 6</div>
<div style="order:2">7) Col 2 row 1<br>
test</div>
<div style="order:4">8) Col 2 row 2<br>
test<br>
</div>
<div style="order:6">9) Col 2 row 3<br>
test<br>
<br>
test<br>
test</div>
<div style="order:8">10) Col 2 row 4</div>
<div style="order:10">11) Col 2 row 5<br>
test<br>
test <br>
test<br>
test</div>
<div style="order:12">12) Col 2 row 6</div>
</div>
If you can’t do that automatically from the back-end then I’m sure one of the JS experts here could duplicate that effect in js without too much trouble.
Here’s my attempt at adding the order property with JS. It’s probably a bit simplistic but as proof of concept seems to work.
The html is in order and originally laid out right to left and so on as per normal. The order property then changes the order of the items so that the first half of the list is shown on the left and the second half shown on the right. This allows you to copy the text from one column or the other rather than going from side to side.
Thanks PaulOB ;
I don’t really understand the .js code ,
so think I’ll stick with the
grid-template-columns: repeat(
auto-fill,
minmax(120px, 50%) minmax(120px, 50%) option .
I like its compactability (number of lines of code).
But the prob with the ‘auto-fill’ code is that it looses its "individual column selectability’’ .
Is there a way to keep ‘auto-fill’ and also have ''individual column selectability" ?
No I’m afraid not because you are asking the browser to select something that is not in order of the html. The highlighting of text must follow the html and not the display you see on the screen.
That’s why my examples have the correct html order but then css moved them out of position and into columns.
The JS example is the most concise of all those methods and the one I would go with. The JS counts the number of elements in question and then directly applies the css order property in such an order that the first half of the list appears on the right and the second half appears on the left.
The html and CSS for the js example is the simplest also and easier to undertsand.
I don’t see any other alternatives at the moment that will work as well as that method (although I never say never).
With JS the numbers go down the left column first (1,2,3,4,5,6,) and then down the right column you get (7,8,9,10,11,12).
i.e.
1 - 7
2 - 8
3 - 9
4 - 10
5 - 11
6 - 12
With js removed you would get the horizontal wrapping.
Note that both screenshots are using the same html and css. I have just removed the JS from the second one.
The JS in the codepen is in the right panel of the codepen. It is akin to having the JS in a script tag at the end of the html just before the closing body tag but after all other content.
Th js automatically runs when the document is loaded and counts how many elements you have and sets the css so that the elements appear to be in column while in fact the html is still in the original left to right order. This is how you are able to highlight each column rather than highlighting the whole page as you move down.
If you were to look at the source code in your devtools panel you will see that the html looks different becuse the js has added the inline css just like this.
<div class="grid-container">
<div style="order: 1;">1) Col 1 row 1<br>
test<br>
test<br>
test</div>
<div style="order: 3;">2) Col 1 row 2</div>
<div style="order: 5;">3) Col 1 row 3<br>
test<br>
test</div>
<div style="order: 7;">4) Col 1 row 4</div>
<div style="order: 9;">5) Col 1 row 5<br>
test<br>
test</div>
<div style="order: 11;">6) Col 1 row 6 <br>test</div>
<div style="order: 2;">7) Col 2 row 1<br>
test</div>
<div style="order: 4;">8) Col 2 row 2<br>
test<br>
</div>
<div style="order: 6;">9) Col 2 row 3<br>
test<br>
<br>
test<br>
test</div>
<div style="order: 8;">10) Col 2 row 4</div>
<div style="order: 10;">11) Col 2 row 5<br>
test<br>
test <br>
test<br>
test</div>
<div style="order: 12;">12) Col 2 row 6</div>
</div>
You can see that the order property has been added a style attribute to the html.
style="order: 12;
e.g.
<div style="order: 12;">12) Col 2 row 6</div>
If you view the actual source in the codepen itself you will not see that style attribute. You would see this for that last item.
<div>12) Col 2 row 6</div>
Hope that was what you were asking unless you meant you wanted to know the specifics of the JS itself?
Thanks PaulOB ;
Oops , Sorry !
I put your js in the wrong place .
Your js is super cool .
I thought I could exchange
this “minmax(120px, 50%) minmax(120px, 50%)”
with this “minmax(120px, 30%) minmax(120px, 30%) minmax(120px, 30%)” . But nogo .
As I am learning about css-Grid ,I was thinking of writing a “grid maker program” (in pureBasic) ,
but with your concise code , maybe I won’t need to .
What code changes would I have to make in order to create more columns using your js code , and still using the original 12 DivCells ?
I mentioned above that the the logic of the JS in that it counts the divs in the html and then divides that amount by 2 to get 2 columns and then applies the css appropriately.
If you wanted 3 columns then the JS would need to be adjusted to divide by 3 and distribute the inline css accordingly.
Here’s the 3 column version.
Note that the JS is assuming that the divs available are exactly divisible by 3. If for example you only output 11 divs then there is no error checking in the JS to account for this. You would need to build in some error checking or at least make sure that the back end of your application always outputs an even number of columns (or outputs some dummy elements to keep the columns even).