Sizing issues

[vresetnikov]

Hello,

Thank you for creating chakra-react-select. I have tried using it today, however right out of the box I have noticed some sizing differences when compared to the traditional Chakra's Select. Here is an example:

Element 1. is the Chakra's original select input (no react-select plugged in) and 2. is chakra-react-select. Neither of them contain any additional styles, they are completely raw.

Could you kindly tell me how can I bring the chakra-react-select component (2.) to look like the Chakra's original select input (1.), please?

Thank you very much

[csandman]

EDIT: Here's my real answer:

NOTE: There was one issue I noticed (#202) while making this example, a default style from Chakra's theme that was causing the MenuList to be cut off at the end if it was below a certain width. You should update to v4.2.6 to avoid this issue!

Ah ok, I see what your problem is then! Well, both problems actually.

1. When using a table layout, the size of each column is determined by its content. All 3 of the headers you're using don't have exact widths so the sizing for the columns will instead be based on their body content (or something along those lines, tables are weird), and because your third column has the smallest content, that Select get's shrunk.

Here's an example of what yours would look like if your last column had the largest content:

The easiest fix for this is to use the table-layout: fixed CSS property on the table itself to enforce that all columns are the same size. table-layout is not a CSS rule that Chakra has a prop for so the easiest way to accomplish this would be to use the sx prop:

<Table sx={{ tableLayout: "fixed" }}>

2. All of the weird alternative styles you're talking about are coming from Chakra's Th component, which I assume you're wrapping theSelect with. They customize the line-height, font-weight, letter-spacing, text-transform, and font-family rules, so the easiest way to prevent this is to reset all of those props to their defaults at the container level (using the chakraStyles prop):

<Select
  chakraStyles={{
    container: (provided) => ({
      ...provided,
      textTransform: "none",
      fontWeight: "normal",
      letterSpacing: "normal",
      fontFamily: "body",
      lineHeight: "base",
    }),
  }}
/>

This did however bring up a question for me though- should these props be reset by default on this container? I'm not sure if that would be the expected behavior for most users, but it could be. Also, it's possible that some users are relying on these styles to be inherited so adding these defaults could be a breaking change for some. I'm going to leave it as is for now while I think about it more but in the mean time, it's easy enough to override these styles using this strategy.

Here's an example of what I think you want the whole thing to look like: https://codesandbox.io/s/chakra-react-select-horizontal-layout-in-a-table-kh22eq?file=/example.js

---

Sure I can help with that, but I need a bit more info on the structure of your components to really help you accurately.

It's possible just adding width: 100% to chakra-react-select's wrapping component would do the trick, as Chakra's native Select has a wrapper with that style. This can be done with the chakraStyles prop:

<Select
  chakraStyles={{
    container: (provided) => ({ ...provided, width: "100%" }),
  }}
/>

This worked in an example I tried because they're all just wrapped in one parent Flex component, but your setup could be different. Here's a working example: https://codesandbox.io/s/chakra-react-select-horizontal-layout-vrjvtm?file=/example.js

If that doesn't do the trick then I'd need a minimal reproduction of how your components are set up to do any more. You can make one of those with one of the provided templates: https://codesandbox.io/s/chakra-react-select-vsvr0?file=/example.js

[vresetnikov]

Hello,

Thank you very much for your prompt response and well-explained solutions. Unfortunately, the width setting did not cure the problem. I think the problem is located somewhere else, as you can see the whole select input looks strange and out of shape. For instance, for some reason the placeholder is uppercase, the font size and style are wrong, even though the element resides in the same scope as all the other inputs next to it.

I apologize for not providing an example, the elements are loaded in the react-table, so it is difficult for me to reproduce the problem. I think in order for me to be able to transfer and illustrate the problem into CSB would require me to know what the problem is, but that's the core issue - I don't know what this wrong style is a symptom of and where to begin to address it.

If it's of any help, I also use chakra-react-select in forms and there it automatically loads in a correct and expected default appearance.

[csandman]

I figured out what's going on and updated my original answer accordingly, let me know if that fixes it or you have any other issues!

[vresetnikov]

Thank you very much, your updated answer has completely solved the problem.

Regarding your question - I don't think it is the fault of chakra-react-select per se as it is probably difficult to account for all the use cases.