Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

iOS: sheet modal misses top margin when having toolbar

Abierto
#4,370 1 comentario 0 reacciones 0 asignados Ver en GitHub

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

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:

  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>
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

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de framework7io/framework7

Todos los issues de framework7io/framework7

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.