---
title: "JQuery Timeline Resource Row Height Example | Mobiscroll"
component: "Timeline"
framework: "jQuery"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/jquery/timeline/setting-row-height"
---

# Resource Row Height - jQuery Timeline demo

Set fixed heights for resource rows, control parent row sizing, and remove bottom gutter spacing on a JQuery Timeline using CSS overrides.

- [Live demo](https://demo.mobiscroll.com/jquery/timeline/setting-row-height)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-jquery/tree/main/src/demos/eventcalendar/timeline/setting-row-height)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/timeline/setting-row-height.md), [Angular](https://demo.mobiscroll.com/angular/timeline/setting-row-height.md), [React](https://demo.mobiscroll.com/react/timeline/setting-row-height.md), [Vue](https://demo.mobiscroll.com/vue/timeline/setting-row-height.md)

## Description

The height of the rows is determined by the maximum number of events it houses at any moment, but in some cases this needs to be overridden. The height of a resource row or track can be adjusted in CSS. Let's explore a couple of scenarios.

## What this demo shows

- Shows three monthly timelines with days arranged horizontally and resources listed as rows on the left. The examples show how to override parent row height, set resource row height, and remove extra bottom gutter spacing.
- **Header navigation** The month and year label opens date navigation, the previous and next arrows move between months, and the Today button returns to the current date.
- **Month view** The strip below the header shows the days of the selected month, with the current date highlighted.
- **Resource tree** Resources are grouped into parent rows with child resource rows underneath.
- **Parent row height** The first timeline uses CSS overrides to control the height of parent resource rows independently.
- **Resource row height** The second timeline shows how to set a consistent height for all resource rows.
- **Bottom gutter** The third timeline shows how to remove the extra bottom spacing from the timeline row area.
- **Event cards** Events are shown as colored cards with a left color stripe, a bold title, and the event start and end time.
- **Date positioning** Events are positioned by their assigned resource and exact date and time range.
- **Event interaction** Events highlight on hover and show drag or resize handles for repositioning or changing duration.
- **Event selection** Clicking an event selects and highlights it.
- **Event creation** New events can be created by double-clicking the timeline or by clicking and dragging across a time range on leaf resource rows.
- **Scrolling** The timeline supports horizontal and vertical scrolling for navigating through dates and resources.

## Best for

- **Grouped resource timelines** Scheduling views where parent rows need to stay compact while child resource rows need more vertical space for details and events.
- **Team planning boards** Resource timelines that show people, roles, and avatars in the left column and need enough row height for readable custom resource labels.
- **Dense scheduling layouts** Month timelines where row height should be reduced to fit more resources on screen without changing the event data.
- **Custom timeline spacing** Interfaces where default row or track spacing does not match the product layout and needs to be adjusted with scoped CSS.
- **Resource-heavy schedules** Planning screens with many rows where controlling row height and gutter spacing helps keep the timeline easier to scan.

## Tutorial

### Independently control the parent resources

There might be cases when you would like to reduce the height of the parent resources. This can be achieved only if the event creation is not allowed on parent resources. You can prevent that by setting the `eventCreation` property of the [resource](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-resources) to `false`. Add your custom height to the `.mbsc-timeline-parent` CSS class.

```css
.mbsc-timeline-parent { height: 32px; }
```

### Set the height of all resource rows

You can also play with the size of the resource rows in general. Override the `.mbsc-timeline-row` CSS class to increase the height of the rows for a bigger resource content. This will be applicable for parent resources as well.

```css
.mbsc-timeline-row { height: 78px; }
```

### Remove the extra bottom spacing (gutter) of the row

This extra space is there to let pointer and touch users create new events if there already is an existing event for that time. In case you don't allow multiple events at the same time, you can adjust the bottom spacing through the `.mbsc-timeline-row-gutter` CSS class.

```css
.mbsc-timeline-row-gutter { height: 6px; }
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-themeVariant) - option
- [`view`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-view) - option
- [`clickToCreate`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-clickToCreate) - option
- [`dragToCreate`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-dragToResize) - option
- [`data`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-data) - option
- [`resources`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-resources) - option
- [`renderResource`](https://mobiscroll.com/docs/jquery/eventcalendar/api#renderer-renderResource) - renderer

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

$(function () {
  $('#demo-timeline-row-height')
    .mobiscroll()
    .eventcalendar({
      view: {
        timeline: {
          type: 'month',
        },
      },
      clickToCreate: true,
      dragToCreate: true,
      dragToMove: true,
      dragToResize: true,
      data: [
        {
          start: '2026-10-02T00:00',
          end: '2026-10-05T00:00',
          title: 'Event 1',
          resource: 'res1',
        },
        {
          start: '2026-10-09T00:00',
          end: '2026-10-15T00:00',
          title: 'Event 2',
          resource: 'res1',
        },
        {
          start: '2026-10-05T00:00',
          end: '2026-10-09T00:00',
          title: 'Event 3',
          resource: 'res2',
        },
        {
          start: '2026-10-08T00:00',
          end: '2026-10-13T00:00',
          title: 'Event 4',
          resource: 'res3',
        },
        {
          start: '2026-10-07T00:00',
          end: '2026-10-12T00:00',
          title: 'Event 5',
          resource: 'res3',
        },
        {
          start: '2026-10-03T00:00',
          end: '2026-10-10T00:00',
          title: 'Event 6',
          resource: 'res4',
        },
        {
          start: '2026-10-15T00:00',
          end: '2026-10-23T00:00',
          title: 'Event 7',
          resource: 'res4',
        },
        {
          start: '2026-10-12T00:00',
          end: '2026-10-17T00:00',
          title: 'Event 8',
          resource: 'res5',
        },
        {
          start: '2026-10-08T00:00',
          end: '2026-10-13T00:00',
          title: 'Event 9',
          resource: 'res6',
        },
        {
          start: '2026-10-20T00:00',
          end: '2026-10-27T00:00',
          title: 'Event 10',
          resource: 'res7',
        },
        {
          start: '2026-10-06T00:00',
          end: '2026-10-12T00:00',
          title: 'Event 11',
          resource: 'res8',
        },
        {
          start: '2026-10-18T00:00',
          end: '2026-10-25T00:00',
          title: 'Event 12',
          resource: 'res8',
        },
      ],
      resources: [
        {
          id: 'gro1',
          name: 'Team 1',
          color: '#ff1717',
          eventCreation: false,
          children: [
            {
              id: 'res1',
              name: 'Ryan',
              color: '#1dab2f',
              title: 'Cloud System Engineer',
              img: 'https://img.mobiscroll.com/demos/m1.png',
            },
            {
              id: 'res2',
              name: 'Kate',
              color: '#e20000',
              title: 'Help Desk Specialist',
              img: 'https://img.mobiscroll.com/demos/f1.png',
            },
            {
              id: 'res3',
              name: 'John',
              color: '#4981d6',
              title: 'Application Developer',
              img: 'https://img.mobiscroll.com/demos/m2.png',
            },
          ],
        },
        {
          id: 'gro2',
          name: 'Team 2',
          eventCreation: false,
          children: [
            {
              id: 'res4',
              name: 'Mark',
              color: '#f7961e',
              title: 'Data Quality Manager',
              img: 'https://img.mobiscroll.com/demos/m3.png',
            },
            {
              id: 'res5',
              name: 'Sharon',
              color: '#34c8e0',
              title: 'Network Administrator',
              img: 'https://img.mobiscroll.com/demos/f2.png',
            },
          ],
        },
        {
          id: 'gro3',
          name: 'Team 3',
          color: '#af0000',
          eventCreation: false,
          children: [
            {
              id: 'res6',
              name: 'Emma',
              color: '#843100',
              title: 'Client Services Manager',
              img: 'https://img.mobiscroll.com/demos/f3.png',
            },
            {
              id: 'res7',
              name: 'Ashley',
              color: '#4caf00',
              title: 'Instructional Designer',
              img: 'https://img.mobiscroll.com/demos/f4.png',
            },
            {
              id: 'res8',
              name: 'Derek',
              color: '#7056ff',
              title: 'Architectural Engineer',
              img: 'https://img.mobiscroll.com/demos/m4.png',
            },
          ],
        },
      ],
      renderResource: function (resource) {
        if (resource.children) {
          return '<div>' + resource.name + '</div>';
        } else {
          return (
            '<div class="md-timeline-row-height-cont">' +
            '<div class="md-timeline-row-height-name">' +
            resource.name +
            '</div>' +
            '<div class="md-timeline-row-height-title">' +
            resource.title +
            '</div>' +
            '<img class="md-timeline-row-height-avatar" src="' +
            resource.img +
            '"/>' +
            '</div>'
          );
        }
      },
    });
});
```

### HTML

```html
<div id="demo-timeline-row-height" class="md-timeline-row-height"></div>
```

### CSS

```css
.md-timeline-row-height .mbsc-timeline-row {
    height: 78px;
}

.md-timeline-row-height .mbsc-timeline-parent {
    height: 32px;
}

.md-timeline-row-height .mbsc-timeline-row-gutter {
    height: 6px;
}

.md-timeline-row-height-cont {
    position: relative;
    padding-left: 50px;
}

.md-timeline-row-height-avatar {
    position: absolute;
    max-height: 50px;
    max-width: 50px;
    top: 30px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    left: 10px;
}

.md-timeline-row-height-name {
    font-size: 16px;
}

.md-timeline-row-height-title {
    font-size: 13px;
    margin-top: 5px;
}
```

## Implementation notes

- Use `timeline: { type: 'month' }` - a monthly timeline view.
- Define a hierarchical resource tree: 3 group resources (Team 1-3), each with a `children` array of leaf resources. Set `eventCreation: false` on each group so events can only be created on leaf rows. Leaf resources each have `id`, `name`, `color`, `title` (job title), and `img` (avatar URL). Populate 12 events across the leaf resources using `dyndatetime` offsets.
- Use `renderResource` (Angular: `resourceTemplate`, Vue: `#resource`) to render resource labels differently depending on row type. Check `resource.children`: if present (group row), render only the group name; if absent (leaf row), render the member's name, job title, and avatar image. All other interactions are enabled: `clickToCreate`, `dragToCreate`, `dragToMove`, `dragToResize` all `true`.
- Row heights for group rows and leaf rows are different. Apply a `cssClass` to the calendar to scope the overrides, then target Mobiscroll's internal `.mbsc-timeline-resource` (resource label column) and `.mbsc-timeline-row` (event track area) classes with custom `min-height` values - one size for leaf rows, a shorter size for group header rows.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-jquery.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config jquery
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config jquery --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/jquery/getting-started/installation

## Related demos

- Previous: [Custom Event Tooltip](https://demo.mobiscroll.com/jquery/timeline/custom-event-tooltip.md) - Display native, custom Mobiscroll, or third-party tooltips on JQuery Timeline events — control hover behavior with event hover callbacks.