CSS problem: max-wide editor in table

#1

This table shows how an edittextwidget overlaps the fourth button. I want the two first columns (link+buttons) to be narrow, and the editor and its column to be maximally wide - but I don’t have any good solution.

For anyone kind enough to dabble around, a tip is to use the arrow button in that tiddlers toolbar, to open the SideEditor for easy and live css editing.

The code for reference:

<table style="width:100%;">
<$list filter='one two three'>
<tr>
	<td class="tdlink">
		<$link/>
	</td><td class="tdbutton">
		<$button class=button>{{$:/core/images/left-arrow}}</$button>
		<$button class=button>{{$:/core/images/minus-button}}</$button>
		<$button class=button>{{$:/core/images/right-arrow}}</$button>
		<$button class=button>{{$:/core/images/chevron-right}}</$button>
	</td><td class="tdeditor">
		<$edit-text tag=input class="editor"/>
	</td>
</tr>
</$list>
</table>

<style>
.tdlink {width:1%;}
.tdbutton {width:1%; white-space:nowrap}
X.button {min-width:30px;}
.tdeditor {width:100%}
.editor {width:100%; }
</style>
#2

After spending an hour getting nowhere with table-layout, I gave up and just switched to grid & flexbox:

<table class="twMat">
    <$list filter='one two three'>
    <tr>
	    <td class="tdlink">
		    <$link/>
	    </td>
        <td class="tdbutton">
		    <$button class=button>{{$:/core/images/left-arrow}}</$button>
		    <$button class=button>{{$:/core/images/minus-button}}</$button>
		    <$button class=button>{{$:/core/images/right-arrow}}</$button>
		    <$button class=button>{{$:/core/images/chevron-right}}</$button>
        </td>
        <td class="tdeditor">
		    <$edit-text class="editor" tag=input />
	    </td>
    </tr>
    </$list>
</table>
<style>
table.twMat {
    display: grid;
    grid-template-columns: auto auto 1fr;

    td {
        display: flex;
        flex-wrap: nowrap;
        column-gap: 3px;
        align-items: center;
        padding: 3px;
    }

    tr {
        display: grid;
        grid-column: 1/-1;
        grid-template-columns: subgrid;
            td.tdlink { grid-column: 1/2; }
            td.tdbutton { grid-column: 2/3; }
            td.tdeditor { grid-column: 3/4;
                .editor { flex: 1 1 auto; }
            }
    }
}
</style>

I messed with the HTML a bit to hopefully make it visually easier to match with the CSS

How it looked for me

Flexy_Grid_Table
Flexy_Grid_Table943×745 13.1 KB

5 Likes
#3

Aha, total change of tactics, good thinking and a big thank you Brian! That does get the end result!

I’m still curious though as to why the seemingly obvious solutions don’t work here!?

#4

Pretty sure it comes down to tables only being designed to pleasantly display simple, tabular data. No one’s updated the spec for more precise layout but instead (eventually) got a bunch of other, easier layout options.

It looks like tables just ignore most of the current sizing options that would still really come in handy for tabular data display—fit-content, min-content, max-content.

Oh well, we got better tools to work with now. :+1:

2 Likes
#5

Just using the table layout model…

<table style="width:100%;">
<colgroup>
	<col style=""/>
	<col style="width: 9em;"/>
	<col style="width:auto;"/>
</colgroup>
<tbody>
	<tr>
	<td class="tdlink">
...

You can of course move the styles to CSS if you wish, but, other than that, pure HTML.

Is the 9em width “valid”? If you’re specifying widths for the SVG elements, sure. But I do agree with @Brian_Radspinner here, table layout can be tricky without resort to drastic thuggery using grids etc.

1 Like
#6

For the record, I think I got it working for a standard table:

I think the key problem was the svg in the button which doesn’t intrinsically take up any width, so one has to set it explicitly. (Still strange that it wasn’t enough to only set width for the buttons.)

In the following I’ve also added another aspect; I wanted to keep the table HTML as clean as possible, thus only giving a class to the table itself and thereafter let the CSS do the targeting.)

<table class="mytable">
<$list filter='one two three'>
<tr>
	<td><$link/></td>
	<td>
		<$button>{{$:/core/images/minus-button}}</$button>
		<$button>{{$:/core/images/minus-button}}</$button>
		<$button>{{$:/core/images/minus-button}}</$button>
		<$button>{{$:/core/images/minus-button}}</$button>
	</td>
	<td><$edit-text tag=input class="edittext"/></td>
</tr>
</$list>
</table>

<style> 
.mytable td {white-space:nowrap; width:1px;}
.mytable td:nth-last-child(1) {width:100%;}
.mytable button {width:30px; }
.mytable button svg {min-width:15px; }
.mytable td:has(button) {padding:0; min-width:120px; /* 4x30px */ }
.edittext {width:100%; }
</style>