Skip to content

iOS: sheet modal misses top margin when having toolbar #4370

Description

@femto-code
  • Framework7 version: 9.0.3
  • Platform and Target: Chrome Browser, PWA/WebApp in iOS style mode

Describe the bug

When adding a bottom sheet with a toolbar at the top, the iOS layout misses a top margin, see the screenshot and code below.

To Reproduce

Steps to reproduce the behavior:

  1. Create a new Framework7 app
  2. Add a bottom sheet
  3. Add a toolbar
  4. See error on iOS theme

Expected behavior

I expect both themes to show toolbar properly.

Actual Behavior

While Android works fine, iOS theme shows missing top margin.

Screenshots

iOS theme:

Image

MD theme:

Image

Additional context

The HTML markup used is as follows:

<template>
    <div class="sheet-modal height-auto">
        <div class="toolbar">
            <div class="toolbar-inner">
                <div class="left margin-left-half">Neuen Ort erstellen</div>
                <div class="right">
                    <a class="link" @click="${discardLocation}">Abbrechen</a>
                </div>
            </div>
        </div>
        <div class="sheet-modal-inner">
            <div class="page-content">
                <!-- <div class="block-title">Neuen Ort erstellen</div> -->
                <form class="form-store-data" id="formLocationEdit">
                    <div class="list list-strong-ios list-dividers-ios inset-ios margin-top-half margin-bottom-half">
                        <ul>
                            <li class="item-content item-input item-input-with-info">
                                <div class="item-inner">
                                    <div class="item-input-wrap">
                                        <input type="text" placeholder="Hallen- oder Raum-Name" name="locName" required validate />
                                        <span class="input-clear-button"></span>
                                        <div class="item-input-info">Name des Ortes</div>
                                    </div>
                                </div>
                            </li>
                            <li class="item-content item-input item-input-with-info">
                                <div class="item-inner">
                                    <div class="item-input-wrap">
                                        <input type="text" placeholder="Musterstr. 12" name="locStreet" required validate />
                                        <span class="input-clear-button"></span>
                                        <div class="item-input-info">Straße und Hausnummer</div>
                                    </div>
                                </div>
                            </li>
</ul>
</div>

Activity

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions