Align oh-grid-col in oh-grid-row

Hey community,

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:

This is my code:

- component: oh-grid-row
  config: {}
  slots:
	default:
	  - component: oh-grid-col
		config:
		  width: "50"
		  xlarge: "10"
		slots:
		  default:...
	  - component: oh-grid-col
		config:
		  width: "50"
		  xlarge: "10"
		slots:
		  default:
			- component:...
	  - component: oh-grid-col
		config:
		  width: "50"
		  xlarge: "10"
		slots:
		  default:
			- component: ...

I believe in the oh-row you can use flex box styling parameters with

- component: oh-grid-row
  config:
    style:
      display: flex
      ... Other flex parameters

OK, tried several configurations like

- component: oh-grid-row
  config:
    style:
      display: flex
    class:
      - justify-content-center
      - align-items-center
      - align-content-center
  slots: ...

or

- component: oh-grid-row
  config:
	style:
	  display: flex
	  justify-content: center
  slots: ...

but I’m not able to overwrite the standard css for a row element. If I inspect the css styles with chrome developer tools for the specific “div” element

<div class="row no-gap">....</div>

I always get following css style:

.row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
    --f7-cols-per-row: 1;
}

I don’t know how to overwrite the standard css.

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:

- component: f7-block
  config:
    style:
      display: flex
      justify-content: center
  slots:
    default:
      - component: oh-grid-row
        config:
          style:
        slots:
          default:
            - component: oh-grid-col
              config:
              slots:
                default:
                  - component: oh-link
                    config:
                      text: One
            - component: oh-grid-col
              config: {}
              slots:
                default:
                  - component: oh-link
                    config:
                      text: Two
            - component: oh-grid-col
              config: {}
              slots:
                default:
                  - component: oh-link
                    config:
                      text: Three


The oh-gird-row expands to the width of its container so just put this extra container between it and the card.

If you need even more control than that you can inject direct css into the widget YAML using the stylesheet property:

Note: when using the style sheet property, depending on where you put it in the widget you may need !important on your attributes to get them to override the built-in settings.

HI @JustinG ,

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.

Have you found any solution for your problem yet? I’m also looking kind of for the same thing but haven’t found anything that works for me yet.

No, I haven’t found a solution.

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:

config:
  stylesheet: >
    .row {
      justify-content: center;
    }
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config:
                  width: "50"
                  xlarge: "10"                
                slots:
                  default:
                    - component: oh-link
                      config:
                        iconF7: ant
              - component: oh-grid-col
                config: 
                  width: "50"
                  xlarge: "10"                
                slots:
                  default:
                    - component: oh-link
                      config:
                        iconF7: airplane
              - component: oh-grid-col
                config:
                  width: "50"
                  xlarge: "10"                
                slots:
                  default:
                    - component: oh-link
                      config:
                        iconF7: ant
masonry: null
grid: []
canvas: []

Produces:

1 Like

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

BR Uwe

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.

Thanks, it works :slight_smile:
I will create a- new thread with my idea, I need a jump start.