как настроить css для jsplumb? - PullRequest
Новая
       30

как настроить css для jsplumb?

0 голосов
/ 07 мая 2020

Блок-схема Jsplumb

Я работал над jsplumb и не могу избавиться от проблемы css, с которой я сталкиваюсь, когда пытаюсь создать ветки на блок-схеме , он создает ветки, когда длина текста короткая, но когда я делаю то же самое с длинным текстом, он просто перекрывается и все перепутывается.

Это когда я набираю длинный текст

Это когда я набираю короткий текст

Я добавляю ту же структуру в тег li для другого узла 

<ul id="ulparent`+count+`">
    <li id="parent`+count+`">
    <div class="box" id="`+idt+`">
    <div class="information">
    <div class="position">
    <b id="bkiid`+count+`">`+reply_type+`</b>
    <p id="pkiid`+count+`">`+reply_text+`</p>
    <i class="fa fa-plus" id="addkiid`+count+`" onclick="openmodal(this.id)">&nbsp;</i><i class="fa fa-edit" id="editkiid`+count+`" onclick="editmodal(this.id)">&nbsp;</i><i class="fa fa-close" id="delkiid`+count+`" onclick="deletediv(this.id)"></i><br>
    </div>
    </div>
    </div>
    </li>
    </ul>

Я использую эту часть для подключения . У меня есть отдельная функция для подключения, которая работает абсолютно нормально. 

jsPlumb.bind("ready", function() {
            drawConnections(ids,idt);
            instance.repaintEverything();
        });

CSS для моей блок-схемы 

.container {
    width: 100%;
    height: 100%;
    text-align: center;
    /*margin-bottom: 30px;*/
}

.box {
    display: inline-block;
    color: black;
    width: 80%;
    max-width: 1200px;
    height: 50px;

}

.information {
    display: table;
    height: 100%;
    width: 100%;
    text-align: center;
}

.additionalInfo {
    padding: 15px;
}

.position {
    display: table-row;
    vertical-align: middle;
    height: 50px;
    font-weight: 700;
    /*font-size: 0.5;*/
}

.section ul {
    padding: 0px;
    list-style-type: none;
    display: inline-block;
    height: 30%;

}

.section li {
    margin-top: 50px;
    height: 50%;
    padding: 10px;
}

.children ul {
    display: inline-block;
    padding: 0;
    overflow: hidden;
    text-align: center;
    height: 100%;
    width: 80%;
}

h4 {
    margin-block-start: 1em;
}

.children li {
    float: left;
    width: 50%;
    padding: 10px;
}

._jsPlumb_connector {
    z-index: -1;
}

._jsPlumb_overlay {
    z-index: 5;
}

.enlarged {
    height: 300px !important;
    width: 90% !important;
}

.enlarged additionalInfo {
    opacity: 0.2;
}

li {
    height: 50px;
}
...