Scroll issue in Org chart

Hi,
We are using org chart of go js. We are facing the issue while zooming the chart. When user increasing the zoom then the scroll is not coming properly and also not able to scroll by mouse because the chart overlapping on scroll. Please see image for detail.

That’s odd, how did you set up your Diagram div?

Hi,
Below are the structure of div which I am using,

Css class which I am using on div.

.org-chart-area {
width: 100%;
float: left;
background: #fafafa;
text-align: center;
height: 500px;
position: relative;
overflow: auto;
vertical-align:central;

}

.org-chart-container {
display: inline-block;
margin: 10px;
width: 80%;
height: 500px;
text-align:center;
}

.gojs-canvas {
background-color: white;
border: solid 1px #e0e0e0;
overflow:hidden;
width: 100%;
height: 100%;
}

Thanks.

Your middle div is larger than your outer div, and you have overflow set to auto. You may want to reconsider these in order to make the middle div fit into the outermost div.

Try:
.org-chart-area { width: 100%; float: left; background: #fafafa; text-align: center; height: 500px; position: relative; /*overflow: auto;*/ vertical-align:central;

}

.org-chart-container {
display: inline-block;
/margin: 10px;/
width: 80%;
height: 500px;
text-align:center;
}

.gojs-canvas {
background-color: white;
border: solid 1px #e0e0e0;
overflow:hidden;
width: 100%;
height: 100%;
}

Thanks for reply…
I made these change the issue is still there.

I want to clear one thing we need the scroll in outer div also, because we have some functionality for that we need to change the page size for printing the chart at different size.

Please suggest any other way.

Thanks…

I am sharing the code how I am doing the zoomIn/Out,
Below are the property for Zoomin and Zoom out provided by GoJs.
myDiagram.commandHandler.increaseZoom();
myDiagram.commandHandler.decreaseZoom();

These property I am using on click of Zoom In and Zoom out.

Thanks.

we need to change the page size for printing the chart at different size

It may be better to use myDiagram.makeImage and .makeSVG to create separate pages when you want to print. The options to makeImage and makeSVG allow you to set scale or total size of the resulting output.

http://gojs.net/latest/intro/makingImages.html

http://gojs.net/latest/intro/makingSVG.html

We are still getting same issue after changes the required which you suggest. This is coming while user doing zoom in and zoom out. Please let us know if any other alternative. Can we set the scroll in canvas itself? Because go js is creating two div dynamically for scroll bars, one for Horizontal and other for Vertical. Horizontal scroll bar coming whenever canvas’s width increased after Zoom but vertical scroll bar is not coming.

I suggest you simplify your HTML to be certain that it is a GoJS problem and not an HTML issue.

For instance, if you put all your code into a simple sample like minimal.html, does it work then?

Hi,
Yes I put all the code in Sample div. I am posting html also, there may be some issue in html or css. Please below code,

    <!--new nav ends-->


    <div class="palette-section">
        <h2><b>Palette</b><span class="arrow palette-hide mirror"></span></h2>
        <h2 style="display: none;"><span class="arrow palette-show"></span>
            <%--  <img src="../../images/OrgChartGojs/palette-show.png" />--%>
        </h2>
        <div class="leftpanel leftpanel-canvas">
            <div id="myPalette" class="gojs-canvas-pallete"></div>

        </div>
        <img id="img-palatte" src="../../../../../images/OrgChartGojs/palette-show.png" alt=""/>
    </div>
    <div id="canvas-box">

        <div class="box-chart">

            <div class="org-chart-area outer-frame samplechart">
                <div id="sub-div" class="sm-sub-div">
                    <ul class="ul-content">
                        <li> Incident Name<br />
                            <span class="incident-name-data"><%= IncidentName %></span></li>
                        <li> Prepared By (Name): <span class="prepared-by-data">Site Admin</span><br>
                            Date: <span  class="modified-date-data"><%= IncidentModifiedDate %></span></li>
                        <li class="incidentName">Incident Briefing<br />
                            <span class="icsOrgChart incident-briefing-data">ICS 201 - 3 Current Org</span></li>
                    </ul>
                    <b><div id="sample" class="org-chart-container clearfix"></b>




INCIDENT BRIEFING

