Andrew Andrew - 2 months ago 8
CoffeeScript Question

Changing moreinfo text position in Dashing widget

I have a Dashing dashboard with a number of text widgets. These all have moreinfo data tags. I've found it necessary to use rather small base dimensions for the widgets.

Here's what a widget looks like:

A simple dashing widget

The .erb code describing this widget is:

<li data-row="2" data-col="2" data-sizex="1" data-sizey="1">
<div data-id="dc-us01mtd" data-view="Text" data-moreinfo="MTD"></div>

So, I would simply like to move the moreinfo tag down. I can't figure out 2 things:

  1. What creates the "fading" effect that can be seen in the "MTD" lettering, and can it be removed?

  2. How can the moreinfo text be moved closer to the bottom of the widget, or perhaps move the "100%" (sent to the widget from a publishing source) up? Or both?

I have so far been completely unable to find this. I have little of .css skills, which is certainly holding me back. Any pointers, or even suggestions of what I might look for?


You can move the location of elements in css by editing the margins of elements. For example you could put

.more-info {
  margin-top: 20px;

in your widget's css file. This will move the more-info element 20 pixels down relative to where it was.

As for the fading text I would have to see your code.