CSS Formatting Help

(12 posts) (3 voices)


  1. ajdjackson, Member


    I've been scratching my head as how to do this :)

    I wish to create a series of rounded rectangles and put data from queries in them I then wish to link reports of this data.

    This is where I've gotten to:

    select 'dbr.hideheader'; select 'dbr.title','Bank Balance'; select 'dbr.purehtml','<div class="rcorners1">'; select concat('Bank Balance\r\n£',sum(a.Tran_CB)/1000 ,'M') from hilmark.tblbank_trans a join (select Acc_ID, max(Tran_Date) as maxdate from hilmark.tblbank_trans group by Acc_ID) dp on a.Acc_ID = dp.Acc_ID where a.Tran_Date = dp.maxdate; select 'dbr.purehtml','</div>';

    I've also added the following to the userstyle.css file:
    .rcorners1 { border-radius: 25px; background: #8AC007; padding: 20px; width: 100px; height: 100px; font-size:50px; font-weight:bold; display: table-cell; text-align: center; vertical-align: middle; line-height: 25px;


    The result I'm getting is the rectangle OK and the data in the horizontally centred but not vertically and the data is in a white rectangle.

    Hope you follow that.

    Am I doing this totally wrong?


  2. myDBR Team, Key Master

    you can use dbr.divify which is meant to be used in this kind of situations. Your CSS should be ok:


    myDBR Team

  3. ajdjackson, Member


    Thanks that worked great.

    However I've another wee problem :)

    The report that is linked contains sparklines. The report works when run standalone but when linked the sparklines do not appear just their data.

    Any thoughts?


    select 'dbr.javascript', "$('.largeline .spark').sparkline('html', { type: 'line', height: '2.0em', width: '12em' });", 'onload';

    select 'dbr.title', 'Bank Accounts Balances'; select 'dbr.hidecolumns', 1; select 'dbr.colstyle','Name','[text-align:right]'; select 'dbr.rowclass', '[style]'; select 'dbr.colclass', '[Sparkline]', 'spark'; select 'dbr.resultclass', 'mytable'; select 'dbr.css', '.mytable td {vertical-align: middle;}'; select 'dbr.css', '.mytable tr:nth-child(6) {background-color: #E0F7FF; border-top-style: double;border-bottom-style: double;border-width: 3px; border-color: black;color:black;font-weight:bold;line-height: 20px;}';

    SELECT b.Acc_Name as 'Account Name[Name]', a.Tran_CB as 'Closing Balance[CBal]', a.Tran_Date as 'as of Date[TDate]', group_concat(s.Bal order by s.TDate asc SEPARATOR ',') as 'Trend[Sparkline]', 'largeline' as '[style]' FROM hilmark.tblbank_trans a INNER JOIN hilmark.tblbank_accs b ON b.Acc_ID = a.Acc_ID left join hilmark.tblbank_trans c on (a.acc_id = c.acc_id and a.tran_date < c.tran_date) left join (select Tran_Date as TDate, Acc_ID as Acc,Tran_CB as Bal from hilmark.tblbank_trans where Tran_Date > (now()- interval 30 day) order by 1 asc ) s on a.acc_ID=s.Acc where c.tran_date is null and a.Tran_Date > '2014-08-31'

    group by 1


    select 'Group' as 'Account Name[Name]', sum(a.Tran_CB)as 'Closing Balance[CBal]', a.Tran_Date as 'as of Date[TDate]', (SELECT group_concat(s.Bal order by s.TDate asc SEPARATOR ',') FROM (select Tran_Date as TDate,sum(Tran_CB) as Bal from hilmark.tblbank_trans where Tran_Date > (now()- interval 30 day) group by 1 order by 1 asc ) s) as 'Trend[Sparkline]', 'largeline' as '[style]' from hilmark.tblbank_trans a where a.Tran_Date = (select max(b.Tran_Date) from hilmark.tblbank_trans b where a.Acc_ID = b.Acc_ID);

  4. myDBR Team, Key Master

    You are showing the result in a popup window?

    There is a timing issue when a sparkline is called before the element is visible. You can set the element visible before calling the sparkline (#popup is the ID of the popup used):

    select 'dbr.javascript', "
    $('.largeline .spark').sparkline('html', { type: 'line', height: '2.0em', width: '12em' });
    ", 'onload';

    myDBR Team

  5. ajdjackson, Member

    Perfect - Thanks.


  6. cris, Member

    Is there a way to force sparklines to display when they are run with a cursor inside of a loop? They display fine when a cursor is not used, but with the cursor the sparkline is incorrect and when hovering over the sparkline it displays:


    I'm hoping there is a solution similar to the solution above?


  7. myDBR Team, Key Master

    there is no correlation with using a cursor and a sparkline chart. Sounds like an error in the report code. You can open a support ticket and show the report code and the SQL export of the report so we can replicate the issue.

    myDBR Team

  8. cris, Member

    Thank you. After exporting the report to SQL, I figured it out. I had the sparkline javascript inside the loop. When I moved it outside the loop, everything worked as expected.

  9. ajdjackson, Member

    Good morning

    Resurrecting this old thread as I have a similar issue when exporting the report to a pdf.

    Instead of the sparklines I just get the data.

    Is there a workaround?



  10. myDBR Team, Key Master

    there seems to be a conflict between the sparkline libray, latest jQuery and the wkhtmltopdf's JavaScript engine. We can take a look if we see what is causing this.

    myDBR Team

  11. ajdjackson, Member

    Many thanks.


  12. myDBR Team, Key Master

    The conflict between jQuery and wkhtmltopd causing the sparklines not appear in PDF has now been resolved. Run the automatic updater to get the latest build.

    myDBR Team


You must log in to post.