Alignment next line in node

[majos]

Hello! I have a problem with alignment in the next line. Only the first line is well alignment. I wish it was like in the attached picture:

Does anyone have any idea? Thx

[dechimp]

I don't know if there is any setting in jqtt that would fix this for you. I played around with this out of boredom, and I found some CSS styles you can add to try to fix this issue.

table.treetable span.indenter { float: left; /* keeps the indenter arrow at the top left, instead of bottom / } table.treetable span { display: inline-block; / helps keep text from wrapping around elements / width: 90%; / a width needs to be set, or else the inline-block will be too big to fit with the indenter arrow / background-position: top left; / keeps the icon at the top left as well */ }

Here's a screenshot of me getting this to work:

On Fri, May 30, 2014 at 12:14 AM, majos notifications@github.com wrote:

Hello! I have a problem with alignment in the next line. Only the first line is well alignment. I wish it was like in the attached picture: [image: treetable] https://cloud.githubusercontent.com/assets/7744522/3127946/dfa2979a-e7c9-11e3-98b2-88dd54a3c4ff.png

Does anyone have any idea? Thx

Reply to this email directly or view it on GitHub https://github.com/ludo/jquery-treetable/issues/142.

[dechimp]

If the screenshot didn't work, try this: http://dechimp.github.io/images/foo.png

On Fri, May 30, 2014 at 11:37 PM, Richard Manriquez dechimp@gmail.com wrote:

I don't know if there is any setting in jqtt that would fix this for you. I played around with this out of boredom, and I found some CSS styles you can add to try to fix this issue.

table.treetable span.indenter { float: left; /* keeps the indenter arrow at the top left, instead of bottom / } table.treetable span { display: inline-block; / helps keep text from wrapping around elements / width: 90%; / a width needs to be set, or else the inline-block will be too big to fit with the indenter arrow / background-position: top left; / keeps the icon at the top left as well */ }

Here's a screenshot of me getting this to work:

On Fri, May 30, 2014 at 12:14 AM, majos notifications@github.com wrote:

Hello! I have a problem with alignment in the next line. Only the first line is well alignment. I wish it was like in the attached picture: [image: treetable] https://cloud.githubusercontent.com/assets/7744522/3127946/dfa2979a-e7c9-11e3-98b2-88dd54a3c4ff.png

Does anyone have any idea? Thx

Reply to this email directly or view it on GitHub https://github.com/ludo/jquery-treetable/issues/142.

[ludo]

I like @dechimp's solution.

[majos]

Thank for your answer. This fix doesn't work in the original release. Should I remove any other lines or edit in css files?

[ludo]

Apparently solution does not work. @dechimp do you have any clues why not? Are there other CSS rules required not mentioned in your comment?

[dechimp]

Major apologies to everyone. This was a solution for a different but similar project, which I confused.

I tried again on the correct project (hopefully), but I could not find a CSS-only solution, but I found something that worked for me.

The text content inside each should be its own element, and here I use . So the content should look like:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at diam porttitor, facilisis elit eu, consequat velit. Phasellus mattis odio eget eros semper tincidunt. Sed rhoncus bibendum augue, ut sagittis nulla bibendum quis. Cras cursus quis nibh in cursus. Cras consectetur vel ligula et elementum. Integer ultricies magna sed consectetur laoreet. Integer rutrum mauris id nulla convallis commodo. Vestibulum eget velit vulputate, pulvinar magna non, sagittis est. Vestibulum posuere I live in the second column.

Then the following CSS should work. Let me know if any issues.

    <style>
    table.treetable span.indenter {
      float: left;
    }
    table.treetable span.content {
      display: inline-block;  /* helps keep text from wrapping around

elements / width: 90%; / a width needs to be set, or else the inline-block will be too big to fit with the indenter arr padding-left: 0; /* a width needs to be set, or else the inline-block will be too big to fit with the indente }

On Mon, Jun 2, 2014 at 5:46 AM, Ludo van den Boom notifications@github.com wrote:

Reopened #142 https://github.com/ludo/jquery-treetable/issues/142.

Reply to this email directly or view it on GitHub https://github.com/ludo/jquery-treetable/issues/142#event-127005723.

[dechimp]

Here's a new screenshot https://dl.dropboxusercontent.com/u/27500327/static/indent.png

On Mon, Jun 2, 2014 at 11:08 AM, Richard Manriquez dechimp@gmail.com wrote:

Major apologies to everyone. This was a solution for a different but similar project, which I confused.

I tried again on the correct project (hopefully), but I could not find a CSS-only solution, but I found something that worked for me.

The text content inside each should be its own element, and here I use . So the content should look like:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at diam porttitor, facilisis elit eu, consequat velit. Phasellus mattis odio eget eros semper tincidunt. Sed rhoncus bibendum augue, ut sagittis nulla bibendum quis. Cras cursus quis nibh in cursus. Cras consectetur vel ligula et elementum. Integer ultricies magna sed consectetur laoreet. Integer rutrum mauris id nulla convallis commodo. Vestibulum eget velit vulputate, pulvinar magna non, sagittis est. Vestibulum posuere I live in the second column.

Then the following CSS should work. Let me know if any issues.

    <style>
    table.treetable span.indenter {
      float: left;
    }
    table.treetable span.content {
      display: inline-block;  /* helps keep text from wrapping around

elements / width: 90%; / a width needs to be set, or else the inline-block will be too big to fit with the indenter arr padding-left: 0; /* a width needs to be set, or else the inline-block will be too big to fit with the indente }

On Mon, Jun 2, 2014 at 5:46 AM, Ludo van den Boom < notifications@github.com> wrote:

Reopened #142 https://github.com/ludo/jquery-treetable/issues/142.

Reply to this email directly or view it on GitHub https://github.com/ludo/jquery-treetable/issues/142#event-127005723.

[majos]

Thank you for your help. It partially solves the problem. See the attachment. I'll try to rewrite it yet. Maybe I'll find the same solution. If so, I'll write here.

[dechimp]

I had set at absolute width in that example, causing things to break at deeper levels.

Please try this CSS code and let me know if it works:

    <style>
    table.treetable span.indenter {
      float: left;
    }
    table.treetable span.content {
      display: block;
      padding-left: 0;
      overflow: hidden;
    }
   </style>

On Mon, Jun 2, 2014 at 12:09 PM, majos notifications@github.com wrote:

Thank you for your help. It partially solves the problem. See the attachment. I'll try to rewrite it yet. Maybe I'll find the same solution. If so, I'll write here. [image: treetable] https://cloud.githubusercontent.com/assets/7744522/3152033/59ada1ee-ea89-11e3-9c46-9ce830bad482.png

Reply to this email directly or view it on GitHub https://github.com/ludo/jquery-treetable/issues/142#issuecomment-44878130 .

[majos]

is better, but still not good. is:

should be:

[majos]

I remove margin and padding: table.treetable span.indenter { display: inline-block; /margin: 0;/ out /padding: 0;/ out text-align: right;

in jquery.treetable.css

and now it seems that it works. Im testing.

[dechimp]

Good you found a solution.  I just didn't want to dive into JS because it's not my thing. — Sent from Mailbox

On Tue, Jun 3, 2014 at 1:05 AM, majos notifications@github.com wrote:

I remove margin and padding: table.treetable span.indenter { display: inline-block; /margin: 0;/ out /padding: 0;/ out text-align: right; in jquery.treetable.css and now it seems that it works. Im testing.

Reply to this email directly or view it on GitHub: https://github.com/ludo/jquery-treetable/issues/142#issuecomment-44930853