Search code examples
javascriptjqueryhtmlcssjqtree

jQtree positioning issue in electron app

I am trying to use jqtree in an Electron application. I have been able to get it to do everything I need it to do. However, I am running into a problem with positioning it on the window.

My index.html file looks like this:

<body>
    <div id="container">
        <div id="authors">
            <ul id="authlist"></ul>
        </div>
        <div id="stree"></div>
        <div id="clear"></div>
    </div>
    <div id="main-area"></div>
</body>

And the relevant CSS is:

#container {
    display: inline-block;
    width: 610px;
    margin: auto;
    border: 10px solid orange''
}
#authors {
    float: left;
    width: 200px;
    border-style: solid;
}
#stree {
    width: 400px;
    margin-left: 210px;
    border-style: solid;
}
#clear {
    clear: both;
}

stree is the div holding the jqtree.

When I populate it I get the following:

enter image description here

What I want is to have the top element of the tree aligned with the first element of the list.

I have tried setting vertical-align on the container and on the stree divs but haven't had any luck yet.

HTML/CSS is not my primary area of expertise so I am probably doing something stupid here. But I would appreciate any help I can get.

Solution

  • I tried the following css:

    #container {
    width: 612px;
    margin: auto;
    border: 10px solid orange;
}
#authors {
    float: left;
    width: 200px;
    border-style: solid;
}
#stree {
    float: left;
    width: 400px;
    border-style: solid;
}
#clear {
    clear: both;
}

    It seems to work. It positions the tree next to the authors div.