Discuss anything related to web development but no technical support questions


Post by lxxrxns »

I use a LOT of summary totals in my scheduler. So many, that when I hover over the summary bar, the pop-up goes OVER the bar, thus the summary pop-up constantly keeps fading in and out very rapidly.

I would like to change the summary pop-up to a two-column layout.

What I have is:

Image

What I would like is:

Image

I managed to do this manually by wrapping the contents of the pop-up div in a

<div style="column-count: 2;"></div>

using the Chrome Developer Tools, i.e.:

<div style="column-count: 2;">
<label>Onderbezetting</label>
<div class="b-timeaxis-summary-value">...</div>
<label>Dagdienst IC</label>
<div class="b-timeaxis-summary-value">...</div>
etc...
</div>

But I cannot manage to do it in my script so that this happens for every user.

Can anyone tell me how I can change the lay-out of the summary pop-up?


Post by marcio »

Hello lxxrxns,

Could you please share how did you set up your summary?? We currently don't support a lot of customization related to the summary container, but what you can do is to add manually a CSS class with your configuration, like this

const parent = document.querySelector('.b-timeaxis-summary-value').parentElement;
parent.classList.add("custom-class") //custom-class is any class that has the style that you want

Best regards,
Márcio


Post by lxxrxns »

Hi Márcio.

Are all summaries added to the DOM at once on page-load? Or are they only rendered when someone mouse-overs?
Because if the latter is true, I would have to add your code to some listener that checks for when a summary/total renders.

Laurens


Post by lxxrxns »

Update:

I have the following code which makes the summaries exactly how I want them to be:

var summary_container= $('.b-timeaxis-summary-value').parent();
summary_container.find('header').remove();
summary_container.css('column-count', '2');

But I don't know where I should put this code to make it trigger every time a summary is rendered.
Is there some kind of onSummaryRender() event that I can attach this to?
Because on $(document).load() doesn't do it.

Thanks!
@marcio


Post by lxxrxns »

Update 2:

I managed to fix it with CSS only <:o)

#b-scheduler-1-summary-tip > .b-tooltip-body-wrap > .b-content-element > header {
  display: none;
}
#b-scheduler-1-summary-tip > .b-tooltip-body-wrap > .b-content-element {
  column-count: 2;
}

Results in beautiful summaries, and even the position is perfect :-)

Image


Post by marcio »

Hey lxxrxns,

Glad that you figure out a way, just pay attention to the #b-scheduler-1-summary-tip identifier, as it's recommended to use classes selector instead of ids.

Best regards,
Márcio


Post Reply