Announcement

**Isomorphic** · 18 Jul 2023, 04:57

We're not seeing any problems pasting your code here, for example.

Please let us know your version, affected browsers and browser/screen zoom.

**paulwilhelm** · 18 Jul 2023, 06:32

Hello,
Browser is
chrome lastet version or
edge, latest version
no zoom
The effect becomes more visible when the timelane has some additional lanes., see below:
In my use case (not shown) the events are show completly in the lane above the correct lane

Code:

var _today = isc.DateUtil.getStartOf(new Date(2020, 6, 4), "W");

var _start = _today.getDate();
var _month = _today.getMonth();
var _year = _today.getFullYear();

var events2 = [

{
    eventId: 1,
    name: "Add new Timeline view",
    description: "Add a new calendar Timeline component",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 2), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 8), "D"),
    lane: "darcyFeeney"
},
{
    eventId: 2,
    name: "ListGrid field autoSize",
    description: "Complex field-autosizing in ListGrid",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start), "D"),
    lane: "kaiKong"
},
{
    eventId: 3,
    name: "PDF Import/Export",
    description: "Implement native PDF import/export",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 1), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 6), "D"),
    lane: "garretMonroe"
},
{
    eventId: 4,
    name: "Calculated Fields",
    description: "Formula and Summary fields for ListGrid",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 4), "D"),
    lane: "charlesMadigen"
},
{
    eventId: 5,
    name: "ListGrid cell-level selection",
    description: "Implement spreadsheet-like selection in ListGrid",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 7), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 14), "D"),
    lane: "charlesMadigen"
},
{
    eventId: 6,
    name: "Text import",
    description: "Server text-import",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 16), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 20), "D"),
    lane: "charlesMadigen"
},
{
    eventId: 7,
    name: "TabIndex enhancements",
    description: "Enhance formItem tabindex handling",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 9), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 11), "D"),
    lane: "kaiKong"
},
{
    eventId: 8,
    name: "Reify skin",
    description: "Skinning changes",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 3), "D"),
    lane: "shellyFewel"
},
{
    eventId: 9,
    name: "DataSource Transaction-handling",
    description: "This canvas is styled by color settings on the CalendarEvent",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 2), "D"),
    lane: "tamaraKane",
    // green header (and headerBorder) with white text, on lighgreen body with darkgreen text and border
    headerTextColor: "white",
    headerBackgroundColor: "green",
    headerBorderColor: "green",
    textColor: "darkgreen",
    borderColor: "darkgreen",
    backgroundColor: "lightgreen"
},
{
    eventId: 10,
    name: "New Samples",
    description: "Add 20 samples for the following new features: ...",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 4), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 20), "D"),
    lane: "tamaraKane"
},
{
    eventId: 11,
    name: "Localization",
    description: "Extend i18n support",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 9), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 14), "D"),
    lane: "darcyFeeney"
},
{
    eventId: 12,
    name: "New Language Packs",
    description: "Add these 4 new language packs: ...",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 16), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 18), "D"),
    lane: "darcyFeeney"
},
{
    eventId: 13,
    name: "ComponentXML",
    description: "Add the following features and update documentation: ...",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 5), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 11), "D"),
    lane: "shellyFewel"
},
{
    eventId: 14,
    name: "TileGrid",
    description: "This canvas is styled by color settings on the CalendarEvent",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 14), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 19), "D"),
    lane: "shellyFewel",
    // orange header with darkorange headerBorder and black text, on yellow-ish body with darkorange border and darkgreen text
    headerTextColor: "black",
    headerBackgroundColor: "orange",
    headerBorderColor: "darkorange",
    textColor: "darkgreen",
    borderColor: "darkorange",
    backgroundColor: "#ffffcc"
},
{
    eventId: 15,
    name: "Dev Meeting",
    description: "This canvas is styled by a custom CalendarEvent.styleName",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 1), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 1), "D"),
    lane: "charlesMadigen",
    styleName: "testStyle",
    canEdit: false
},
{
    eventId: 16,
    name: "Dev Meeting",
    description: "This canvas is styled by a custom CalendarEvent.styleName",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 8), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 8), "D"),
    lane: "charlesMadigen",
    styleName: "testStyle",
    canEdit: false
},
{
    eventId: 17,
    name: "Dev Meeting",
    description: "This canvas is styled by a custom CalendarEvent.styleName",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 15), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 15), "D"),
    lane: "charlesMadigen",
    styleName: "testStyle",
    canEdit: false
},
{
    eventId: 18,
    name: "Oracle enhancements",
    description: "Add the following 11g-specific enhancements: ...",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 7), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 9), "D"),
    lane: "garretMonroe"
},
{
    eventId: 19,
    name: "Client export",
    description: "Excel export alterations",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 11), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 14), "D"),
    lane: "garretMonroe"
},
{
    eventId: 20,
    name: "Record Components",
    description: "New ListGrid recordComponent modes: ...",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 16), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 20), "D"),
    lane: "garretMonroe"
},
{
    eventId: 21,
    name: "SQLDataSource",
    description: "Enhancements to customSQL support",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 2), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 4), "D"),
    lane: "kaiKong"
},
{
    eventId: 22,
    name: "includeFrom",
    description: "Update support via includeFrom",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 6), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 8), "D"),
    lane: "kaiKong"
},
{
    eventId: 23,
    name: "FileItem",
    description: "Add milti-file upload support",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 14), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 16), "D"),
    lane: "kaiKong"
},
{
    eventId: 24,
    name: "Doc viewer",
    description: "Enhance documentation viewer with these additional syntax-hilites: ...",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 18), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 19), "D"),
    lane: "kaiKong"
}
,{ eventId: 25, name: "25", description: "desc",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 1), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 2), "D"),
    lane: "dev10"
}

