Показать сообщение отдельно
  #1 (permalink)  
Старый 17.04.2016, 19:50
Интересующийся
Отправить личное сообщение для koha345 Посмотреть профиль Найти все сообщения от koha345
 
Регистрация: 16.04.2016
Сообщений: 28

Некорректное отображение TabContainer
Создал для java-сервлета jsp-страницу с содержанием ниже.
TabContainer отображается некорректно. Сверху появились 2 непонятные кликабельные строчки и исчезают только при ресайзе (resize). Костыль пилить нет желания. Где допустил ошибку в верстке? Пример с сайта gojo работает корректно, однако отказывается красиво отображаться на моей странице.

Код:
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>Мини-СЭД</title>

    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            overflow:hidden;
        }

        #borderContainer {
            width: 100%;
            height: 100%;
        }
    </style>

    <link rel="stylesheet" href="resources/dijit/themes/claro/claro.css">

    <script>dojoConfig = {parseOnLoad: true}</script>
    <script src='resources/dojo/dojo.js'></script>

    <script>
        require(["dojo/parser", "dijit/layout/ContentPane", "dijit/layout/BorderContainer"]);
        require(["dojo/parser", "dijit/layout/ContentPane"]);
        require(["dojo/parser", "dijit/TitlePane"]);
        require(["dojo/parser", "dijit/MenuBar"]);
        require(["dojo/parser", "dijit/PopupMenuBarItem"]);
        require(["dojo/parser", "dijit/DropDownMenu"]);
        require(["dojo/parser", "dijit/MenuItem"]);
        require(["dijit/layout/TabContainer"]);
    </script>

    <script>

        dojo.addOnLoad( function() {
            dojo.query('#newOrg').onclick( function(evt) {
                alert();
            });
        });
    </script>

</head>
<body class="claro">
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true" id="borderContainer">
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'leading'" style="width: 20%;">
            <div id="map" style="width: 100%; height: 100%">
                <div id="item_staff" data-dojo-type="dijit/TitlePane" data-dojo-props="title: 'Справочник', open: false">
                    <!-- Здесь ничего нет! -->
                    <div id="staffTree"></div>
                </div>
                <div id="item_commission" data-dojo-type="dijit/TitlePane" data-dojo-props="title: 'Поручения', open: false">
                    <!-- Здесь ничего нет! -->
                    <div id="commissionTree"></div>
                </div>
            </div>
        </div>
        <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="region: 'center'">
            <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'top'">
                <div style="width: 100%">
                    <div data-dojo-type="dijit/MenuBar" id="navMenu">
                        <div data-dojo-type="dijit/PopupMenuBarItem">
                            <span>Справочник</span>
                            <div data-dojo-type="dijit/DropDownMenu" id="staffActions">
                                <div id="newOrg" data-dojo-type="dijit/MenuItem">Новая организация</div>
                                <div data-dojo-type="dijit/MenuItem" id="newDep">Новое подразделение</div>
                                <div data-dojo-type="dijit/MenuItem" id="newPerson">Новый сотрудник</div>
                            </div>
                        </div>
                        <div data-dojo-type="dijit/PopupMenuBarItem">
                            <span>Поручения</span>
                            <div data-dojo-type="dijit/DropDownMenu" id="commissionActions">
                                <div data-dojo-type="dijit/MenuItem" id = "newCommission">Новое поручение</div>
                            </div>
                        </div>
                        <div data-dojo-type="dijit/PopupMenuBarItem">
                            <span>Другое</span>
                            <div data-dojo-type="dijit/DropDownMenu" id="editActions">
                                <div data-dojo-type="dijit/MenuItem" id = "editTab">Редактировать</div>
                                <div data-dojo-type="dijit/MenuItem" id = "delTab">Удалить</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="width: 350px; height: 300px">
                <div data-dojo-type="dijit/layout/TabContainer" style="width: 100%; height: 100%;">
                    <div data-dojo-type="dijit/layout/ContentPane" title="My first tab" data-dojo-props="selected:true">
                        Lorem ipsum and all around...
                    </div>
                    <div data-dojo-type="dijit/layout/ContentPane" title="My second tab">
                        Lorem ipsum and all around - second...
                    </div>
                    <div data-dojo-type="dijit/layout/ContentPane" title="My last tab" data-dojo-props="closable:true">
                        Lorem ipsum and all around - last...
                    </div>
                </div>
            </div>
            <div id = "view">

            </div>
        </div>
    </div>
</body>
</html>
Безымянный.jpg
Ответить с цитированием