if I put “small” oh-grid-col components into a oh-grid-row, the cols a placed into the row with much space around them. Is there any way to align the cols to left, right or center without adding additional empty cols to fill the free space? I tried to add some css classes from this f7 documentation to the row config, but I didn’t get it running:
It’s true there’s a lot of extra elements and stylings already built in to the oh-grid- components. In most cases I just use the f7-row and f7-col instead so that I have slightly more control. If you really need the features of the oh-grid- pieces then your best bet is just to put the oh-grid-row inside it’s own f7-block with flex display:
thanks for your advice. I forgot to mention, that I want to align the elements in a page, not in a widget. In widgets I also use f7 components to structure my elements. But when I design my pages, I try to be as close to the main ui designer as possible. For this reason I don’t want to use f7 components in this case.
I’m sorry, I thought from your previous post that since you didn’t want to use f7 components you had gotten the stylesheet to work. In this case it is difficult to individually identify rows unless you want to use from of the more advanced selectors, but a basic .row selected should work just fine for everything:
Sorry to jump into this discussion
I’m just learning to write a yaml based widget
Justin, is it possible to post also the part above this config-part:
I want to write a widget with 2 or 3 cols and several rows
I have never before written a website or a widget. But I believe your construct is my solution for my gridbased widget
There is no more to post. That is the entire yaml code. If you paste that into the code tab of a layout page in the editor you should get the exact same output as shown in the image. The grid row and column structure was even created automatically when I pressed Add Block and then Add Row once and Add column three times in the UI design tab before moving over to the code tab. The only parts a I typed in were the column sizes to match the original post, the links to have a visible cue for the columns and the stylesheet to demonstrate how that works.
You can try the same thing just in a widget if you start from an f7-page as the base component, but as I said above, if oy’re building jsut a widget and not a whole page you’ll often get more flexible results if you use the f7-row and f7-col components instead. If you have more detailed questions feel free to start a new thread.