Ways around display:block in Keen IO's JS SDK. The container that’s inserted is a div, so it is display block by default. We’re adding it inline as well, which means it can't be overridden.In the meantime, there is a way to get around it. You already need to specify a div (with an ID) for where to insert the Keen number widget, so you can just a…

display_block_keen.js

First way uses display: inline-block
<style>
    /* required to remove arbitrary whitespace
     * between child elements that are inline-block
     */
    .dashboard {
        font-size: 0px;
    }
    .number {
        display: inline-block;
    }
</style>

<div class="dashboard">
    <div class="number" id="revenueYesterday">
        <!-- Keen number visualization is injected here -->
    </div>
    <div class="number" id="revenueToday">
        <!-- Keen number visualization is injected here -->
    </div>
</div>


Second way uses float: left
<style>
    /* prevents later elements from
     * being affected by the floated children
     */
    .dashboard {
        overflow: hidden;
    }
    .number {
        float: left;
    }
</style>

<div class="dashboard">
    <div class="number" id="revenueYesterday">
        <!-- Keen number visualization is injected here -->
    </div>
    <div class="number" id="revenueToday">
        <!-- Keen number visualization is injected here -->
    </div>
</div>