[openspending-dev] Pre-launch support, OpenSpending for Oakland, Calif.

Sat Apr 13 14:40:12 UTC 2013

On fös 12.apr 2013 22:47, Adam Stiles wrote:
> - CSS issue with treemap; text bleeds beyond the edge of the
> rectangles. Tryggvi
> suggested modifying treemap.css, which I tried but I'm probably doing
> something wrong. Our treemap.css is here:
> https://github.com/adstiles/openbudgetoakland/blob/gh-pages/pre-launch/stylesheets/treemap.css

Hi Adam!

I haven't looked at the other issues you mention, just this one. The
problem is that your site is loading your css files in the html head
while the openspending stuff is loaded towards the end of body.

Because the browser reads the head first and then the body, everything
you're doing in the head gets overwritten when the browser reads the
body. If you just move your stylesheets to the bottom of body it'll fix it.

Something like:

<html>
  Here be lots of html stuff...
  ...then some openspending stuff that ends with:

                  siteUrl: "http://openspending.org",
                  embed: true
                  };
                window.wdg_widget = new
OpenSpending.AggregateTable($('#tablewidget'), context, state);
            });           
            </script>

  <link rel="stylesheet" href="stylesheets/treemap.css">
  <link rel="stylesheet" href="stylesheets/bubbletree.css">
</body>
</html>

If you've made any other changes to the stylesheet you should move that
as well.

/Tryggvi