Как центрировать виджет «Диджит»?

Я использую Dojo 1.10, и мне нужно отобразить виджет Select по центру горизонтально на странице. Я не могу понять, как это сделать. Я угадал ряд атрибутов CSS, чтобы не повезло. Виджет «Выбор» всегда отображается слева. Кажется, что ничего не движется в центр. Как мне это сделать?Как центрировать виджет «Диджит»?

В более широком смысле, где в документации Dojo описывается, как это сделать? Поверьте мне, когда я говорю, что сделал веб-поиск после веб-поиска; может быть, я не знаю, что искать. Заранее спасибо.

Этот код адаптирован к одному из образцов dijit/form/Select.

<!DOCTYPE html> 
<html> 
    <head> 
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/resources/dojo.css"> 
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dijit/themes/claro/claro.css"> 
    <script>dojoConfig = {async: true, parseOnLoad: true}</script> 
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script> 
    <script> 
     require(["dojo/parser", "dijit/form/Select"]); 
    </script> 
    </head> 

    <body class="claro"> 
    <select name="select1" data-dojo-type="dijit/form/Select"> 
     <option value="TN">Tennessee</option> 
     <option value="VA" selected="selected">Virginia</option> 
     <option value="WA">Washington</option> 
     <option value="FL">Florida</option> 
     <option value="CA">California</option> 
    </select> 
    </body> 
</html>

источник

2014-12-17 Gary S.

Это может быть сделано, но, насколько я знаю, что это не может быть сделано с помощью CSS на классы элементов или ID. Однако встроенные стили будут работать. Это связано с тем, как Диджит оказывается. Для горизонтального центрирования вам необходимо указать ширину элемента (фиксированный или процентный). Обратите внимание, что эта ширина может быть определена только в строке. В противном случае это не сработает и испортит ваш рендеринг.

Предоставление элемента ширины и отображение его как блока с горизонтальными полями на авто будет делать трюк. Пример:

<select data-dojo-type="dijit/form/Select" style="width: 200px; display: block; margin: 0 auto;"> 
    <!-- options --> 
</select>

С тех пор это не очень удобно. Поэтому я хотел бы предложить/рекомендуется использовать элемент обертку и положить ширину Dijit до 100%, как это:

<div id="wrapper"> 
    <select data-dojo-type="dijit/form/Select" style="width: 100%;"> 
     <!-- options --> 
    </select> 
</div>

Итак, теперь вы можете использовать CSS для контроля ширины и полей вашей обертки:

#wrapper { 
    width: 200px; 
    margin: 0px auto; 
}

Вот рабочий пример на Plunker: http://plnkr.co/edit/NyD28E?p=preview

источник

2014-12-18 01:13:57 iH8

Спасибо. Это сделал трюк! Кроме того, я заметил, что в CSS вместо фиксированной ширины пикселя, такой как 200px, вы можете использовать процент, равный 50%, который, как оказалось, лучше работает в моем реальном коде. Кроме этого, я собираюсь сделать то, что вы сказали. Еще раз спасибо! –

Нет, спасибо, всегда приветствую и благодарю за разъяснения, я работал над этим в своем ответе, чтобы он был более точным. – iH8

Как центрировать виджет «Диджит»?

ответ

Смежные вопросы