vis.js Timeline does not apply CSS style to show the images of the items in the right size

26 Views Asked by At

A question for vis.js timeline (Setup: Mac Monterey 12.5.1, Chrome 122.0.6261.94 Official Build(arm64).

I try to set the size of an image in the "title" of all items. For this, I use HTML code. One item looks like this:

var items = new vis.DataSet([
    {
    editable: { updateTime: true, updateGroup: false, remove: true }, 
    id: 1,
    className: "blue",
    content: '<a href="http://www.example.com" target="_blank">birthdate () &#10148;  (0 years old)</a>',
    title: '<a href="../static/images/image-not-found-icon.png" target="_blank"><img style="width: 100px;height: 100px;" src="../static/images/image-not-found-icon.png"></a>',
    start: "1989-03-17",
    end: null,
    type: "point",
    },

This results in the original image in big size (stylesheet is not applied). Another HTML is working (text, link, etc). In reality, I am using CSS files for the same style, but even inline HTML gives the same result. I have tried several variations like below, but all show the original image in a big size. Any idea how to fix this? (Is this a bug, or did I make some mistakes?)

<div style="width: 100px;height: 100px;"><a href="../static/images/image-not-found-icon.png" target="_blank"><img src="../static/images/image-not-found-icon.png"></a></div>

<a href="../static/images/image-not-found-icon.png" target="_blank"><img class="small_thumnbnail" src="../static/images/image-not-found-icon.png"></a>

<div ><a href="../static/images/image-not-found-icon.png" target="_blank"><img style="width: 100;height: 100;" src="../static/images/image-not-found-icon.png"></a></div>

By the way, the hyperlink and text are properly displayed for the content of the item.

Many thanks!

0

There are 0 best solutions below