topic Re: Calcite Components - How can I resize the text and thumbnail within a tip manager component? in Calcite Design System Questions

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

ArianaBernal — Tue, 15 Nov 2022 19:21:37 GMT

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/

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

KittyHurley — Tue, 15 Nov 2022 20:00:57 GMT

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.

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

ArianaBernal — Wed, 16 Nov 2022 16:35:12 GMT

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?

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

KittyHurley — Wed, 16 Nov 2022 17:00:49 GMT

@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.

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

ArianaBernal — Wed, 16 Nov 2022 17:04:30 GMT

Perfect! Thanks so much!