How ca i make the tree really big?

[Peter Pan]

Hello Ivan,

now i have get jsTree running really good. But because jstree should running on smartphones, i want the single branches really fat. So fat like a thumb. I have tried to resize the '40px.png', but this had not worked. I have tried this:

.jstree-leaf {
    font-size: 30px;
    height: 40px;
    line-height: 50px;
}

.jstree-leaf a.jstree-hovered {
    font-size: 30px;
    height: 40px;
    line-height: 50px;
}

.jstree-leaf a.jstree-clicked {
    font-size: 30px;
    height: 40px;
    line-height: 50px;
}

.jstree-closed {
    font-size: 30px;
    height: 40px;
    line-height: 50px;
}

.jstree-open {
    font-size: 30px;
    height: 40px;
    line-height: 50px;
}

But this has also not worked. How can i make the single branch, for example, 100 px height?

Must i create a own css? I know how install a custome theme, but i did not know, which single rules i must change for this.

Can you help me?

With friendly regards

  Tinkerpete

[Ivan Bozhanov]

First of all - you have a "mobile" theme (which is a proof of concept, but works) - make your screen small and make sure themes.responsive is set to true and you will see it.
To make any other theme - just take a look at the default theme style.less - it has all you need, you just need to provide it with the base icon dimensions (try 64 for example) and create a sprite with the icons that is that big - that is all - just examine the LESS file and you will see something like:
.jstree-default-large {
    .jstree-theme(32px, "32px.png", 32px);
    &.jstree-rtl .jstree-node { background-image:url("data:image/png;base64,i..."); }
    &.jstree-rtl .jstree-last { background:transparent; }
}

Just add (I removed the right to left support for this theme variant for readability):
.jstree-default-large {
    .jstree-theme(64px, "64px.png", 64px);
}

Take 32px.png make it double in size and that is it (just set themes.variant to xlarge)

Best regards,
Ivan

[Peter Pan]

I could not find a file 'style.less' In the actual distribution?

[Ivan Bozhanov]

https://github.com/vakata/jstree/blob/master/src/themes/default/style.less

[Peter Pan]

Yes, i know about the file is on 'github'. Did it work, when i use this file 'style.less' from github and copy it into the default theme directory? Or must i copy the complete 'github' files for working this?

And then, i use the 'responsive'-design!

How must i change your orders/suggestions for responsive design?

Am Mittwoch, 4. Juni 2014 16:30:22 UTC+2 schrieb Peter Pan:

[Ivan Bozhanov]

First of all - try the built in mobile theme - if that does not suit your needs - modify as necessary.
To modify - just use the .less file - add a new theme variant and "compile" the .less file to a .css file - to do that use a less compiler, or simply - the build procedure of jstree (which uses grunt).

Best regards,
Ivan

[Peter Pan]

Could it be, that in the file 'base.less' an error is?

Look at 'base.less' at line 52:

.vakata-context-separator > {
a, a:hover { background:white; border:0; border-top:1px solid #e2e3e3; height:1px; min-height:1px; max-height:1px; padding:0; margin:0 0 0 2.4em; border-left:1px solid #e0e0e0; -moz-text-shadow:0 0 0 transparent; -webkit-text-shadow:0 0 0 transparent; text-shadow:0 0 0 transparent; -moz-box-shadow:0 0 0 transparent; -webkit-box-shadow:0 0 0 transparent; box-shadow:0 0 0 transparent; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; }
}

The 'greater'-sign after .vakata-context-separator is it.

 

Am Mittwoch, 4. Juni 2014 16:30:22 UTC+2 schrieb Peter Pan:

[Ivan Bozhanov]

No this is valid .less ... Read up on less - I am not a big fan of CSS compilers too, but it did save me a lot of work.

Best regards,
Ivan

[Peter Pan]

Ok. I use Eclipse with this plugin:

http://www.normalesup.org/~simonet/soft/ow/eclipse-less.fr.html

And the plugin marked the position as not valid with a red sign on the side. :-)

Am Mittwoch, 4. Juni 2014 16:30:22 UTC+2 schrieb Peter Pan:

[Ivan Bozhanov]

