How to get rid of centered text in TW5 table of contents

[David Gifford]

Hi all

I am using the TW5 table of contents, with the code at the bottom. The heading is the text of a Bible verse. The part that slides open is the notes section for that verse.

But some of the headings are becoming centered horizontally. Not all, just some. I can't figure out why. Because of length? I don't know. I scoured the vanilla stylesheet for some sign of horizontal alignment rules for the toc, but found none. If anyone can help me out, I would appreciate it.

<div class="tw-table-of-contents">

<span class="indent1">

<<toc-heading "Prepárame también alojamiento; porque espero que por vuestras oraciones os seré concedido." "{{ 22 notes }}">>

</span>

</div>

[Alberto Molina]

Hi David,

But some of the headings are becoming centered horizontally. Not all, just some. I can't figure out why. Because of length? I don't know.

I think so.

<span class="indent1">

Try that:

    <span class="indent1" style="text-align:left;">

Regards,

Alberto

[David Gifford]

Hi Alberto

Thanks, but that didn't seem to work. I also tried adding the text-align: left to the indent1 stylesheet.

I have uploaded the file here for you or anyone who wants to try to check what I am doing wrong:

recursos.giffmex.org/filemon.html

Dave

[David Gifford]

See specifically http://recursos.giffmex.org/filemon.html#Cuerpo%20de%20la%20carta%20%288-22%29

Thanks

Dave

[Alberto Molina]

Hi David,

Catched! It's the button widget that is centered by default. Put the style="text-align:left" inside the button widget, or define a custom button class.

And the problem comes from the second layer of buttons. For instance in "18-19 text"

Best regards,

Alberto

[PMario]

Hi David,

The <button> elemnt is defined to use centered text. So it doesn't inherit "text-align" from it's parentes.
You'd need to modify the .btn-invisible CSS. Which is probably not what you want.

If you open the browsers dev tools and modify it like so, you'll see that it works.

.btn-invisible {
    padding: 0px;
    margin: 0px;
    background: none repeat scroll 0% 0% transparent;
    border: medium none;
    text-align: left;
}

The problem is, it modifies all buttons :/
So your template, that creates the TOC will need something like this

<button class="btn-invisible btn-mytoc" ..>

and a CSS like this should do the job.

.btn-mytoc {
    text-align: left;
}

I didn't test it. So if it doesn't work, ... tell me the link to your TOC template and I'll have an other look.

-mario

[PMario]

Also have a look at: http://tiddlywiki.com/#ButtonWidget:ButtonWidget  and see the class parameter.
-m

[BJ]

Hi David,

In order to get the text to go left but not to flow around the '>' I did this:
in the macro toc-heading()  replace
{{$:/core/images/right-arrow}}$caption$
with
<div  style="float: left;">{{$:/core/images/right-arrow}} </div> <div  style="text-align:left; float:  top;padding-left: 1.0em;" >$caption$</div>
and
{{$:/core/images/down-arrow}}$caption$
with
<div  style="float: left;">{{$:/core/images/down-arrow}} </div> <div  style="text-align:left; float:  top;padding-left: 1.0em;" >$caption$</div>


On a separate note - I see that you are copying the macro toc-heading()  to lots of tiddlers. With v5.13 it is possible to define global macros - you can put the macro into a separate tid and tag it with $:/tags/Macro so that it can be used in all tiddlers.

best of luck

BJ

[David Gifford]

Hi everyone, thank you!

I used Mario's fix which worked great.

BJ, thanks for letting me know about the global macro. I will investigate that. If I put the macro in a tiddler and tag it as you say, do I put {{ macrotiddlername }} at the top of the tiddlers where I want it to work? Or don't I have to do anything?

[BJ]

you don't need to add anything - global macro are just 'visible' from all tids
BJ

[David Gifford]

Ok, but it is not working for me, so I must be doing something wrong.

I created a tiddler myTOC, tagged it as you said, inserted the code through end, and saved and refreshed.

My main TOC tiddler has the following, but appears blank in view mode

<div class="tw-table-of-contents">

<<toc-heading "''Dentro del libro''" "
@@.indent0 //El contenido  y las características que encontramos en el libro//@@

*[[Sinopsis]]
*[[La estructura del libro]]
*[[Los temas y la teología del libro]] - el mensaje que el autor usó para motivar a sus lectores
*[[Los aspectos literarios del libro]]
*[[Las conexiones del libro con el canon bíblico]]
">>
<<toc-heading "''Detrás del libro''" body="
@@.indent0 //La situación que provocó la composición de este libro//@@

*[[La situación del autor]]
*[[La situación de los destinatarios]]
*[[La respuesta que el autor deseaba de sus destinatarios]]
*[[Acerca de la autoría del libro]]
*[[La fecha y el lugar de la composición del libro]]
">>
<<toc-heading "''Después del libro''" "
@@.indent0 //El uso y estudio del libro desde su composición hasta hoy//@@

*[[La transmisión del texto griego]]
*[[La unidad o integridad del libro]]
*[[La historia de la interpretación del libro]]
*[[El uso del libro en la vida y en el ministerio]]
">>
<<toc-heading "''Exégesis de textos''" "
*[[Introducción (1-3)]]
*[[Acción de gracias (4-7)]]
*[[Cuerpo de la carta (8-22)]]
*[[Conclusión (23-25)]]
">>
<<toc-heading "''Instrucciones y ayudas adicionales''" "
*[[Instrucciones]]
*[[Glosario]]
*[[Bibliografía de fuentes consultadas]]
*[[Todas las listas]]
*[[Todos los recursos adicionales]]
">>

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/mdsWvbs37Dw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

--
David Gifford
Christian Reformed World Missions, Mexico City

[Jeremy Ruston]

I created a tiddler myTOC, tagged it as you said, inserted the code through end, and saved and refreshed.

It could be the outstanding bug where the terminating '\end' of the macro definition must be followed by a newline.

Best wishes

Jeremy

 

--
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 http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

--
Jeremy Ruston
mailto:jeremy...@gmail.com

[BJ]

I try it this:

\define toc-heading(caption,body)
<$reveal type="nomatch" state=<<qualify "$:/state/toc/$caption$">> text="show">
<$button set=<<qualify "$:/state/toc/$caption$">> setTo="show" class="btn-invisible">{{$:/core/images/right-arrow}} $caption$
</$button>
</$reveal>
<$reveal type="match" state=<<qualify "$:/state/toc/$caption$">> text="show">
<$button set=<<qualify "$:/state/toc/$caption$">> setTo="hide" class="btn-invisible">{{$:/core/images/down-arrow}} $caption$
</$button>
</$reveal>
<$reveal type="match" state=<<qualify "$:/state/toc/$caption$">> text="show" retain="yes" animate="yes">

$body$

</$reveal>
\end

on your  http://recursos.giffmex.org/filemon.html tw and it works. - One gotcha is that there needs to be a final blank line after the \end

cheers

BJ

[David Gifford]

Thanks Jeremy and BJ, the missing newline was the culprit. No more bothering you guys today!