Can i set minimum row height for timeline views with resources?

[KaddathParticipant]

Hi,

I have searched quite some time in the documentation but haven’t found any way to solve my problem:

We have a “timelineMonthView” scheduler with resources in our project, in a responsive layout. Everything is behaving quite fine, as even with “height: ‘100%'”, all the resources rows stay visible and a scrollbar appears.

However, as shown in the example below, when the scrollbar appears, all the events have already disappeared and shown with an arrow for a dropdown. How could it be possible to set a minimun row height for that case so that at least one event stays fully visible? In this view for our project, only one event per resource and per day will be possible, so we don’t need to take account multiple events in one row, setting minimum height for one event will be enough

The example (resizing browser height will show what happens when scrollbar appears):
https://jseditor.io/?key=f1d3a88ee8c711e89b5700224d6bfcd5-ver-4

Thanks,
Kaddath

[HristoParticipant]

Hello Kaddath,

You could try with rowHeight member on the particular ‘view’.
Please, take a look at this example.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[KaddathParticipant]

Hi,

Thanks for your answer, but that won’t do with our UI. I know that we can set a fixed row height but our layout has to be responsive and adapt to different number of resources while filling the container space.

If there is no way to do it with the API, i will try a CSS fix, i just wanted to know, in case it could be possible..

Kaddath

[HristoParticipant]

Hello Kaddath,

I would like to suggest you look at this demo:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxscheduler/scheduler-month-view-auto-row-height.htm?light
It demonstrates how the row size can grow dynamically depend on the items.
Also, at the same time, you could set as small as possible rowHeight.

Otherwise, you could bind to ready callback and also the rendered callback and to try to customize its styles but it will be very difficult.
I hope the suggestion above will help.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[KaddathParticipant]

Thanks,

Actually, we didn’t want to have fixed row heights in our layout. I fixed the problem with a bit of code: i add it here the general behaviour just in case someone is interested.

//removing the style tag that fixes the height (self is our scheduler module that uses jqxScheduler):
var styleTag = $('#table__'+self.id+'_scheduler_styleRowsMinHeight');
if(styleTag.length){
	styleTag.remove();
}

//claculating the height
var appointmentsMinHeight = self.scheduler.jqxScheduler('appointmentsMinHeight'), trs = $('#table__'+self.id+'_scheduler tr[data-key="jqx__'+self.id+'_scheduler_0"]'), rowsHeight;
if(trs.length){
	rowsHeight = $(trs[0]).height();
}

//12 is hardcoded in jqxscheduler + 5 margin
if(rowsHeight < (appointmentsMinHeight + 12 + 5)){
	$('<style id="table__'+self.id+'_scheduler_styleRowsMinHeight">#table__'+self.id+'_scheduler td:not(.jqx-grid-cell-pinned){ height: ' + (appointmentsMinHeight + 12 + 5) + 'px !important; }</style>').appendTo(self.jqxElement);
}

[Author]

Posts