First row in dashboard not aligned

[meilke]

I have this problem (see also this Stackoverflow issue): 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).

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

[JediFreeman]

I think your issue might be related to the one I am also experiencing - for me if I set sizex to be larger than six I get incorrect width sizing on my li elements. See this gist for writeup and details: https://gist.github.com/JediFreeman/10904938

[JediFreeman]

Hah! did some more digging on Gridster's issue listing - came across this issue "Impossible to create a widget bigger than 5 cols" - ducksboard/gridster.js#16

Sure enough, I was able to fix my dashing issue with sizing by adding the following line to application.coffee inside the gridster initialization (right before the "draggable" section:

max_size_x: Dashing.numColumns

Since the default max_size_x is 5 you cannot make a widget bigger than 5 columns unless you set this.

FYI - I reproduced your dimension issue (swapping your custom widget for text widget and getting same problem) and verified setting max_size_x in the gridster initialization should fix your layout issue.

[meilke]

Amazing! Thanks! It worked. Heureka! If you want, you can head over to Stackoverflow and also put your solution there.

[tolleiv]

Thanks this fix helped a lot - the question is why Dashing needs to introduce this default value?

[terraboops]

This is a default of Gridster, not Dashing. However, Dashing should provide a mechanism for overriding these configuration parameters.

#420 should allow this specific functionality.

[sandykadam]

Hi there,

Can I use DIV instead of ul/liv ?

I want to show dashing board in circle or honeybee format instead of squares. Any suggestions please let me know.

Thanksm