,{ eventId: 27, name: "27", description: "desc",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 1), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 2), "D"),
    lane: "dev11"
}
,{ eventId: 28, name: "28", description: "desc",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 1), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 2), "D"),
    lane: "dev12"
}

,{ eventId: 30, name: "30", description: "desc",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 1), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 2), "D"),
    lane: "dev13"
}
,{ eventId: 31, name: "31", description: "desc",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 1), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 2), "D"),
    lane: "dev14"
}
,{ eventId: 32, name: "32", description: "desc",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 1), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 2), "D"),
    lane: "dev15"
}
,{ eventId: 33, name: "33", description: "desc",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 1), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 2), "D"),
    lane: "dev16"
}
,{ eventId: 34, name: "34", description: "desc",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 1), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 2), "D"),
    lane: "dev17"
}
,{ eventId: 35, name: "35", description: "desc",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 1), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 2), "D"),
    lane: "dev18"
}
,{ eventId: 36, name: "36", description: "desc",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 1), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 2), "D"),
    lane: "dev19"
}
,{ eventId: 37, name: "37", description: "desc",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 1), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 2), "D"),
    lane: "dev20"
}
,{ eventId: 38, name: "38", description: "desc",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 1), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 2), "D"),
    lane: "dev21"
}
,{ eventId: 39, name: "39", description: "desc",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 1), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 2), "D"),
    lane: "dev25"
}
,{ eventId: 39, name: "event 39 for dev 35", description: "event for dev 35",
    startDate: isc.DateUtil.getStartOf(new Date(_year, _month, _start + 1), "D"),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 2), "D"),
    lane: "dev35"
}




];
var developers = [
    { name: "charlesMadigen", title: "Charles Madigen" },
    { name: "tamaraKane", title: "Tamara Kane" },
    { name: "darcyFeeney", title: "Darcy Feeney" },
    { name: "kaiKong", title: "Kai Kong" },
    { name: "shellyFewel", title: "Shelly Fewel" },
    { name: "garretMonroe", title: "Garret Monroe" }
 , { name: "dev10", title: "dev10" }
 , { name: "dev11", title: "dev11" }
 , { name: "dev12", title: "dev12" }
 , { name: "dev13", title: "dev13" }
 , { name: "dev14", title: "dev14" }
 , { name: "dev15", title: "dev15" }
 , { name: "dev16", title: "dev16" }
 , { name: "dev17", title: "dev17" }
 , { name: "dev18", title: "dev18" }
 , { name: "dev19", title: "dev19" }
 , { name: "dev20", title: "dev20" }
 , { name: "dev21", title: "dev21" }
 , { name: "dev22", title: "dev22" }
 , { name: "dev23", title: "dev23" }
 , { name: "dev24", title: "dev24" }
 , { name: "dev25", title: "dev25" }
 , { name: "dev26", title: "dev26" }
 , { name: "dev27", title: "dev27" }
 , { name: "dev28", title: "dev28" }
 , { name: "dev29", title: "dev29" }
 , { name: "dev30", title: "dev30" }
 , { name: "dev31", title: "dev31" }
 , { name: "dev32", title: "dev32" }
 , { name: "dev33", title: "dev33" }
 , { name: "dev34", title: "dev34" }
 , { name: "dev35", title: "dev35" }


];

var _calStart = isc.DateUtil.getStartOf(new Date(2020, 6, 4), "W");
var _calEnd = _calStart.duplicate();
_calEnd.setDate(_calEnd.getDate() + 21);

isc.Timeline.create({
    ID: "timeline",
    height: 475,
    autoDraw: false,
    startDate: _calStart,
    endDate: _calEnd,
    data: events2,
    lanes: developers,
    headerLevels: [ { unit: "week" }, { unit: "day" } ],
    laneFields: [ { name: "title", title: "Developer", minWidth: 120, autoFitWidth: true } ],
    canEditLane: true,
    showEventDescriptions: false,
    columnsPerPage: 20
});

isc.VLayout.create({
   ID: "layoutTimeline",
   height: "100%",
   width: "100%",
   members: [timeline]
})

isc.Button.create({
   ID: "ptlBtn",
   title: "print",
   click: function (){
     isc.Canvas.showPrintPreview(layoutTimeline, null, {
            printButtonTitle : "print",
            title : "Preview"
    });
   }
})

**paulwilhelm** · 18 Jul 2023, 06:38

the snippets show the timeline (tl.png) and the preview(tlp.png)

Attached Files

**Isomorphic** · 18 Jul 2023, 07:16

Which version of SmartClient are you using?

**paulwilhelm** · 19 Jul 2023, 00:02

v13.0p_2023-07-12/Pro Development Only

**Isomorphic** · 19 Jul 2023, 01:55

We do see events start to render a little above the latter lanes, in print output for a Timeline with lots of lanes - but we only see that when either the browser or the OS is zoomed. In our testing, everything looks right in Chrome/FF on Windows, with our stock skins and no browser or OS zoom.

If you are certain you have no zoom in place, a guess might be that you've applied custom styling to your EventCanvases that includes extra-thick borders or similar - something like that might point to a more specific framework positioning bug.

If it turns out you *do* have browser or OS zoom, we'll keep a note to look into the issue but it won't be high-priority, so may take a while to get to.

**paulwilhelm** · 19 Jul 2023, 02:14

Yes, I did tests on 4K an 5K displays were a zoom is configured (150%, Windows recommendation) .
Thanks, it does not have high priority to me because most end users do not use 4k or 5k displays.

**Isomorphic** · 21 Jul 2023, 04:45

Quick follow-up - we've made a change that should address this print-content offset issue with either OS or browser zoom.

Please retest with a build dated July 22 or later.

Announcement

showPrintPreview timeline wrong alignment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment