Skip to content

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

@femto-code

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions