V-btn (кнопка с плавающим действием), позиционированная как абсолютная вершина, не выходит за пределы v-card (Vue2, Vuetify)

Как я могу сделать это не скрытым, когда он переполняет компонент? Спасибо за помощь.

<v-card>
  <v-btn @click = "dialog = false" fab small absolute top right class = "error">
    <v-icon>
      mdi-close
    </v-icon>
  </v-btn>
</v-card>

vue.js vuetify.js v-btn

25.12.2020 11:50

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

2 253

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Проверьте свой CSS - у вашей карты есть overflow: hidden. Удалите это правило CSS, и оно будет работать должным образом.

new Vue({
      el: '#app',
      template: '#main',
      vuetify: new Vuetify(),
    })

<link href = "https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel = "stylesheet">
  <link href = "https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel = "stylesheet">
  <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<div id = "app"></div>
<template id = "main">
<v-app>
<v-main class = "pa-8">
<v-row justify = "center">
<v-card>
  <v-btn @click = "dialog = false" fab small absolute top right class = "error">
    <v-icon>
      mdi-close
    </v-icon>
  </v-btn>
  <v-card-text>This is some example text</v-card-text>
</v-card>
</v-row>
</v-main>
</v-app>
</template>

Спасибо. Поскольку это компонент Vuetify, я заставил overflow-y:visible !important; а проблема остается.

— 25.12.2020 16:23

Взгляните на пример — ваша разметка работает так, как ожидалось, поэтому проблема не в Vuetify, а в ваших собственных стилях CSS.

— 27.12.2020 09:51

25.12.2020 15:47

Вы можете переопределить стиль с помощью глубокого селектора CSS vue (>>>). Судя по вашему коду, стиль переполнения должен исходить из класса v-dialog (@click="dialog = false", я считаю само собой разумеющимся, что вы пытаетесь закрыть диалоговое окно нажатием этой кнопки), поэтому просто добавьте это для компонента vue:

<style scoped>
  >>> .v-dialog {
    overflow-y: visible;
  }
</style>

'>>>' делает так, что свойство overflow-y класса v-dialog будет переопределено.

04.01.2021 01:36

Другие вопросы по теме

Событие триггера Vue после того, как v-for создал новый дом

Как сделать так, чтобы свойство «приложение» в <v-navigation-drawer> не применялось к размерам экрана «xs», поэтому ящик находился поверх содержимого?

Источники изображений не отображаются в динамическом контенте в Vue и Vuetify

Как заставить <v-row> начинаться сверху <v-container> в Vuetify?

Как я могу иметь интерактивный тег привязки в метке текстового поля vuetify?

Как я могу передать значение из v-select в метод - оно всегда остается таким же, как по умолчанию

Как создать компонент VForm с функциональностью проверки, такой как Vuetify в Vue 2?

Маршрутизация Vuetify: загадка изменения содержимого страницы

Как прикрепить руль к навигационному ящику

Vue — как показать массив данных в таблице?

V-btn (кнопка с плавающим действием), позиционированная как абсолютная вершина, не выходит за пределы v-card (Vue2, Vuetify)

Ответы 2

Другие вопросы по теме

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