ICS 201-CG (pg 3 of 4) (Rev 4/04)



            <!-- color palette html start -->
            <div class="overlay colorpickeroverlay" onclick="closeOverlay();">
            </div>
            <div class="colorpicker" style="display: none">

                <canvas id="picker" var="1" width="300" height="300"></canvas>
                <div class="controls">
                    <%--  <h2><a class="close">X</a></h2>  <br />--%>
                    <div>
                        <label>R</label>
                        <input type="text" id="rVal" readonly="readonly" />
                    </div>
                    <div>
                        <label>G</label>
                        <input type="text" id="gVal" readonly="readonly" />
                    </div>
                    <div>
                        <label>B</label>
                        <input type="text" id="bVal" readonly="readonly" />
                    </div>
                    <div>
                        <label>RGB</label>
                        <input type="text" id="rgbVal" readonly="readonly" />
                    </div>
                    <div>
                        <label>HEX</label>
                        <input type="text" id="hexVal" readonly="readonly" />
                    </div>
                </div>
            </div>
            <!-- color palette html ends -->
        </div>         

        <ul id="contextMenu" style="display: none;" class="box-right-click">
            <li class="add-unit"><a href="#" onclick="cxcommand('addMember')">Add Unit Member</a></li>
            <li class="edit-unit disable"><a href="#" onclick="cxcommand('editMember')">Edit Unit Member</a></li>
            <li class="delete-unit disable"><a href="#" onclick="cxcommand('deleteMember')">Delete Unit Member</a></li>
            <li class="hide-node border-top"><a href="#" onclick="cxcommand('hideNode')">Hide Node</a></li>
            <li class="collapse disable border-top"><a href="#" onclick="cxcommand('collapseChildNodes')">Collapse Child Nodes</a></li>
            <li class="expand disable"><a href="#" onclick="cxcommand('expandChildNodes')">Expand Child Nodes</a></li>
            <li class="shift-left disable border-top"><a href="#" onclick="cxcommand('shiftLeft')">Shift Left</a></li>
            <li class="shift-right disable"><a href="#" onclick="cxcommand('shiftRight')">Shift Right</a></li>
            <li class="select-color border-top"><a href="#" onclick="cxcommand('selectColor')">Select Color</a></li>
            <li class="weaklink border-top weaklink-From"><a href="#" onclick="cxcommand('WeakLinkFrom')">Weaklink From</a></li>
            <li class="weaklink weaklink-To disable"><a href="#" onclick="cxcommand('WeakLinkTo')">Weaklink To</a></li>
            <li class="weaklink weaklink-Cancel disable"><a href="#" onclick="cxcommand('WeakLinkCancel')">Weaklink Cancel</a></li>
            <%--<li class="print-node"><a href="#" onclick="cxcommand('printnodes')">Print From Here</a></li>--%>
        </ul>

        <span class="color-box" style="display: none;">
            <a href="#" class="section" command-section="Section" data-level="0">S</a>
            <a href="#" class="branch" command-section="Branch" data-level="1">B</a>
            <a href="#" class="division" command-section="Division" data-level="2">D</a>
            <a href="#" class="group" command-section="Group" data-level="3">G</a>
            <a href="#" class="taskforce" command-section="TaskForce" data-level="4">F</a>
            <a href="#" class="team" command-section="Team" data-level="5">T</a>
            <a href="#" class="custom" command-section="Custom" data-level="6">C</a>
        </span>


        <div class="overlay addeditmemberoverlay"></div>
        <div class="edit-member edit-pop-up">
            <form>
                <h2>Edit Member<a href="#" class="close">X</a></h2>
                <span class="edit-mem-form">

                    <span>
                        <span>
                            <label>Name:<%--<i style="width: 5px;" class="required">*</i>--%></label><input type="text" class="edit-name" maxlength="100" id="txteditname" /><a onclick="ShowResourceListPopup(null,'Personnel','EditMembers');" class="person-list"><img src="../../images/OrgChartGojs/add99.png" alt="" /></a></span>
                        <span class="editIconadd99">
                            <label>Title:</label><input type="text" class="edit-title" maxlength="100" id="txteditTitle" /><a onclick="ShowResourceListPopup(null,'Roles','EditMembers');" class="person-list editIconadd99"><img src="../../images/OrgChartGojs/add99.png" alt="" /></a></span>
                        <span>
                            <label>Contact:</label><input type="text" class="edit-contact" maxlength="50" /><img src="../../images/OrgChartGojs/call6.png" alt="" /></span>
                        <span class="additional">
                            <label>Additional Contact Info:</label><input maxlength="50" type="text" class="edit-additionalcontact" /><img src="../../images/OrgChartGojs/call6.png" alt="" /></span>
                    </span>
                </span>
                <div class="submit-form">
                    <input type="button" value="Cancel" class="edit-cancel" />
                    <input type="button" value="Submit" class="edit-member-submit" />
                </div>
            </form>
        </div>
        <!-- edit members ends -->

        <!-- add members start -->
        <%-- <div class="overlay"></div>--%>
        <div class="add-member add-member-pop-up">
            <form>
                <h2>Add Members<a class="close">X</a></h2>

                <span class="add-btn">
                    <input type="button" class="add-member-btn" value="+ Add Members" /></span>
                <span class="add-mem-list">
                    <span class="add-mem-form add-mem-initial" id="add-mem-form-1">
                        <span>
                            <label>Name:<%--<i style="width: 5px;" class="required">*</i>--%></label><input maxlength="100" type="text" class="name-text-box" /><a href="#" class="person-list"><img src="../../images/OrgChartGojs/add99.png" alt="" onclick="javascript:ShowResourceListPopup(this,'Personnel','AddMembers');" /></a></span>
                        <span>
                            <label>Title:</label><input maxlength="100" type="text" class="title-text-box" /><a href="#" maxlength="100" class="person-list"><img src="../../images/OrgChartGojs/add99.png" alt="" onclick="javascript:ShowResourceListPopup(this,'Roles','AddMembers');" /></a></span>
                        <span>
                            <label>Contact:</label><input maxlength="50" type="text" class="contact-text-box" /><img src="../../images/OrgChartGojs/call6.png" alt="" /></span>

                        <span class="additional">
                            <label>Additional Contact Info:</label><input maxlength="50" type="text" class="additional-contact-text-box" /><img src="../../images/OrgChartGojs/call6.png" alt="" /></span>
                    </span>
                </span>
                <div class="submit-form">
                    <div class="popup-note">NOTE: Members without any data will not be entered.</div>

                    <input type="button" value="Cancel" class="add-member-cancel" />
                    <input type="button" value="Submit" class="add-member-submit" />
                </div>
            </form>
        </div>

        <!-- add member row template -->
        <div class="add-popup-row-template">
            <span class="add-mem-form add-member-template">
                <span class="add-mem-form">
                    <span>
                        <label>Name:<%--<i style="width: 5px;" class="required">*</i>--%></label><input maxlength="100" type="text" class="name-text-box" /><a href="#" class="person-list"><img src="../../images/OrgChartGojs/add99.png" alt="" onclick="javascript:ShowResourceListPopup(this,'Personnel','AddMembers');" /></a></span>
                    <span>
                        <label>Title:</label><input maxlength="100" type="text" class="title-text-box" /><a href="#" class="person-list"><img src="../../images/OrgChartGojs/add99.png" alt="" onclick="javascript:ShowResourceListPopup(this,'Roles','AddMembers');" /></a></span>
                    <span>
                        <label>Contact:</label><input maxlength="50" type="text" class="contact-text-box" /><img src="../../images/OrgChartGojs/call6.png" alt="" /></span>
                    <span class="additional">
                        <label>Additional Contact Info:</label><input maxlength="50" type="text" class="contact-text-box" /><img src="../../images/OrgChartGojs/call6.png" alt="" /></span>
                </span>
            </span>
        </div>

        <!-- add members ends -->

        <div class="overlay SelectSectionoverlay"></div>
        <div class="add-section" style="display: none">
            <form>
                <h2>Select Section<a class="closesection">X</a></h2>

                <div style="margin-left: 10px;">

                    <span class="add-mem-form" id="Span1">
                        <span>
                            <label>Select section you want to create :</label><asp:DropDownList ID="ddlsectiontitles" ClientIDMode="Static" runat="server" Width="180"></asp:DropDownList></span>
                    </span>

                    <table>
                        <tr>
                            <td style="display: none">
                                <asp:DropDownList ID="ddlsectiontitlecopy" ClientIDMode="Static" runat="server" Width="180"></asp:DropDownList></td>
                        </tr>
                        <tr>
                            <td>&nbsp</td>
                        </tr>
                    </table>
                    <div style="text-align: right; margin-right: 30px;" class="submit-form">
                        <input type="button" value="Submit" class="add-section-submit" />
                        <input type="button" value="Cancel" class="add-section-cancel" />
                    </div>
                </div>
            </form>
        </div>

        <%-- new block end--%><span style="line-height: 1.4;">          </span>
        <!-- Confirmation popup -->
        <div class="confirmation">
            <h2>Delete Node<a href="#" class="close">X</a></h2>
            <div class="confirmation-content">
                <p>Are you sure you want to delete this node?</p>
                <div class="submit-form">
                    <input type="button" class="btndelete" value="Ok" /><input type="button" value="Cancel" class="btnCancelDelete" />
                </div>
            </div>
        </div>

        <div class="subtree">
            <h2>Print Node<a href="#" class="close">X</a></h2>
            <div id="sample1">
                <div id="localDiagram" style="height: 465px; width: 99%; border: 1px solid black; margin: 2px"></div>
            </div>
        </div>
        <!-- Confirmation popup -->
    </div>
