Чтобы создать v-btn-toggle, кнопки которого расположены вертикально, а не горизонтально
В настоящее время я пытаюсь создать тест, используя VueJS и Vuetify. Я пытаюсь расположить ответы, которые пользователь может выбрать, по вертикали. Для этого я пытаюсь использовать компонент v-btn-toggle. Однако кнопки компонента v-btn-toggle по умолчанию выравниваются горизонтально. Если возможно, хотелось бы знать, как расположить их вертикально.
вот мой макет:
<v-btn-toggle v-model = "toggle_multiple" multiple>
<v-btn>
Answer 1
</v-btn>
<v-btn>
Answer 2
</v-btn>
<v-btn>
Answer 3
</v-btn>
<v-btn>
Answer 4
</v-btn>
</v-btn-toggle>
а вот мой стиль, как рекомендовано в этом вопросе :
.v-btn-toggle{
flex-direction: column;
}
ответ, который я попробовал, дал мне странные результаты, поскольку ответы отображаются только до полутора вторых ответов, как таковые: моё разочарование
Любая помощь приветствуется.
редактировать:
Я обнаружил, что моя проблема связана с CSS по умолчанию vuetify.
.v-btn-group--density-default.v-btn-group {
height: 48px;
}
И это мешает мне создать групповую кнопку высотой более 48 пикселей.
Я не хотел менять настройки vuetify по умолчанию (из-за проблем с переносимостью), поэтому теперь я пытаюсь переопределить CSS по умолчанию. К сожалению, несмотря на то, что я добавил свой собственный CSS, страница по-прежнему использует CSS vuetify поверх моего, как показано на этом изображении.
вот пример, codepen.io/Gouillaime/pen/mdggzpm, но мне не удалось воссоздать ошибку. Но я создал новый проект, чтобы проверить его, и это произошло снова. Я здесь в растерянности.
Я думаю о CSS проекта vuetify по умолчанию, я постараюсь разобраться в этом.
Codepen отлично работает на моей стороне. Уверены, что это не проблема монитора/окна просмотра с вашей стороны? Попробуйте, возможно, на большем экране в другом браузере.
Да, у меня тоже работает codepen, единственное место, где он не работает, это мой живой проект.
Я думаю, что-то не так с моими настройками, но я не могу это найти.
Проверьте CSS, который у вас есть, никакого волшебного соуса.
хорошо, я нашел это, проблема связана с настройками vuetify по умолчанию, я немного покопался и обнаружил, что в CSS по умолчанию vBtnGroup ``` .v-btn-group --density-default.v-btn-group { высота: 48 пикселей; } ``` По сути, по умолчанию высота группы кнопок не превышает 48 пикселей. На самом деле я не хочу менять настройки vuetify по умолчанию, так есть ли способ переопределить ее, не меняя настройки vuetify по умолчанию? Я попробовал переопределить высоту напрямую, но это не сработало.
гра, ни пробелов, ни кода в комментариях очень раздражает
Используйте CSS для большей специфичности: w3schools.com/css/css_specificity.asp Таким образом, не нужно менять настройки Vuetify по умолчанию. Кроме того, вам, вероятно, не нужен !important, попробуйте использовать более низкую специфичность. Что касается комментариев, то для кода по-прежнему можно использовать обратные кавычки, хотя здесь это и не критично.
ох вау, быстрый ответ, спасибо, попробую и скажу тебе
Я попробовал разместить свой стиль как встроенный, и он работает, спасибо! Я просто немного расстроен тем, что не могу определить стиль с помощью класса, но я возьму то, что есть.
Вероятно, вы можете попробовать этот button.v-btn-group--density-default.v-btn-group или, может быть, идентификатор. Еще один отличный пример специфики: specifishity.com
спасибо, с идентификатором работает
Я все еще новичок в stackoverflow, поэтому, поскольку я нашел половину ответа сам, должен ли я сам ответить на вопрос?
Будьте осторожны, потому что на странице может быть только один уникальный идентификатор. Наличие динамически генерируемого идентификатора — это неплохо. Обычно вы публикуете свой ответ, а ваш помощник публикует ответ. Вы принимаете + голосуете «за» его ответ, в то время как у вас есть «за» с его стороны и решение с вашей. Это беспроигрышный вариант. Вы можете опубликовать свой ответ и принять его, но помощнику ничего не будет возвращено. Следовательно, вы можете использовать его как ответ самому себе, обычно они выполняются в одиночку, без какого-либо взаимодействия, чтобы иметь возможность не забывать делать что-то самостоятельно.
Некоторым людям нравится публиковать ответ прямо, а затем обновлять его, я предпочитаю сначала решить проблему в комментариях, а затем опубликовать свой ответ. В итоге тот же результат.
Ответы 1
ОП обнаружил, что Vuetify имеет высоту по умолчанию 48 пикселей.
После двойной проверки того, что все работает так, как ожидалось, в отношении flexbox, мы сузили его до локального переопределения значений по умолчанию благодаря специфике CSS.
У ОП есть рабочее решение, нацеливаясь на данную кнопку с помощью
#my-button-group {
height: auto;
}
Другой альтернативой может быть использование button.v-btn-group--density-default.v-btn-group.
Разочарование похоже на переполнение, проверьте CSS контейнера. В остальном, у трюков CSS есть руководство по flexbox, хороший справочник. В противном случае для дальнейшей помощи очень приветствуется минимально воспроизводимый пример .