Почему появляется отступ при нажатии на кнопку?

Question

Евстегней Чачлык @onime_ne_smotru

Почему появляется отступ при нажатии на кнопку?

использую vuetify
почему происходит такое?
то есть при нажатии на кнопку обновления появляется полоса справа(и снизу)
изза этого можно зумиться на телефоне(хотя это отключено)

на пк версии все нормально

Второй скрин код который выполняет кнопка
ничего страшного там вроде нет

Нажимаю на кнопку справа слева

как мы видим появляется контент.
но и кнопки уже сьехали немного вниз.(Это тоже проблема)
Если сделать свайп влево то появится белая полоса скраю.
появляется только после нажатия на эту кнопку.

вот что выполняет данная кнопка

Вопрос задан более трёх лет назад
162 просмотра

2 комментария

Подписаться 1 Средний 2 комментария

Игорь @IgorPI

Можете привести код разметки?

Написано более трёх лет назад

Евстегней Чачлык @onime_ne_smotru Автор вопроса

Игорь,
Это основной компонент

<template style="width: 100vw">
    <v-app style="text-align: center">
        <v-layout>
            <v-flex>
                <v-toolbar color="indigo" dark style="border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;">
                    <v-toolbar-title>Сервис от Чачлыка</v-toolbar-title>
                    <v-spacer></v-spacer>
                </v-toolbar>
                    <v-btn fixed dark fab bottom right
                            color="pink"
                            @click="triggerFileUploads">
                        <v-icon>mdi-plus</v-icon>
                    </v-btn>
                        <v-btn fixed dark fab bottom left
                                color="pink"
                                @click="getAllPhotos">
                            <v-icon>mdi-refresh</v-icon>
                        </v-btn>
                    <input ref="fileInput"
                           type="file"
                           style="display: none"
                           accept="image/*"
                           @change="onFileChange">
                    <div class="bg-light" style="border-radius: 25px">
                        <v-row>
                            <v-col v-for="(photo, index) in photos" :key="index">
                               
                            </v-col>
                        </v-row>
                    </div>
            </v-flex>
        </v-layout>
    </v-app>
</template>

<style>
  .center-pic{
      display:block;
      margin:auto;
  }

  body {
      width: 100vw
  }

</style>

Главный хтмл файл

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--    <meta name="viewport" content="width=device-width,initial-scale=1.0">-->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>test2</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.x/css/font-awesome.min.css" rel="stylesheet">
    <style>
      .modal-open {
        padding-right: 0 !important;
      }
    </style>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but test2 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Написано более трёх лет назад

Ответы на вопрос 1

6 комментариев

Ваш ответ на вопрос

Вопрос закрыт для ответов и комментариев

Потому что уже есть похожий вопрос.

Похожие вопросы

Laravel

+2 ещё

Средний
Как разместить приложение nuxt 3 в режиме SPA на сервер без node.js?
- 1 подписчик
- вчера
- 54 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- вчера
- 183 просмотра
2

ответа
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- 23 нояб.
- 107 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 23 нояб.
- 107 просмотров
0

ответов
Vue.js

Простой
Как прокинуть данные из одного дочернего компонента в другой?
- 1 подписчик
- 22 нояб.
- 106 просмотров
1

ответ
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 22 нояб.
- 78 просмотров
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 22 нояб.
- 58 просмотров
1

ответ
Vue.js

Простой
Как игнорировать клик на компоненте?
- 1 подписчик
- 22 нояб.
- 70 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 22 нояб.
- 65 просмотров
1

ответ
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- 22 нояб.
- 101 просмотр
1

ответ
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Trainee - IT Support

move2usajobs LLC • Лос-Анджелес

от 2 000 до 4 000 $

Задеплоить проекты на сервер

25 нояб. 2024, в 21:54

20000 руб./за проект

Разработать страницу для сайта на WordPress

25 нояб. 2024, в 21:39

3000 руб./за проект

Доработать сайт на strapi

25 нояб. 2024, в 21:34

7000 руб./за проект

Игорь,
Это основной компонент
<template style="width: 100vw"> <v-app style="text-align: center"> <v-layout> <v-flex> <v-toolbar color="indigo" dark style="border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;"> <v-toolbar-title>Сервис от Чачлыка</v-toolbar-title> <v-spacer></v-spacer> </v-toolbar> <v-btn fixed dark fab bottom right color="pink" @click="triggerFileUploads"> <v-icon>mdi-plus</v-icon> </v-btn> <v-btn fixed dark fab bottom left color="pink" @click="getAllPhotos"> <v-icon>mdi-refresh</v-icon> </v-btn> <input ref="fileInput" type="file" style="display: none" accept="image/*" @change="onFileChange"> <div class="bg-light" style="border-radius: 25px"> <v-row> <v-col v-for="(photo, index) in photos" :key="index"> </v-col> </v-row> </div> </v-flex> </v-layout> </v-app> </template> <style> .center-pic{ display:block; margin:auto; } body { width: 100vw } </style>

Главный хтмл файл
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">  <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>test2</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"> <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.x/css/font-awesome.min.css" rel="stylesheet"> <style> .modal-open { padding-right: 0 !important; } </style> </head> <body> <noscript> <strong>We're sorry but test2 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div>  </body> </html>

Answer 1 · 2019-11-12 10:45:40

bpGusar @bpGusar

*spoiler*

дело видимо в фокусе, синяя граница, попробуй со стилями поиграть

Ответ написан более трёх лет назад

6 комментариев

Почему появляется отступ при нажатии на кнопку?

Вопрос закрыт для ответов и комментариев

Минуточку внимания

Войдите на сайт