Responsive widths for <RecordCard />s?

[Kamille_Parks]

I can’t seem to get <RecordCard />s to play nicely as flexbox child or reliably fit 100% width of its container. The default width of a record card is set to 568px wide, which wouldn’t be much of an issue if this were taken care of in the class applied to record cards. Instead, the width (and height) are set with inline styling.

Since the width default property won’t take “100%” or “auto” as valid inputs, I can’t use either of those. Setting width to {-1} kind of works by removing the inline styling and getting it to fill its container, but all the record’s fields disappear:

I could apply a class with width set to “auto!important” to override the inline styling, but “!important” is not generally good practice.

Anyone have some advice?

[Mike_Pennisi]

My experience matches yours: the <RecordCard> component doesn’t seem to be responsive. At the moment, it relies on a numeric value of the width prop to determine its contents. Maybe the Blocks SDK will be enhanced so that the component is responsive some day, but in the mean time, you might try using an open source React component to get what you need.

react-resize-detector is MIT-licensed and widely-used:

npm

react-resize-detector

React resize detector

After a bit of experimentation, it looks like it may be what you’re looking for:

<ReactResizeDetector handleWidth>
  {({width}) => <RecordCard width={width} record={record} />}
</ReactResizeDetector>

The handleWidth and handleHeight props only control the events which trigger re-rendering. The <ReactResizeDetector> component always sets both the width and the height of its children. That’s why the example above includes an arrow function: it allows you to pass along the width to the <RecordCard> component and ignore the height. (And if you ever need it, this also gives you an opportunity to modify the value–e.g. width={width*.5} for “50% of the available space.”)

[Kamille_Parks]

Thanks for the recommendation. I’m a little weary of importing another component (my block already uses a two), but if push comes to shove I’ll use this.

I hope the dev team makes RecordCard responsive at some point.

[Mike_Pennisi]

I also made a custom solution, and I can share that if it’s preferable. I recommended an open source module because it’s almost certainly more robust than mine (judging by its popularity and a quick review of its source).

Can you say more about your reluctance to use three components?

[Kamille_Parks]

I’m sure the block would run just fine with a third component, I just don’t want to reinvent the wheel. This isn’t a super critical part of the block, and I don’t want get in the habit of importing a new components to fix each little issue I find along the way.

[Rupert_Hoffsch1]

Three years later this hasn't changed unfortunately 😕