First row in Dashing dashboard not aligned

Question

I have this problem: As you can see in the picture below, I am using a layout that has only one element in the first row but it has this weird right alignment issue (it extends too far right).

enter image description here

HTML
CSS

What is the problem?

Here is my first element:

<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>

I am using this setup in application.coffee (15 columns, 9 rows, each column/row is 100 pixels wide):

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

When I specifically set the width on the li, it works.

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

Here is the complete dashboard layout:

<% 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>

Have you tried to get different results if you change ` Dashing.widget_base_dimensions ||= [100, 300]` and assign the rows according to their real rows `data-row="1"` and `data-row="2"` for the second. I could imagine that it calculates the margins the wrong way. I see that you want to use different heights, but it might help to figure out the problem. — boxer santaros, Apr 04 '14 at 17:16
Everything works fine height-wise. If I put in another element in the first row, the margins will be calculated correctly, both horizontally and vertically. The problem only shows when you have a *single* element in the first row. — meilke, Apr 04 '14 at 18:11
Could you post an example on [jsfiddle](http://jsfiddle.net/)? — Sandy W, Apr 07 '14 at 19:07
It would be helpful if you'll provide the css. A jsfiddle example perhaps. — jinmichaelr, Apr 08 '14 at 05:01

score 3 · Answer 1 · answered Apr 08 '14 at 07:23

3

Without any CSS code, I cannot help you any further than below:

The issue seems to be caused by padding adjustment issues. Try writing this:

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

This MAY (no definites here) fix your problem, as it counts padding using subtraction - not addition, which may fix your problem.

Here's an article on box-sizing from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing, and one from CSS-Tricks http://css-tricks.com/box-sizing/. They should be able to help you further in determining the problem.

Post some CSS code! We could then help you further.

answered Apr 08 '14 at 07:23

Lucas

16,930
31
110
182

I think this is right, but it wouldn't explain the lack of padding on the right columns? If they all use the same code, wouldn't all the elements have the extra padding? – Richard Peck Apr 08 '14 at 08:20
@RichPeck Not necessarily - the elements that exist inside the elements are different, aren't they? They probably have different amounts of margin, padding, width, etc., and therefore cause the deviation. The elements themselves can be the same, but when their content is different and the margins of the elements in the contents are different, then you will get varying widths and heights (widths in the OP's case). – Lucas Apr 08 '14 at 08:50
Possibly, but I'd still expect similar behavior if it was a fluid interface; if it's hard-coded widths, then your answer is probably right – Richard Peck Apr 08 '14 at 08:51
@RichPeck It doesn't have to be a fluid interface - it just needs varying content. – Lucas Apr 08 '14 at 08:53
I did not post any CSS because it is the standard Dashing-generated CSS (I also did not create a JSFiddle because this is not just some static website, it is a whole client/server web app). When I applied the CSS you provided, it did not help, though. Thanks for the effort. – meilke Apr 09 '14 at 05:59
@meilke An online demo would give you the answer straightaway (as then we can easily take a look for you) – Lucas Apr 09 '14 at 06:18
@meilke Why don't you view the source of that page and paste it on PasteBin or something? We could still help you, and it's equivalent to pasting your code. – Lucas Apr 09 '14 at 08:01
I added links to the static HTML and generated CSS (see initial post). – meilke Apr 09 '14 at 08:21
@meilke I can't see anything wrong with that code (I put it in JSFiddle and took a look). – Lucas Apr 09 '14 at 09:05
Of course not. It has the fixed width hack applied. – meilke Apr 09 '14 at 16:00
@meilke I don't understand then - have you fixed it? – Lucas Apr 09 '14 at 21:02
I am talking about the hack in the original post. – meilke Apr 10 '14 at 05:51

score 0 · Accepted Answer · answered May 02 '14 at 19:56

0

After asking the same question in the Dashing forum, I got this very satisfying answer:

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

answered May 02 '14 at 19:56

meilke

3,280
1
15
31

First row in Dashing dashboard not aligned

2 Answers2