How to adjust the style of a spreadsheet (plugin: $:/plugins/ebalster/formula)?

[Surya]

Hi,

I'd like to implement calculating with a spreadsheet with the plugin: $:/plugins/ebalster/formula.

But the style of it is for my purpose of writing recipes not really nice. I already adjusted it a little bit.

I wrote in the tiddler:

\define ss_cols() a b c d e f g
\define ss_rows() 1 2 3 4 5 6
\define ss_cell() $(c)$$(r)$


<$tiddler tiddler="Spreadsheet/Data">

<$vars popupState=<<qualify "$:/temp/spreadsheet/pop">> popupCell=<<qualify "$:/temp/spreadsheet/popcell">> >

<$reveal type="popup" state=<<popupState>> >
<div class="tc-drop-down tc-popup-keep">

<$set name="cell" filter="[title<popupCell>get[text]]">
''<<cell>>'': <$edit-text tag=input index=<<cell>> size=100 />
<$button class="tc-btn-invisible">{{$:/core/images/save-button}}<$action-setfield $tiddler=<<popupState>> text=""/></$button>
</$set>

</div>
</$reveal>

<table>
<tr><th></th><$list variable=c filter=<<ss_cols>> ><th><<c>></th></$list></tr>
<$list variable=r filter=<<ss_rows>> >
<tr>
    <th style="padding:0;"><<r>></th>
    <$list variable=c filter=<<ss_cols>> ><td style="padding:0;">
        <$button popup=<<popupState>> style="width:100%;margin:0;padding:6px;display:block;background:none;border:none;cursor:pointer;"><$action-setfield $tiddler=<<popupCell>> text=<<ss_cell>>/> <$formula formula=<<ss_cell>>/>
        </$button>
    </td>
    </$list>
</tr>
</$list>
</table>

</$vars>

<!-- <table>
<tr><th></th><$list variable=c filter=<<ss_cols>> ><th><<c>></th></$list></tr>
<$list variable=r filter=<<ss_rows>> >
<tr><th><<r>></th><$list variable=c filter=<<ss_cols>> ><td><$edit-text tag=input index=<<ss_cell>> size=10/></td></$list></tr>
</$list>
</table> -->

</$tiddler>


But how could I adjust the following:

The first row (called header, right??) and the first column (don't know how it's called) should be invisible- or even better only visible when hovering over it.

And maybe, it would be possible to wrap cells together, if in cells is no content?

And I'd like to hide the content of a specific cell.


Would be great, if you could help me with that :-)
THANKS for this great helping community!
Surya

[Surya]

Hello @all,

I found out now a little bit how to adjust it.
But only a little bit...

I can now adjust the first column: Not anymore grey blackground and the font is very small- almost invisible (in that way, I can see the content for calculating by Ctrl + scrolling up, but in normal view mode it is almost invisible).

I also can now adjust the background from the cells, where I write the main content. I don't need that possibility at the moment, but nice to know the how-to.


But still I don't know how to adjust the width of the first column.
And I don't know how to adjust the background-colour, the font-size and the height of the header.
And I don't know how to make one certain cell invisible (or better one column).

That is what I wrote into the Spreadsheet Prototype:

\define ss_cols() a b c d e f g
\define ss_rows() 1 2 3 4 5 6
\define ss_cell() $(c)$$(r)$

<$tiddler tiddler="Spreadsheet/Data">

Click on cells to pop up an editor.  Formulas currently need to be written in `(= =)` but cells may be referred to by their names, such as `a2`.  Ranges aren't supported yet.

<$vars popupState=<<qualify "$:/temp/spreadsheet/pop">> popupCell=<<qualify "$:/temp/spreadsheet/popcell">> >

<$reveal type="popup" state=<<popupState>> >
<div class="tc-drop-down tc-popup-keep">

<$set name="cell" filter="[title<popupCell>get[text]]">

''<<cell>>'': <$edit-text tag=input index=<<cell>> size=230 />

<$button class="tc-btn-invisible">{{$:/core/images/save-button}}<$action-setfield $tiddler=<<popupState>> text=""/></$button>
</$set>

</div>
</$reveal>

