Skip to content
This repository has been archived by the owner on Mar 7, 2018. It is now read-only.

First row in dashboard not aligned #339

Open
meilke opened this issue Mar 27, 2014 · 6 comments
Open

First row in dashboard not aligned #339

meilke opened this issue Mar 27, 2014 · 6 comments

Comments

@meilke
Copy link

meilke commented Mar 27, 2014

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

enter image description here

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

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

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
Copy link
Author

meilke commented Apr 17, 2014

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

@tolleiv
Copy link

tolleiv commented Aug 27, 2014

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

@terraboops
Copy link
Contributor

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.

derekbjohnson pushed a commit to cusi-dev/SupportDashboard that referenced this issue Apr 29, 2015
@sandykadam
Copy link

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants