iOS: sheet modal misses top margin when having toolbar
Nadie ha tomado este issue todavía.
Evaluación
- Dificultad
- 3/5
- Tiempo estimado
- 1-2 días
- Aptitud para principiantes
- 48/100
- Tipo de issue
- Error
- Claridad
- Bastante claro
- Estado de actividad
- Tranquilo
- Stack tecnológico
- javascript
- Área
- frontend, mobile-dev
Línea de trabajo
Comienza reproduciendo el marcado de bottom-sheet proporcionado en una nueva aplicación Framework7 usando el modo de estilo iOS y, después, compáralo con la representación de Android/MD. Inspecciona el estilo del sheet modal y de la toolbar responsable del espaciado superior. Se considera terminado cuando la toolbar tiene el margen superior esperado en el modo iOS sin provocar regresiones en el tema de Android.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
- 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>
- Lenguaje dominante
- JavaScript
- Estrellas
- 18.8k
- Forks
- 3.2k
- Métricas de merge de PR
- Sin PR fusionados en 30 d
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de framework7io/framework7
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 68/100
framework7io/framework7#4365 · 1 comentario ·
-
propsHistory Abierto
Dificultad 2/5 1-3 horas Aptitud para principiantes 72/100
framework7io/framework7#4347 · 1 comentario ·
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 64/100
framework7io/framework7#4222 · 3 comentarios ·
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 65/100
framework7io/framework7#4175 · 1 comentario ·
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 65/100
framework7io/framework7#3969 · 3 comentarios ·
Todos los issues de framework7io/framework7
Issues similares
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 70/100
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 75/100
mksglu/context-mode#1200 ·
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 75/100
neondatabase/website#5944 ·
-
module: core
Dificultad 2/5 1-3 horas Aptitud para principiantes 75/100
bigbluebutton/bigbluebutton#25849 ·
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 75/100
jaegertracing/jaeger-ui#4506 ·