<table>
<tr><th></th><$list variable=c filter=<<ss_cols>> ><th><<c>></th></$list></tr>
<$list variable=r filter=<<ss_rows>> >
<tr>

    <th style="background-color:white;font-size:0.2em;padding:0;"><<r>></th>
    <$list variable=c filter=<<ss_cols>> ><td style="background-color:white;padding:0;">

        <$button popup=<<popupState>> style="width:100%;margin:0;padding:6px;display:block;background:none;border:none;cursor:pointer;"><$action-setfield $tiddler=<<popupCell>> text=<<ss_cell>>/> <$formula formula=<<ss_cell>>/>
        </$button>
    </td>
    </$list>
</tr>
</$list>
</table>

</$vars>

<!-- <table>
<tr><th></th><$list variable=c filter=<<ss_cols>> ><th><<c>></th></$list></tr>
<$list variable=r filter=<<ss_rows>> >
<tr><th><<r>></th><$list variable=c filter=<<ss_cols>> ><td><$edit-text tag=input index=<<ss_cell>> size=10/></td></$list></tr>
</$list>
</table> -->

</$tiddler>

Could someone of you please help me with that?
Thanks a lot in advance! Surya

[coda coder]

On Sunday, February 4, 2018 at 3:21:39 PM UTC-6, Surya wrote:

\define ss_cols() a b c d e f g
\define ss_rows() 1 2 3 4 5 6
\define ss_cell() $(c)$$(r)$

<$tiddler tiddler="Spreadsheet/Data">

Click on cells to pop up an editor.  Formulas currently need to be written in `(= =)` but cells may be referred to by their names, such as `a2`.  Ranges aren't supported yet.


<$vars popupState=<<qualify "$:/temp/spreadsheet/pop">> popupCell=<<qualify "$:/temp/spreadsheet/popcell">> >

<$reveal type="popup" state=<<popupState>> >
<div class="tc-drop-down tc-popup-keep">

<$set name="cell" filter="[title<popupCell>get[text]]">
''<<cell>>'': <$edit-text tag=input index=<<cell>> size=230 />
<$button class="tc-btn-invisible">{{$:/core/images/save-button}}<$action-setfield $tiddler=<<popupState>> text=""/></$button>
</$set>

</div>
</$reveal>

I would use CSS nth-child, targeting the THs and TDs.  But first, to help the cascade better, give this table a class:

 

<table class="my-ss-table">

you can change that name to anything that makes sense to you.

Then in your css, to hide all the cells in column 2, write something like this:

.my-ss-table th:nth-child(2),

.my-ss-table td:nth-child(2) {
  display:none;
}

The above assumes you will have NO INNER nested TABLES with more THs and TDs.  If you DO have nested tables, change it to this:

.my-ss-table > th:nth-child(2),

.my-ss-table > td:nth-child(2) {
  display:none;
}

I have not tested this... and my ability to parse other people's code is limited, so I hope this is what you're asking for.

You can read about nth-child here: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Coda

[Surya]

Hi Coda,

thanks for your answer :-)

I tried now to insert

<table class="my-ss-table">

and
to insert

.my-ss-table th:nth-child(2),

.my-ss-table td:nth-child(2) {
  display:none;
}


at different places, but with no success at all.
Where do have to insert it in this:??


\define ss_cols() a b c d e f g
\define ss_rows() 1 2 3 4 5 6
\define ss_cell() $(c)$$(r)$

<$tiddler tiddler="Spreadsheet/Data">

Click on cells to pop up an editor.  Formulas currently need to be written in `(= =)` but cells may be referred to by their names, such as `a2`.  Ranges aren

't supported yet.

<$vars popupState=<<qualify "$:/temp/spreadsheet/pop">> popupCell=<<qualify "$:/temp/spreadsheet/popcell">> >

<$reveal type="popup" state=<<popupState>> >
<div class="tc-drop-down tc-popup-keep">

<$set name="cell" filter="[title<popupCell>get[text]]">
''<<cell>>'': <$edit-text tag=input index=<<cell>> size=230 />

<$button class="tc-btn-invisible">{{$:/core/images/save-button}}<$action-setfield $tiddler=<<popupState>> text=""/></$button>
</$set>

</div>
</$reveal>

<table>
<tr><th></th><$list variable=c filter=<<ss_cols>> ><th><<c>></th></$list></tr>
<$list variable=r filter=<<ss_rows>> >
<tr>
    <th style="background-color:white;font-size:0.2em;padding:0;"><<r>></th>
    <$list variable=c filter=<<ss_cols>> ><td style="background-color:white;padding:0;">

        <$button popup=<<popupState>> style="width:100%;margin:0;padding:6px;display:block;background:none;border:none;cursor:pointer;"><$action-setfield $tiddler=<<popupCell>> text=<<ss_cell>>/> <$formula formula=<<ss_cell>>/>
        </$button>
    </td>
    </$list>
</tr>
</$list>
</table>

</$vars>

<!-- <table>
<tr><th></th><$list variable=c filter=<<ss_cols>> ><th><<c>></th></$list></tr>
<$list variable=r filter=<<ss_rows>> >
<tr><th><<r>></th><$list variable=c filter=<<ss_cols>> ><td><$edit-text tag=input index=<<ss_cell>> size=10/></td></$list></tr>
</$list>
</table> -->

</$tiddler>

The above assumes you will have NO INNER nested TABLES with more THs and TDs.  If you DO have nested tables, change it to this:

>>>I don't kno what inner nested tables are, so I think, I don't have such. This what I wrote above, IS the table with calculating possibilities.

Surya

[coda coder]

On Sunday, February 4, 2018 at 4:12:45 PM UTC-6, Surya wrote:

Hi Coda,

thanks for your answer :-)

Create a spreadsheet tiddler called spreadsheet-css and give it the tag  $:/tags/Stylesheet


Place this code in the spreadsheet tiddler:

[coda coder]

And, of course, if you want to hide column 6, just change the 2 to a 6.

[Surya]

Hi Coda,

hmmm, I almost reached that goal.
The header (the first row) is now almost invisible (white background, font-size very very small. The same with the first column.
And I made the one cell almost invisible.

But there are some strange behaviours. It seems to me, that it counts the cells & rows different than I would count them:
The first row (header) seems to be td:nth-child(1), there I had to count every cell (th:nth-child) from 1-9, two give the whole head-row the same style. Okay fine, I understood.
So, in my logic the style-command for the cell "h1" should be .my-ss-table th:nth-child(9), .my-ss-table td:nth-child(2) { background-color:white;font-size:0.2em; }.
But it is: .my-ss-table th:nth-child(1), .my-ss-table td:nth-child(9) { background-color:white;font-size:0.2em; }.


Okay, maybe, I don't have to understand everything. Just like almost always in TW: "Try & error" to reach my goal.... ;-)

But also it made some other strange things:
It made a additional row above the table, the "</$tiddler>" is now visible under the table in view mode and it build a frame around the table and the rest of the tiddler-text.

And: I can make the width of a column wider than now, but not smaller than it is now.

Maybe, I should build a new wiki on tiddlyspot for testing-purposes- so that you could better see, what I mean and see my mistakes better?
Surya

[coda coder]

On Monday, February 5, 2018 at 5:43:00 PM UTC-6, Surya wrote:

It made a additional row above the table, the "</$tiddler>" is now visible under the table in view mode and it build a frame around the table and the rest of the tiddler-text.

Then you have structural errors in your html.

 

Maybe, I should build a new wiki on tiddlyspot for testing-purposes- so that you could better see, what I mean and see my mistakes better?

Yes, please. :) I'm sorry I couldn't follow your description -- an example online would be better and tell us which columns you would like to hide/change with CSS.

[coda coder]

Does this help?  Put it all in one tiddler...

<style>
.my-ss-table th:nth-child(1) {
 background-color:yellow;

}
.my-ss-table th:nth-child(2),
.my-ss-table td:nth-child(2) {
 display:none;
}

</style>

<table class="my-ss-table">
<tr>
 <th>one</th><th>two</th><th>three</th><th>four</th><th>five</th>
</tr>
<tr>
 <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
<tr>
 <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
<tr>
 <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
</table>

[Surya]

Hello Coda,

Yes, that did it without strange behaviour :-)

Now: How to adjust the column-width of the first column (1-6) to very narrow and how to adjust the row-height of the first row (header: a-g) to very low? So that both are much more almost invisible (but still readable for me, if I need them).

And how could I make the cell c6 (where "24" is written) with red background-color or with the number 24 bold written?
And how could I make the cell f6 (where "1" is written) with very small font-size?

All tiddlers related to this thread are pinned at the moment. And the wiki is on http://suryas-testwiki.tiddlyspot.com/.

Thanks, Surya :-)

 

[Surya]

Sorry, I forgot to write, that the last one (fitting my wishes best) adjusted with your last advice is called "Spreadsheet Prototype 2".