Calcite Components - How can I resize the text and thumbnail within a tip manager component?

[ArianaBernal]

Hi I have been trying to resize the the thumbnail which is in the tip manager calcite component. I have checked the examples I could find and the documentation available for tips, tip groups, and tip managers and couldn't find any settings for resizing or controlling this element.

Calcite Tip - https://developers.arcgis.com/calcite-design-system/components/tip/#sample

Calcite Tip manager - https://developers.arcgis.com/calcite-design-system/components/tip-manager/

[KittyHurley]

Hi @ArianaBernal - thanks for reaching out! The thumbnail can be altered with CSS.

Here's a Codepen example setting the height and width to all thumbnails residing inside a tip. You could also add in constraints to those in a tip group, or set a class or ID to a few or individual tip thumbnails as well.

[ArianaBernal]

Thanks for your help @KittyHurley. This does fix the resizing of the image element but when the image is made larger it just starts to scroll. I have been trying to resize the group which holds the content itself. modifying the tip group and searching in the dev tools to modify the set classes but this does not seem to affect it. Do you know if this part can also be modified?

[KittyHurley · Accepted solution]

---

@ArianaBernal wrote:

Thanks for your help @KittyHurley. This does fix the resizing of the image element but when the image is made larger it just starts to scroll. I have been trying to resize the group which holds the content itself. modifying the tip group and searching in the dev tools to modify the set classes but this does not seem to affect it. Do you know if this part can also be modified?

---

You could use the --calcite-tip-manager-height CSS variable to modify the height - updated the Codepen sample to include the CSS variable.

There's also a new page available with some context on web concepts, which includes some information on CSS variables and other concepts for some more in-depth background and context.

[ArianaBernal]

Perfect! Thanks so much!