When I create individual cells in the UI, they go horizontally
But if I use an oh-repeater it always goes vertically
Does anyone know how to get around this?
Reminder: please put questions in some other category. Tutorials & Examples is for showcasing your own solutions not requesting other users’
The repeaters will, by default place each generated object in a list as individual list items. This will result in a vertical alignment. Use
fragment: true
in the repeater to strip all of these extra elements and have the repeated objects be elements directly inside the parent container.
fragment doesn’t seem to help. The repeats still go vertically
component: oh-block
config: {}
slots:
default:
- component: oh-grid-cells
config: {}
slots:
default:
- component: oh-repeater
config:
for: rad
sourceType: itemsWithTags
itemTags: RadiatorControl
fragment: true
slots:
default:
- component: widget:RadiatorCell
config:
radiator: =loop.rad.name
it was actually @JustinG and it will gracefully fall back to the raw state if the display state doesn’t exist.
If you explicitly need the raw state use @@name
1 Like
Looks like an interesting post, but I don’t think it answers my question. Unless I missed it
Indeed, seems Yannick quoted into the wrong topic.
Sorry.
Sorry, I lost track of this thread at some point.
Looking more carefully at your issue, you’re going to have a difficult time finding a solution because you’re trying to do this directly on a page. The problem is the way the oh-grid-cells works. It’s not just a single container element, it adds an additional container element (a <div> with the oh-cell-container css class) for each of the elements in its default slot array. The top level div of the grid does use flexbox display so all the oh-cell-container elements are aligned in a row. The oh-cell-container does not use flexbox display but 99% of the time this works just fine because there’s only one component (an oh-cell of some type) inside that oh-cell-container so all the components appear aligned in a row instead.
With the oh-repeater however, even if you set the fragment property, all the child elements of the repeater wind up inside the oh-cell-container not the oh-grid-cells. As a result the repeater child elements are vertically arranged no matter what.
There is a way to force the repeater itself to arrange all its child elements horizontally and that is to use the containerStyle property. This repeater property allows you to apply styles directly to the parent container that the repeater creates for the child elements. And in this case,if you just add flexbox to that container then all the child elements are side-by-side. But this still doesn’t really help you in this case, because, by trying to put the repeater within that oh-gid-cells you are forcing the container the repeater generates to be squeezed inside one column of the grid so if you give that repeater container flex styling it will just squish all the child elements to fit into that one column.
Basically, if you are going to get this to work, I suspect it would have to be a combination of containerStyle settings in the repeater and stylesheet settings in the page that override the way both the oh-grid-cells and oh-cell-container classes currently work. I don’t know the details of your use case, but that sounds to me like far more work than just manually adding the cells.
I have a slightly similar situation (but with standard cards, not cells) where I want them to dynamically be generated on a page with a repeater. My solution to this was simply to build an entire widget that gives me complete control over the alignment and display of the cards and then add that widget to its own whole row on a page.
This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.