Vue & List margin

Hi,

i wanted to create a simple test app which has only one simple list. But the list always has the margin-top sett to 35px. Why does this happen?

Here is my code:

<f7-panel left cover>
  <f7-view id="left-panel-view">
    <f7-page>
      <f7-navbar title="Left Panel"></f7-navbar>
      <f7-block strong>
        <p>Left panel content goes here</p>
      </f7-block>
      <f7-block-title>Load page in panel</f7-block-title>
      <f7-list>
        <f7-list-item link="/about/" title="About"></f7-list-item>
        <f7-list-item link="/form/" title="Form"></f7-list-item>
      </f7-list>
      <f7-block-title>Load page in main view</f7-block-title>
      <f7-list>
        <f7-list-item link="/about/" title="About" view="#main-view" panel-close></f7-list-item>
        <f7-list-item link="/form/" title="Form" view="#main-view" panel-close></f7-list-item>
      </f7-list>
    </f7-page>
  </f7-view>
</f7-panel>

<!-- Main View -->
<f7-view id="main-view" main>

    
    <f7-page>
        <f7-navbar>
            <f7-nav-left>
              <f7-link icon-if-ios="f7:menu" icon-if-md="material:menu" panel-open="left"></f7-link>
            </f7-nav-left>
            <f7-nav-title>Flocke</f7-nav-title>
            <f7-nav-right>
              <f7-link icon-if-ios="f7:menu" icon-if-md="material:menu" panel-open="right"></f7-link>
            </f7-nav-right>
          </f7-navbar>
  <f7-list>
      <f7-list-item title="Item 1"></f7-list-item>
      <f7-list-item title="Item 2"></f7-list-item>
    </f7-list>
  </f7-page>
</f7-view>

I suspect it is to match iOS design guidelines, which would specify space/padding between elements in a view.

You could always over-ride it with your own CSS.

1 Like