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

Question

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Vue.js

Простой
Как добавить иконку в Select ElementPlus?
- 1 подписчик
- час назад
- 28 просмотров
1

ответ
CSS

Простой
Как зафиксировать блок с позиционированием от родительского контейнера?
- 2 подписчика
- 4 часа назад
- 58 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему не вызывается функция с export и без него если в теге script указан type="module"?
- 1 подписчик
- 5 часов назад
- 74 просмотра
2

ответа
JavaScript

+1 ещё

Простой
Как определить величину перекоса transform skew?
- 1 подписчик
- 17 часов назад
- 54 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как исправить прыгающий контент у сайта?
- 2 подписчика
- 18 часов назад
- 136 просмотров
1

ответ
Vue.js

+1 ещё

Средний
Как сделать перегрузку функций TS в Vue?
- 1 подписчик
- 23 часа назад
- 81 просмотр
1

ответ
HTML

+1 ещё

Средний
Как сделать чтобы было по 2 блока на строке, а не сразу все 4?
- 2 подписчика
- вчера
- 63 просмотра
1

ответ
Vue.js

Простой
Как убрать иконку календаря на элементе vue date picker?
- 1 подписчик
- вчера
- 47 просмотров
1

ответ
CSS

+1 ещё

Простой
Как сделать анимированное закрытие модального окна bootstrap?
- 1 подписчик
- вчера
- 57 просмотров
0

ответов
Vue.js

Средний
Как получить ошибку валидации laravel + vue?
- 1 подписчик
- вчера
- 78 просмотров
0

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

Frontend-разработчик (React)

ДАЛЕЕ

от 130 000 ₽

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

вАйТи

от 5 000 до 25 000 ₽

Trainee - IT Support

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

от 2 000 до 4 000 $

Разработать графическую часть плагина для SonarQube

16 апр. 2024, в 14:51

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

Доработка сайта MODX

16 апр. 2024, в 14:23

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

Изменить данные в инструкции

16 апр. 2024, в 14:20

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

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

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

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

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

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