Dashing.io Widget with a marquee

Question

iam working with dashing.io and i want to build a widget with a marquee. I did a marquee with css animation and html ( http://jsfiddle.net/oLLzsyud/ ). It works with that, but it got it the widget like that: sccs:

    .widget-marquee {
    background: #004894;
    $color_celeste_approx: #cccccc;

    .marquee {
        width: 200px;
        margin: auto;
        padding: 2px;
        overflow: hidden;
        white-space: nowrap;
        border: solid 1px $color_celeste_approx;
        animation: marquee 10s linear infinite;
        &:hover {
            animation-play-state: paused;
        }
    }

    @keyframes marquee {
        100% {
            text-indent: -100%;
        }
        0% {
            text-indent: 100%;
        }
    }
}

html:

<div class="marquee">
    <span data-bind="stoer"></span>
</div>

In dashing it is shown like this and doesnt move

I didnt touch the coffee script. It is default from the widget generation.

I didnt see what is wrong and why it isnt working in dashing. Maybe someone here knows why it isnt working in dashing, but with css and html on a normal page.

Thank you for your answers.

Answer 1

I got it by myself. I just put the marqueere into the html file:

    <style>
.marquee {
  width: 1500px;
  margin: auto;
  padding: 2px;
  overflow: hidden;
  white-space: nowrap;
  border: solid 1px #cccccc;
  animation: marquee 10s linear infinite;
}

.marquee:hover {
  animation-play-state: paused;
}

@keyframes marquee {
  100% {
    text-indent: -125%;
  }
  0% {
    text-indent: 125%;
  }
}
</style>

<div class="marquee">
    <span data-bind="status"></span>
</div>

And the data is read in the coffeescript file:

class Dashing.Marquee extends Dashing.Widget

  statusalt = [" "]
  Array::unique = ->
    output = {}
    output[@[key]] = @[key] for key in [0...@length]
    value for key, value of output

  ready: ->
    # This is fired when the widget is done being rendered

  onData: (data) ->
    # Handle incoming data
    # You can access the html node of this widget with `@node`
    # Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.

    statusneu = [
      @get('bsm') + " +++ ",
      @get('stoer') + " +++ ",
      @get('lzeit') + " +++ ",
      @get('sla') + " +++ ",
      @get('bkob') + " +++ ",
      @get('major') + " +++ ",
      @get('probl') + " +++ ",
      @get('fulfil') + " +++ ",
      @get('bm') + " +++ ",
      @get('bk') + " +++ ",
      @get('pm') + " +++ ",
      @get('fianz') + " +++ ",
    ]
    statusfilter = statusneu.filter (x) -> x !=  "undefined +++ "

    if statusfilter is statusalt
      status = statusalt.toString().split(",").join(" ")
    else
      statusneu= statusfilter.concat statusalt
      status = statusneu.unique().toString().split(",").join(" ")
      statusalt = statusfilter

    @set 'status', status.concat(@get('updatedAtMessage') + " +++ ")

Its maybe not the best solution, but it works on my dashboard. The scss just does an blue background.