Set minimum size of XBlock

[davwheat]

I can't find a way to set the minimum size of the content of an XBlock.

Trying to use min-width on either the XBlock, its direct child, or any nested children results in the XBlocks overlapping.

Is there any easy way to implement a minimum width for an XBlock?

[nikitaeverywhere]

Hello! Thank you for reaching out.

XBlocks in XMasonry are designed to always be flexible in width. XMasonry calculates the number of columns per available space and only then it renders XBlocks according to the available size (divided by the number of columns). So the width of the XBlock always varies.

If you want to limit your XBlocks in size, you need to do it with a nested block, where max-width should be no more than 100% to avoid such visual problems. Anyway, this will lead to strange visual results.

Hope this helps! If not - let me know or provide a simple codepen with what you're trying to achieve.

[davwheat]

The issue is that, by setting the max width to 100%, the minimum is ignored and the XBlocks become too small for their content when shrinking the page.

See this page for an example: https://gcse-revision-site.firebaseapp.com/subjects/science/biology/topics/topic-3

You can see that the XBlocks become too small, causing the card actions to span two lines:

[nikitaeverywhere]

@davwheat I see. Take working with XMasonry like this: you can't control the XBlock's width and you need to adjust to it. This is natural if you would think about mobile devices, as they're just 1-column masonry layout and there's no way to adjust the screen width. So you have to figure out how to fit elements inside XBlock, instead of thinking about how to adjust the size of XBlock.

[nikitaeverywhere]

In your particular case with "card actions" spanning across two lines, I think you can use flexbox with white-space: nowrap (also without the padding). The resulting effect would be acceptable on any device if the font size is fixed.

[davwheat]

I decided to make the button go onto the next line below a certain screen size in the end

On Thu, 16 Jan 2020, 19:57 Nikita Savchenko, notifications@github.com wrote:

In your particular case with "card actions" spanning across two lines, I think you can use flexbox with white-space: nowrap (also without the padding), and the effect would be acceptable on any device if the font size is fixed.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ZitRos/react-xmasonry/issues/16?email_source=notifications&email_token=ABYQJZRHCSQ2KXRZVAWQ7R3Q6C34HA5CNFSM4KHZPRZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEJFK4PQ#issuecomment-575319614, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABYQJZRXJYR5DYHWJCN6FCDQ6C34HANCNFSM4KHZPRZA .

[nikitaeverywhere]

Great! Let me know if you have any questions.