Первая строка на приборной панели Dashing не выровнена

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

введите здесь описание изображения

HTML
CSS

В чем проблема?

Вот мой первый элемент:

<li data-row="1" data-col="1" data-sizex="15" data-sizey="3" >
  <div data-id="some-id" data-view="MyWidget" data-title="Some title" style="background-color:#749396"></div>
</li>

Я использую эту настройку в application.coffee (15 столбцов, 9 строк, каждый столбец/строка имеет ширину 100 пикселей):

Dashing.on 'ready', ->
  Dashing.widget_margins ||= [5, 5]
  Dashing.widget_base_dimensions ||= [100, 100]
  Dashing.numColumns ||= 15

Когда я специально устанавливаю ширину на li, это работает.

<li data-row="1" data-col="1" data-sizex="15" data-sizey="3" style="width: 1640px;">

Вот полный макет приборной панели:

<% content_for :title do %>Dashboard<% end %>
<div class="gridster">
  <ul>

    <!-- Hack: Setting width of top row to 1640px! -->

    <li data-row="1" data-col="1" data-sizex="15" data-sizey="3" style="width: 1640px;">
      <div data-id="id1" data-view="OwnWidget" style="background-color:#749396"></div>
    </li>

    <li data-row="4" data-col="1" data-sizex="5" data-sizey="4">
      <div data-id="id2" data-view="Meter" data-min="0" data-max="100"></div>
    </li>

    <li data-row="4" data-col="6" data-sizex="5" data-sizey="4">
      <div data-id="id3" data-view="Number" style="background-color:#749396"></div>
    </li>

    <li data-row="4" data-col="11" data-sizex="5" data-sizey="4">
      <div data-id="id4" data-view="Number" style="background-color:#749396"></div>
    </li>

    <li data-row="8" data-col="1" data-sizex="5" data-sizey="4">
      <div data-id="id5" data-view="Meter" data-min="0" data-max="100"></div>
    </li>

    <li data-row="8" data-col="6" data-sizex="5" data-sizey="4">
      <div data-id="id6" data-view="Number" style="background-color:#749396"></div>
    </li>

    <li data-row="8" data-col="11" data-sizex="5" data-sizey="4">
      <div data-id="id7" data-view="Number" style="background-color:#749396"></div>
    </li>

  </ul>
</div>

person meilke    schedule 24.03.2014    source источник
comment
Можете ли вы поделиться кодом других <li>?   -  person boxer santaros    schedule 04.04.2014
comment
Добавил весь макет.   -  person meilke    schedule 04.04.2014
comment
Пытались ли вы получить разные результаты, если вы изменили `Dashing.widget_base_dimensions ||= [100, 300]` и назначили строки в соответствии с их реальными строками data-row="1" и data-row="2" для второго. Я мог представить, что он неправильно вычисляет поля. Я вижу, что вы хотите использовать разную высоту, но это может помочь решить проблему.   -  person boxer santaros    schedule 04.04.2014
comment
Все работает нормально по высоте. Если я добавлю другой элемент в первую строку, поля будут рассчитаны правильно, как по горизонтали, так и по вертикали. Проблема проявляется только тогда, когда у вас есть один элемент в первой строке.   -  person meilke    schedule 04.04.2014
comment
можешь поделиться какой-нибудь ссылкой?   -  person G.L.P    schedule 07.04.2014
comment
К сожалению, я не могу предоставить размещенный пример прямо сейчас.   -  person meilke    schedule 07.04.2014
comment
Не могли бы вы опубликовать пример на jsfiddle?   -  person Sandy W    schedule 07.04.2014
comment
Было бы полезно, если бы вы предоставили css. Возможно, пример jsfiddle.   -  person jinmichaelr    schedule 08.04.2014


Ответы (2)


Без какого-либо кода CSS я не могу помочь вам дальше, чем показано ниже:

Проблема, по-видимому, вызвана проблемами с настройкой заполнения. Попробуйте написать это:

li {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

Это МОЖЕТ (здесь нет определений) решить вашу проблему, так как заполнение подсчитывается с помощью вычитания, а не сложения, что может решить вашу проблему.

Вот статья о box-sizing из MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing и один из CSS-Tricks http://css-tricks.com/box-sizing/. Они должны быть в состоянии помочь вам в определении проблемы.

Опубликуйте код CSS! Тогда мы могли бы помочь вам дальше.

person Lucas    schedule 08.04.2014
comment
Я думаю, что это правильно, но это не объясняет отсутствие отступов в правильных столбцах? Если все они используют один и тот же код, разве все элементы не будут иметь дополнительные отступы? - person Richard Peck; 08.04.2014
comment
@RichPeck Не обязательно - элементы, которые существуют внутри элементов, разные, не так ли? Они, вероятно, имеют разное количество полей, отступов, ширины и т. д. и поэтому вызывают отклонение. Сами элементы могут быть одинаковыми, но когда их содержимое разное и поля элементов в содержимом разные, вы получите разную ширину и высоту (ширину в случае OP). - person Lucas; 08.04.2014
comment
Возможно, но я все равно ожидал бы подобного поведения, если бы это был гибкий интерфейс; если ширина жестко закодирована, то ваш ответ, вероятно, правильный - person Richard Peck; 08.04.2014
comment
@RichPeck Это не обязательно должен быть гибкий интерфейс — ему просто нужен различный контент. - person Lucas; 08.04.2014
comment
Я не публиковал никакого CSS, потому что это стандартный CSS, сгенерированный Dashing (я также не создавал JSFiddle, потому что это не просто какой-то статический веб-сайт, это целое клиент-серверное веб-приложение). Однако, когда я применил предоставленный вами CSS, это не помогло. Спасибо за попытку. - person meilke; 09.04.2014
comment
@meilke Онлайн-демонстрация сразу даст вам ответ (поскольку тогда мы можем легко взглянуть на вас) - person Lucas; 09.04.2014
comment
@meilke Почему бы вам не просмотреть исходный код этой страницы и не вставить его в PasteBin или что-то в этом роде? Мы по-прежнему можем вам помочь, и это эквивалентно вставке вашего кода. - person Lucas; 09.04.2014
comment
Я добавил ссылки в статический HTML и сгенерировал CSS (см. начальный пост). - person meilke; 09.04.2014
comment
@meilke Я не вижу ничего плохого в этом коде (я поместил его в JSFiddle и посмотрел). - person Lucas; 09.04.2014
comment
Конечно нет. Применяется хак с фиксированной шириной. - person meilke; 09.04.2014
comment
@meilke Тогда я не понимаю - ты это исправил? - person Lucas; 10.04.2014
comment
Я говорю о взломе в исходном посте. - person meilke; 10.04.2014

Задав тот же вопрос на форуме Dashing, я получил очень удовлетворительный ответ:

https://github.com/Shopify/dashing/issues/339

person meilke    schedule 02.05.2014