How to center align gantt diagram

[tylerlong]

div.mermaid {
  text-align: center;
}

I use the css code above to center align flowcharts and sequence diagrams and it works.

But it doesn't work for gantt diagrams. I investigate for hours and still don't get it.

Any help or hint is appreciated!

By the way, here is an online demo: http://mdp.tylingsoft.com/ scroll to the bottom and you will see the diagrams.

[knsv]

That looks very capable editor!!!

The gantt chart sets its width to 100%. Looking closely in your demo i notice a margin to the right of the diagram. Maybe that could be the problem that make them look slightly of in the centering?

Knut Sveidqvist
Sent with Sparrow (http://www.sparrowmailapp.com/?sig)

On Friday 3 April 2015 at 08:39, Tyler Long wrote:

div.mermaid { text-align: center; }

I use the css code above to center align flowcharts and sequence diagrams and it works.
But it doesn't work for gantt diagrams. I investigate for hours and still don't get it.
Any help or hint is appreciate!
By the way, here is an online demo: http://mdp.tylingsoft.com/ scroll to the bottom and you will see the diagrams.

—
Reply to this email directly or view it on GitHub (#150).

[tylerlong]

That looks very capable editor!!!

Thank you! It's based on lots of open source projects such as mermaid. And itself is open source too.

The gantt chart sets its width to 100%

It seems not. Please make your browser as wide as possible. And you will notice that gantt diagram is left-aligned and its width is not 100%.

Here is a screenshot:

So I think there is something wrong with the width of the gantt diagram and it doesn't take 100% of the web page's width.

[knsv]

I have some issues seeing the problem. (That’s why I am grasping a bit) :)

If I make by browser 2500px width on my test page for barn charts they render nicely to that with. And for me at least the same thing is true in markdown plus.

However if I resize the editor, (make it wider), in markdown plus after the initial rendering, then I can see small diagrams that are left aligned. And in this case the sag is set to 100%. The rendered svg though was created for a smaller with and does not occupy the new size but a small part.

This could be fix this by setting the width of the chart in pixels instead of 100% in the svg style, could be a bit tricky or have to wait for next mermaid release. Another thing would be to re-render the diagram.

Does this make sense? Does this description also match what you see?

Knut Sveidqvist
Sent with Sparrow (http://www.sparrowmailapp.com/?sig)

On Friday 3 April 2015 at 09:23, Knut Sveidqvist wrote:

That looks very capable editor!!!

The gantt chart sets its width to 100%. Looking closely in your demo i notice a margin to the right of the diagram. Maybe that could be the problem that make them look slightly of in the centering?

Knut Sveidqvist
Sent with Sparrow (http://www.sparrowmailapp.com/?sig)

On Friday 3 April 2015 at 08:39, Tyler Long wrote:

div.mermaid { text-align: center; }

I use the css code above to center align flowcharts and sequence diagrams and it works.
But it doesn't work for gantt diagrams. I investigate for hours and still don't get it.
Any help or hint is appreciate!
By the way, here is an online demo: http://mdp.tylingsoft.com/ scroll to the bottom and you will see the diagrams.

—
Reply to this email directly or view it on GitHub (#150).

[tylerlong]

First of all, thank you for your hard work! When I have more spare time I will try to become a contributor to mermaid.

Makes sense! when the page width changes, the gantt diagram doesn't re-render!

For example: first I make the page width 500px, then render the gantt diagram(it takes 100% of the width so it is also 500px). after that I make my browser 1000px wide, but the diagram is still 500px. That's why it seems like left-aligned.

Here are two questions:

1. svg is vector image, it should be fully responsive. I think there should be a way to let it auto scale with the page width. Just like to make an image alwasy take 100% of the page width no matter how you resize the page.
2. even it is not re-rendered, why doesn't it respect the css rule: text-align: center;

You don't have to answer the questions above, I might be able to figure them out myself.

And at least I have a solution(workaround) to fix the issue in Markdown Plus. I can monior page size changes and re-render gantt diagram.

Thank you!

[tylerlong]

Updates:

1. <svg> is always 100%. that's why text-align: center doesn't work.
2. the internal elements of <svg> don't auto-scale, and it gives me a illusion that <svg> doesn't scale

The solution to <svg> internal elements auto scale is here: http://stackoverflow.com/questions/9381784/autoscaling-an-svg-embedded-in-html-on-window-resize

But there is another issue: it seems that the height of gantt diagram is fixed and it shouldn't scale at all. In another word: we only want gantt diagram to scale horizontally.

[knsv]

@tylerlong, thanks for the inputs on autoscaling! I have applied that for gantt diagrams. You might also be interested in the render method that takes a mermaid diagram definition and returns a svg. (This is not released yet though and still to be considered experimental).

[knsv]

A fix for this has been released in version 0.5.0

[fritx]

text-align:center doesn't work.
Try flexbox, it works:

code.language-mermaid { display: flex !important; justify-content: center }

[vi66ko]

div.mermaid {
  text-align: center;
}

I use the css code above to center align flowcharts and sequence diagrams and it works.

But it doesn't work for gantt diagrams. I investigate for hours and still don't get it.

Any help or hint is appreciated!

By the way, here is an online demo: http://mdp.tylingsoft.com/ scroll to the bottom and you will see the diagrams.

Do NOT open the link.
Can you please remove the link from your post as it now is a malicious link.