Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Responsive layout container #68

Open
skrat opened this issue Oct 15, 2015 · 4 comments · May be fixed by #312
Open

Responsive layout container #68

skrat opened this issue Oct 15, 2015 · 4 comments · May be fixed by #312

Comments

@skrat
Copy link

skrat commented Oct 15, 2015

I'm trying to figure out how to make a list item, that displays it's children horizontally when there's enough space (desktop), but wraps them into multiple "lines" when there isn't (mobile). Am I missing something or is this simply not possible with the built-in h-box / v-box? Is re-com missing some layout component that would do this for me? I'm new to bootstrap but I tried to use row and col-md-4 classes to no avail. Apparently they don't work when I use input-text components.

@mike-thompson-day8
Copy link
Contributor

@skrat h-box and v-box are a layer over flexbox but they don't have direct support for wrapping. It hasn't ever been on our radar.

Untested: you might be able to add a flexbox :style to an h-box like {:flex-wrap: "wrap"}.

@metasoarous
Copy link

I just came up against this as well. It seems that adding :style {:flex-wrap "wrap"} doesn't work, because h-box and v-box use :flex-flow "row|column no-wrap", and :flex-flow takes precedence over a separate :flex-wrap declaration.

Of course, it's possible to pass :style {:flex-flow "row|column wrap"} as appropriate, but this feels a little silly; h-box and v-box already have row|column specified, so we're duplicating work there. Admittedly, it's not a lot of work, but it makes it more cumbersome to pass around style maps that you might want to share between h-box and v-box components.

I see two options here (aside from not doing anything and letting us hack around it):

  • Add a :wrap option to these components
  • Have v-box and h-box specify separate :flex-direction and default :flex-wrap separately, so that the user can override :flex-wrap through the :styles map, as you suggest.

While the former might look nice, the latter might lead to better composability using style maps.

@Gregg8 Gregg8 added the styling label Nov 24, 2016
@jeaye
Copy link

jeaye commented Sep 6, 2018

This is still an issue and I vote for having :wrap as a keyword argument for these layout components.

@superstructor superstructor added this to the 2.12.0 milestone Jan 19, 2021
@superstructor superstructor removed this from the 2.12.0 milestone Apr 8, 2021
@MawiraIke MawiraIke linked a pull request Jan 4, 2022 that will close this issue
@MawiraIke
Copy link
Contributor

I have created a PR #312 which should fix this issue. The PR allows users to use :wrap keyword in h-box and v-box.
In the case that :wrap keyword is not passed to re-com, the default of nowrap remains to avoid breaking changes for current use cases.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants