CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-tocify-js
nomen
nomen

Reputation: 3715

Formatting unordered list so it doesn't indent like a paragraph

I am using the jQuery.tocify.js javascript plugin to programmatically generate a table of contents. I am having a bit of a problem, though. The way the plugin operates, it pulls every h1, h2, h3, etc. tag and makes a nested list, while respecting depth.

The problem I'm having is that if I have an h2 with a long string, the formatting in the table of contents comes out "wrong". In particular, the first line of the list item is nested, but the content flows like a paragraph:

The Top Level Heading

A Secondary Heading With

a Long Title

Another Secondary Heading

Sorry for the bad approximation, but I hope it gets what I'm seeing across.

Is there any way to set list items to indent the entire secondary heading to the same depth, so that it comes out (approximately) as:

The Top Level Heading

A Secondary Heading With

a Long Title

Here is an example of the generated table of contents (with a long name):

<ul id="tocify-header7" class="tocify-header nav nav-list">
  <li class="tocify-item active" data-unique="the-fifth-(and-successful)-try" style="cursor: pointer;"><a>The Fifth (and Successful) Try</a></li></ul>

It looks like nav and nav-list are supposed to come from Bootstrap, but I'm not sure Bootstrap3 even has a nav-list class anymore.

Edit: Yup, it looks like the plugin is incompatible with Bootstrap 3. I suppose I will shop around for a different plugin.

Upvotes: 0

Views: 150

Answers (1)

ndm13
ndm13

Reputation: 1239

You should display the anchors as blocks and set a max width to them. This should force them to loop around at the close but keep it all at the same indentation.

Upvotes: 0

Related Questions