iOS: sheet modal misses top margin when having toolbar
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
- Ambito
- frontend, mobile-dev
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:
- Create a new Framework7 app
- Add a bottom sheet
- Add a toolbar
- 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:
MD theme:
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
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Altre issue di framework7io/framework7
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 68/100
framework7io/framework7#4365 · 1 commento ·
-
propsHistory Aperta
Difficoltà 2/5 1-3 ore Idoneità per principianti 72/100
framework7io/framework7#4347 · 1 commento ·
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 64/100
framework7io/framework7#4222 · 3 commenti ·
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 65/100
framework7io/framework7#4175 · 1 commento ·
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 65/100
framework7io/framework7#3969 · 3 commenti ·
Tutte le issue di framework7io/framework7
Issue simili
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 70/100
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100
mksglu/context-mode#1200 ·
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100
neondatabase/website#5944 ·
-
module: core
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100
bigbluebutton/bigbluebutton#25849 ·
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100
jaegertracing/jaeger-ui#4506 ·