Adjusting Size of Select Button makes the icon bleed over

What are you trying to do? I would like to change the size of the select button. But when I change it from the size option of the button itself when it is placed in ap roject, the icon doesn’t fit within the component and bleeds out of it.

What have you tried so far?
I’ve gone in and changed the size of the component from within the component itself; but i’m not sure if that is how or what should be done to adjust it.

Relevant links:

Hi @alyssa_feola

Thanks for reporting this issue. We will investigate and fix it accordingly.

1 Like

Does the size of the popover have to be the exact size of the button or is it possible to have it be larger than the button?

Specifically, I’m trying to have the select button be size of 160px; but one of the drop down text is something like “Play Cool Challenge Now” and I’d want the dropdown to hug that text; but it is getting cut off because it is longer than 160px

As per my understanding of your request, you want to have a combination of fixed width i.e 160px by default but then switch to Hug content when a particular option is selected. I don’t think it’s possible. It could be one of them and either of them have their trade-offs from UI perspective.

Setting it to Hug Content will make the button width random based on the selected option, which might not be ideal because of the layout shift.

You can increase the fixed width to handle the large text but it will create empty space for shorter text and default select size.

I think an alternative approach you can do is to add a tooltip on the selected text in the Select dropdown.

Sorry; I don’t think my explanation was good at all; basically, I’m wondering how I would make something that looks like this; the button is smaller than the popout; would it not be a select component to use in that case?

Thanks for the screenshot. I would use Popover component for this use case.

1 Like

would I still use this component if I wanted it to open on mouseover/hover or would a different dialog be better for that?

I think Popover would be better

1 Like

sorry; lazy web here … how do you get it to automatically popout with mouse over?