Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

iOS: sheet modal misses top margin when having toolbar

Aperta
#4,370 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
48/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
javascript

Direzione di ricerca

Inizia riproducendo il markup bottom-sheet fornito in una nuova app Framework7 usando la modalità di stile iOS, quindi confrontalo con il rendering Android/MD. Ispeziona lo stile della sheet modal e della toolbar responsabile della spaziatura superiore. Il lavoro è completato quando la toolbar ha il margine superiore previsto in modalità iOS senza introdurre regressioni nel tema Android.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

  • 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>
Lingua principale
JavaScript
Stelle
18.8k
Fork
3.2k
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di framework7io/framework7

Tutte le issue di framework7io/framework7

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.