DynamicTable + Pickaday + Details-Widget: How to style?

#1

Hello @all,

trying to build a ToDo-Manager inside TW, I choosed now https://kookma.github.io/TW-Pikaday/ . The ToDo-List with a dynamic table inside there also almost fits my needs.

I combined the ToDo-List now also with the details-widget from @telmiger , to be able to show only the overdue tasks or only tasks from tomorrow and so on.

It works fine. But I almost cannot style it like I want.
The table is fine, when outside of the details-widget. But when inside the details-widget, then the table behaves /looks different and after hours now I gave up trying to style it.
Only the olive line between “Überfällig!” and the table-header I managed to get smaller.

What I want is:

  • The table-header should be less high- like it is outside of the details-widget (in the image at the bottom).
    I guess it is because of the sorting arrow, but don’t know, why this only happens inside the details widget.
  • These white forms under the tags should not be there.
  • The width of the columns should be like outside of the details widget (like in the table on the bottom). The Tags-column could be even a bit smaller, it is okay, when the tags are written one under the other.
  • Attached an image to show, what I mean. On top the table is inside the details widget. On bottom the table is outside of the details widget. And here you can test it: Tests >Meine ToDos

How to solve these things?

TW Meine ToDo-Liste OptikwĂĽnsche
TW Meine ToDo-Liste OptikwĂĽnsche874Ă—606 119 KB

Thank you all in advance, Noushka
TW 5.3.3, Firefox, Windows 10

#2

@Noushka

In $:/plugins/telmiger/details/details.css you need to

replace

details span {
   padding: 10 0.75em 0.1em 0.8em;
   display: block;
}

with

details span {
   padding: 10 0.75em 0.1em 0.8em;
   display: inline-block;
}

An interisting project you got there. (Ein interessantes Projekt hast Du da vor.) :smiley:

#3

Hej Xrizzy,

Great, with that the header now looks like I want- Thanks!!
Und

danke :slight_smile:

(I mark your answer not yet as solution, so that nobody thinks everything in this thread would be already solved :wink: But when everything is solved, then I mark your answer of course!)

1 Like
#4

Found also the solution for removing the white stripes next to the tags inside the dynamic tbale inside the details widget:
In my tiddler "Meine ToDos I had to write the following code

.tt-findTitles .tc-tag-list-item {
  width: 60%;}