Well, obviously the tree works and the themes compile properly :) If this bothers you move the > sign on the next line (before a and a:hover):
    .vakata-context-separator {
        > a, > a:hover { ...

Best regards,
Ivan

[Peter Pan]

'Just add...'

Hi Ivan,

this is only true, whe you have your knowledge! Now it works, but it cost me a full day for changing and realizing it, because i must learn what is 'less', install a less compiler, the eclipse plugin and after that, i must find the positions in 'style.css', in which i have made changes in the last weeks and modify the 'style.less' according to.

Thank you for your help!

  Tinkerpete

[Ivan Bozhanov]

Hi,

I am not sure I am reading you correctly - you are trying to customize a control to do something that it was not meant to do - so of course you'd need to modify it and know the tools (JS, CSS, etc). I cannot do the work for you, although I try to help with code, I just assume that if someone wants to customize something they will be able to handle it with less help and just a few pointers (or otherwise they would rely on the built-in functionality).

A day is a small price to pay, I will not go around the forum to find previous topics you have posted, but rest assured - it probably took me "a full day" to talk to you personally on your problems and help you debug. Multiply that by every member of the forum, now add the time I spent (since 2007) developing this plugin ... it is more than a few days (to put it mildly) that I spent so that you can use this control for free and get support on this forum (for free).

I am not sure you realize the amount of work required to get to the point that you need to spend only "a full day" to integrate this. I am not saying jstree is something extraordinary or that I offer great support, but I do take a few days each week (that I could spend with my family), just so that you can use this control. If you do not like it - simply do not use it, this is about as much as I can do, please do not waste my time with your ungratefulness, it is better spent with the other people needing help in this forum.

Regards,
Ivan

[Peter Pan]

Hello Ivan ,

sorry , I did not want to hurt you . I can very well imagine how much work goes into jsTree ! I myself have developed several tools and partly provided free of charge . Also I keep getting inquiries about my tool that I will answer for free . And I have also a family ...

jsTree is a fine tool !

But if you have to complete a job in a company and your boss after days of hard work is behind you and you 're still not ready even though they have been around long hinbekommen with a ' TreeView ' from vb.net , then you 're getting nervous .

I thank you also very much for your help , I know that it will cost you time . But that's just the point , either I ask you or I give up because I can not do it with my average knowledge of HTML5 , CSS3 , JQuery , JavaScript and mySQL .

In the application that I have built to date with the techniques mentioned , I have - despite my lack of knowledge - get everything implemented relatively quickly. Only for the integration of jsTree I have very much time and even though I 've already built a 1993 interactive tree editors !

As written , There is nothing against you ! I appreciate your work very much and I think you 're a great developer / programmer !

With upright Respectfully,

  Tinker Pete

[Peter Pan]

>I am not sure I am reading you correctly - you are trying to customize a control to do something that it was not meant to do

You write, that I want to do things with jsTree, for what it is not build? I do not understand.

jsTree is a tool for the integration of tree views in HTML pages, right? But if I use HTML and CSS, so I want to take advantage of the great freedom in design that allows me such methods! Then, what is wrong with wanting to adapt the treeview flexible in design like size and stylish lines?

Today, all the GUIs must look good.

[Ivan Bozhanov]

I must have misunderstood you then - my apologies.
Your struggles only point me in the direction of something I already know - the documentation is not great (to put it mildly). Unfortunately I am not very good at documenting, something I try to make up for in this forum, but I know that is not enough.
Soon I will block any feature requests and focus on rewriting the docs, and hope for a better result (I recently read a lot of fine pieces on docs, so I think I know what to change).
Unfortunately, I doubt building custom themes will be on the priority list, but I will definitely put that in too. Once again - sorry you struggled with integration.

Best regards,
Ivan

[Ivan Bozhanov]

I guess the real problem here was the less usage, right? As I said - I am not a big fan of code that generates code too, but it really saves me a lot of time. Tweaking the theme does not have to be hard, but it will take some time. To be honest, what you should have done is probably:

1) add these lines inside themes/default/style.less:
.jstree-default-xlarge { .jstree-theme(64px, "64px.png", 64px); }

2) Take the 32px sprite (themes/default/), double its size and replace the icons you want to replace, save it as 64px.png

3) Compile the less file

4) Then in your tree config add:
core : {
  themes : {
    variant : "xlarge"

Those 4 steps would probably take no more than 5 minutes, the bad thing is you had to learn what LESS is in the process. Don't get me wrong - you could have gone with a simple CSS file (based on style.css), but it would have required a lot of calculations and trial and error.

Build systems are a big part of today's web development, whether we like it or not. jstree uses grunt, so instead to compile the LESS files you could have done this:
1) install node.js
2) install grunt
3) invoke the "grunt install" command inside the jstree project folder (that you downloaded)
4) make the changes outlined above
5) run "grunt" inside the jstree project folder

Again - not ideal if you do not already have nodejs and grunt, I was reluctant to install such components too, but in time they proved to be invaluable. I did not propose this approach because it would have probably cost you more time to understand what grunt is, than what less is (I assumed you are not using grunt, because if you were, then we wouldn't have had this discussion).

Anyway - once again sorry for your struggles - I will do my best with the docs when I get the chance.

Best regards,
Ivan

[Peter Pan]

Hello Ivan,

thank you again, but i have it running. I have all understand, just the time for understanding was not 'just add...' ! :-)

Your documentation is ok - for every single element. But i had needed a good overall context. Then, it could be, that my bad englisch is a problem.

Now, i could very faster realize a jsTree app. You are right, when all is correct understand, it must not during long, for realize nice jsTree features.

But you must have a good understanding from a lot of methods:

- Ajax
- JSon,
- HTML5
- CSS
- JavaScript
- LESS

I know a little bit about all (LESS since yesterday) of it, but i'm not a expert for every single technique. And i think, there are not much developers out in the world, which are experts about every technique.

You're a fine guy, keeping you your motivation!

  Tinkerpete

And a new question: How can i make the signs for drag and drop bigger?