Ширина данных YUI

Это может показаться базовым вопросом, но мне трудно понять, как установить ширину таблицы на 100% в таблице данных YUI.

я пытался сделать

#dtContainer {
    width: 100%;
}

#dtContainer table {
    width: 100%
}

но ни один из этих подходов не работает.

Чтобы уточнить, я пытаюсь установить ширину данных на 100%, когда таблица пуста и отображается пустое сообщение.

Сгенерированная таблица представляет собой таблицу HTML; так, я думал, что это должно работать.


datatable html-table width yui
person Abe    schedule 16.10.2009    source источник

Ответы (6)


arrow_upward
6
arrow_downward

Не используйте .yui-dt table { width:100%;} , похоже, ширина столбцов не установлена ​​правильно. Используйте myDataTable.setAttributes({width:"100%"},true); после рендера таблицы

person Matt Calderaro    schedule 28.10.2010
comment
работал на меня. также добавил следующее в postRender, чтобы заголовок и тело отображались правильно: $(div.yui-dt-hd).css('width', 'auto'); $(div.yui-dt-bd).css('ширина', 'авто'); - person capdragon; 29.10.2010
comment
Если это не работает, используйте setAttrs вместо setAttributes (YUI3). - person JGeo; 18.11.2015

arrow_upward
4
arrow_downward

Оказывается, решение очень простое:

.yui-dt table
{
    width: 100%;
}
person Abe    schedule 22.12.2009
comment
В этом случае вы должны выбрать ответ Мэтта Кальдераро как правильный ответ, а не свой собственный ответ, который вы не использовали. - person Paul; 20.01.2012

arrow_upward
1
arrow_downward

это уродливое решение. но это работает

<script>
window.onload = function() {
setTimeout('document.getElementById("NAME OF CONTAINER DIV").childNodes[1].style.width
= "100%"',1000);
};
</script>

проблема в том, что применение стиля до рендеринга бессмысленно, javascript строит таблицу, пост-рендеринг - это все, что я мог приступить к работе.

person Singularity    schedule 12.11.2009
comment
Спасибо. Я не использовал вашу реализацию, но она указала мне правильное направление. В основном я использовал метод YUI Dom setAttribute, чтобы установить размер для методов, которые запускают событие render() в таблице данных YUI. - person Abe; 13.12.2009

arrow_upward
0
arrow_downward

похоже, что этот маленький тег стиля работает волшебно:

 .yui-dt table { width:100%;}
person Singularity    schedule 12.01.2010

arrow_upward
0
arrow_downward

Чтобы сохранить соотношение сторон на разных экранах с разным разрешением, мне пришлось вручную установить ширину столбца в процентах, которые в сумме составляли 100%.

<style type="text/css">

    /* YUI Individual Column Width */        
    #dvAutoWidthList .yui-dt-col-Col1{width: 35%;}
    #dvAutoWidthList .yui-dt-col-Col2{width: 10%;}
    #dvAutoWidthList .yui-dt-col-Col3{width: 15%;}
    #dvAutoWidthList .yui-dt-col-Col4, .yui-dt-col-Col5, .yui-dt-col-Col6, .yui-dt-col-Col7 {width: 10%;}

</style>

PS: Возможно, это не лучший способ сделать это, но это решило мою проблему!

Квекс.

person Kwex    schedule 19.09.2011

arrow_upward
0
arrow_downward 

var dataTable = new Y.DataTable(
          {
            columns: cols,
            data: remoteData,
            width: '100%',             
          }
        ).render('#dataTable ');

Это должно сработать. У меня работал AUI 2.5.1

person Shmulinson    schedule 09.02.2015