Dijit Tabcontainer внутри настраиваемой ширины виджета-Tablist слишком длинный

Question

У меня есть шаблонный пользовательский виджет, который наследуется от dijit.layout._LayoutWidget, dijit._Container и dijit._Templated, который предоставляет моему виджету поддержку виджетов для изменения размера и т. Д. Все, что мне нужно, это TabContainer, размер которого соответствует Размер виджета. Вот мой виджет.

<div dojoAttachPoint="containerNode">
    <div dojoType="dijit.layout.TabContainer" tabPosition="top" style="width:100%;height:100%" >
    <div dojoType="dijit.layout.ContentPane" title="tab" selected="true">
    hello
    </div>
</div>
</div>

Все выглядит хорошо, но я получаю странный TabList.

Я посмотрел на проблему. Все части виджета и TabContainer имеют правильные значения ширины и высоты. Только Tablist имеет более длинную ширину (50 000 пикселей в ширину): я читал о подобных проблемах, таких как этот: http://bugs.dojotoolkit.org/ticket/10495,, но в моем случае все элементы имеют правильную ширину и длину. Я понятия не имею, как TabList получает эту длинную ширину.

Я также пробовал много способов добавления и удаления style = "width: 100%; height: 100;" для родительского контейнера и его родителей. Но ни одна из конфигураций не устранила проблему.

Есть ли способ решить эту проблему?

Answer 1

На всякий случай, если кто-то ищет решение, у меня возникла такая же проблема, и я пришел к этому вопросу.Хотя я посмотрел отчеты об ошибках, в моем случае это не применимо, я не встраивал tabcontainer в таблицу и не устанавливал для doLayout значение false.Я попытался установить tabcontroller, но это тоже не сработало.Наконец, после отладки выясняется, что вы должны предоставить метод «resize» в вашем виджете и изменить размер tabcontainer внутри него следующим образом

widgetTemplate =  '... ' + //Our tabcontainer declaration
'<div dojoAttachPoint="containerNode">' +
'<div dojoAttachPoint="widgetTab" dojoType="dijit.layout.TabContainer"' + 'style="width:100%;height:100%" >' +
'<div dojoType="dijit.layout.ContentPane" title="tab" selected="true">hello</div></div></div>' + 
'...' //Rest Of template declaration

//Since we are embedding widget inside template we need _WidgetsInTemplateMixin
dojo.declare("MyWidget", [dijit._Widget, dijit._TemplatedMixin,dijit._WidgetsInTemplateMixin], {
templateString: widgetTemplate,
.... //Rest of functions
resize: function(){
this.containerNode.widgetTab.resize() //Resize tabcontainer 
}

});

Надеюсь, это поможет

Answer 2

Попробуйте добавить атрибут к вашему TabContainer:

<div dojoType="dijit.layout.TabContainer" controllerWidget="dijit.layout.TabController" ... >

http://bugs.dojotoolkit.org/ticket/10113#comment:11

Answer 3

Если вы хотите удалить первый: «useMenu: false» Если вы хотите удалить второе и третье: «useSlider: false»

Answer 4

Просто переписать свой CSS так:

div[class="dijitTabListWrapper dijitTabContainerTopNone dijitAlignClient"]{
  height: 30px !important;
}

@-moz-document url-prefix() {
  div[class="dijitTabListWrapper dijitTabContainerTopNone dijitAlignClient"]{
    height: 31px !important;
  }
}