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

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 комментариев

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

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

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

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

Node.js

+2 ещё

Средний
Можно ли вернуть помимо статической страницы данные с сервера?
- 1 подписчик
- 5 часов назад
- 73 просмотра
1

ответ
Фронтенд

Простой
На каком языке\и каком фреймворке языка лучше написать онлайн-доску? Что-то типа MIRO, или chattern, или sBoard?
- 1 подписчик
- 8 часов назад
- 72 просмотра
2

ответа
CSS

+1 ещё

Простой
Почему не оборачивается обрезается текст при использовании flex?
- 1 подписчик
- вчера
- 80 просмотров
1

ответ
PHP

+2 ещё

Простой
Как обновить версию стилей в шаблоне Journal для Opencart 3?
- 1 подписчик
- вчера
- 24 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Как сделать такие вырезы у блока на HTML/CSS?
- 1 подписчик
- 06 нояб.
- 193 просмотра
0

ответов
JavaScript

+3 ещё

Средний
Как скачать сайт вместе с фреймами, встроенными в страницу?
- 2 подписчика
- 06 нояб.
- 155 просмотров
0

ответов
HTML

+2 ещё

Простой
Как поставить видео на всю ширину флекс элемента?
- 2 подписчика
- 05 нояб.
- 76 просмотров
0

ответов
HTML

+3 ещё

Простой
Почему третья карточка не становиться в ряд?
- 1 подписчик
- 04 нояб.
- 182 просмотра
1

ответ
HTML

+1 ещё

Простой
Как добиться срабатывания transition для checkbox?
- 1 подписчик
- 02 нояб.
- 90 просмотров
3

ответа
Vue.js

Простой
Как пробросить модификаторы v-model в кастомный инпут?
- 1 подписчик
- 02 нояб.
- 159 просмотров
2

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Trainee - IT Support

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

от 2 000 до 4 000 $

Frontend Developer

Wanted. • Санкт-Петербург

До 180 000 ₽

Cбор LookaLike-Aудитории для косметологического салона

08 нояб. 2024, в 17:52

1500 руб./в час

Проектирование уровней для игры матч3

08 нояб. 2024, в 17:46

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

Картинку в другой размер

08 нояб. 2024, в 17:38

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

Игорь,
Это основной компонент
<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 комментариев

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

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

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

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