CODEWITHSUNDEEP
javascriptjqueryhtmlcssjstree
jones
jones

Reputation: 1453

How to assign width for <li> tag in jstree

I am new to jstree, and i have integrated it in my project. below is my code.

<div id="leaf" style"width:50px">
    <ul>
        <li>This is the first jstree leaf for testing</li> 
        <li>this is the second jstree leaf</li>
        <li>this is third</li>
    </ul>
</div>

I want the li's not to overlap each other, because my div width is 50px only, i know it is the CSS work, but i cant find the class.

Upvotes: 0

Views: 710

Answers (3)

ianaya89
ianaya89

Reputation: 4233

I think the classname you are looking for is jstree-leaf. You could try increasing the width of that class:

.jstree-leaf {
  width: 100px;
}

jstree code view

Also note that you are missing and = in the style attribute of your leaf <div>:

<div id="leaf" style="width:50px">

Upvotes: 0

ganesh
ganesh

Reputation: 228

You can use an inline style which will override external styles if any. Use min-width property, this will adjust your div based on its list items length.

<body>
<div id="leaf" style="min-width:50px">
    <ul>
        <li>This is the first jstree leaf for testing</li> 
        <li>this is the second jstree leaf</li>
       <li>this is third</li>
</ul>
</div>
</body>

Check Jfiddle: http://jsfiddle.net/#&togetherjs=GhIN00JQsr

Upvotes: 2

Sathish
Sathish

Reputation: 2460

this is not a proper way to call css <div id="leaf" style"width:50px"> you missed the = sign you need to change that like <div id="leaf" style="width:50px">

Upvotes: 1

Related Questions