</div>

Css…

#canvas-box {

border-left: solid 10px #ccc;
margin-left:157px;
margin-right:10px;

}

@media (min-width:1441px) and (max-width: 1600px) {
#canvas-box {
/width:89.37%;/
}

}

@media (min-width:1380px) and (max-width: 1440px) {
#canvas-box {

}

}

@media (min-width:1280px) and (max-width: 1366px) {
#canvas-box {

}

}

@media (min-width:1000px) and (max-width:1279px) {
#canvas-box {

}

}

@media (min-width:990px) and (max-width:1020px) {
#canvas-box {

}

}

@media (min-width:700px) and (max-width:768px) {
#canvas-box {

}

}

.palette-section h2{padding:0; margin:0;background: #f5f5f5;width: 100%;}
.palette-section h2 b {
display: inline-block;
font-size: 16px;
text-align: center;
padding:4px 4px 4px 10px;
margin: 0;

}

.palette-section h2 span.arrow {
    background: url(../../../../../images/OrgChartGojs/sprite.png) no-repeat -37px -282px #f5f5f5;
    border: solid 1px #e0e0e0;
    width: 25px;
    height: 23px;
    float: right;
    margin:0 1px 5px 0;
   
}

.mirror {
transform: rotate(180deg);    
}

.palette-section ul {
list-style-type: none;
padding: 10px 0 0 0;
margin: 0;
text-align: center;
}

.palette-section ul li {
    padding: 5px 15px;
    margin: 0 0 5px 0;
    display: inline-block;
}

    .palette-section ul li span {
        width: 75px;
        height: 64px;
        position: relative;
        display: block;
    }

        .palette-section ul li span p {
            width: 75px;
            margin: 17px 0 0 0;
            padding: 5px 0;
            color: #fff;
            text-align: center;
            font-size: 14px;
            font-weight: 600;
        }

        .palette-section ul li span b {
            width: 25px;
            height: 25px;
            border-radius: 15px;
            position: absolute;
            right: -8px;
            top: -10px;
            color: #fff;
            font-size: 16px;
            text-align: center;
            font-weight: 600;
            z-index: 999;
        }

.menu-z-index {
z-index: 20;
}
/* page level CSS */
.full-width {
width: 100%;
}
/GOJS CSS/
.gojs-canvas {
background-color: white;
/border: solid 1px #e0e0e0;/
overflow:hidden;
width: 100%;
height: 100%;
}
/GOJS CSS/
.gojs-canvas-pallete {
background-color: white;
overflow:hidden;
width: 100%;
height: 100%;
}

.org-chart-area {
width: 100%;
float: left;
background: #fff;
text-align: center;
/height: 400px;/
position: relative;
overflow: hidden;
vertical-align: central; /* modified by rajeev sinha 17092014 */
left:0%;
right:0%;
}
.sm-sub-div{margin:15px; border:#cccccc 2px solid;}

.org-chart-container {
display:block;
width: 100%;
text-align:center;

}

This issue is very frequently. Whenever user add the nodes horizontally or vertically, then the last node hide in canvas because no scrollbar is coming properly. I also saw in developer tool in your sample and my diagram which I created. I saw height of canvas is varying but never exceed to height of myDiagram div in your sample but in my case it is exceeding from height of myDiagram div.

Thanks,

Does the size of the Diagram's DIV element change from the time the Diagram is created? If so, http://gojs.net/latest/intro/resizing.html describes what might be happening.