can't solve CSS problem with tag pill drop-down list

[Erwan]

Hi everyone,

In my task system http://esb-css-tag-pill.bitballoon.com/, I use a custom version of $:/core/ui/ListItemTemplate in order to display my "tasks tiddlers" with a couple of buttons everytime they appear in a list (for instance in the "more" tab).

However it doesn't work properly when the list is displayed in the drop-down popup of a tag pill: there are line breaks around my "new subtask" button. for example click on the tag pill in this tiddler to see the problem.

I can see that this is probably related to a "display: block" CSS instruction, but after 2 hours of clumsy attempts I decided it was time to ask the experts...

Regards,
Erwan

[Matabele]

Hi Erwan

Not a solution to your problem, but you might be interested in this plugin from tgrosinger.

regards

[Tobias Beer]

Hi Erwan,

The problem is that $:/core/ui/ListItemTemplate serves two radically different designs... whereas in a .tc-drop-down, all links or buttons are rendered in block mode ...and whenever this template is not used within one of those they are note forced into block mode.

I'm thinking that any dropdowns in the core need to implement their own item template and not use $:/core/ui/ListItemTemplate. At least, it needs to be possible to override what template is being used for list items in dropdowns independent from general list-items.

Best wishes,

Tobias.

[Tobias Beer]

Hi again, Erwan,

Right now you can possibly

wrap the entire content of your $:/core/ui/ListItemTemplate

in a container element and override the styles starting with something like:

.tc-drop-down .my-container button,
.tc-drop-down .my-container a {
display: inline !important;
}

Best wishes,

Tobias.

[Erwan]

Hi Tobias,

thank you, this takes me one step further... but there is still a problem apparently, see tag pill in http://esb-css-tag-pill.bitballoon.com/#2016-01-02-175058%20bug%3A%20line%20breaks%20around%20subtask%20button%20in%20tag%20pill%20drop%20down%20list

Do you know how to solve this? do you think maybe I'm stretching the use of $:/core/ui/ListItemTemplate too much?

Cheers,
Erwan

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/27ad2ba3-009d-4112-83bb-72330e23b0d8%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Tobias Beer]

Hi Erwan,

 

Do you know how to solve this? do you think maybe I'm stretching the use of $:/core/ui/ListItemTemplate too much?

Try to also play with width and padding... best use your browser's inspection tools to see what css rules actually apply... and modify in that "console" to play with the settings until satisfactory.

Best wishes,

Tobias.

[Erwan]

Thank you Tobias, I would have given up without your help!
Maybe one day I will learn CSS seriously...

Cheers,
Erwan

On 03/01/16 18:19, Tobias Beer wrote:

Hi Erwan,

 

Do you know how to solve this? do you think maybe I'm stretching the use of $:/core/ui/ListItemTemplate too much?

Try to also play with width and padding... best use your browsers inspection tools to see what css rules actually apply... and modify in that "console" to play with the settings until satisfactory.

Best wishes,

Tobias.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/20d9bf7c-8dbb-4e95-bf14-f50ea8104d6d%40googlegroups.com.