I'm using Vue3/Vuetify3, I'm trying to push the text of the v-app-bar about 300px to the right. When I just add a padding to the div element it doesn't do anything. Afaik vuetify works with flexbox, and I'm struggling to understand how to work with this.
Any explanations and/or suggestions would be much appreciated! Thanks in advance!
<v-app>
<v-app-bar>
<v-container class="d-flex align-center py-0">
<v-app-bar-title class="pl-0">
<div class="d-flex align-center">
<v-avatar
rounded="0"
class="mr-3"
image="https://cdn.vuetifyjs.com/docs/images/logos/v.png"
/>
Example Sentence that should be centered
</div>
</v-app-bar-title>
</v-container>
</v-app-bar>
Based on the comments I came up with this, it is also responsive. This should just move the text:
<style>
#media (min-width: 600px) {
.app-bar-text {
margin-left: 300px;
}
}
</style>
<v-app-bar>
<v-container class="d-flex align-center py-0">
<v-app-bar-title class="pl-0">
<div class="app-bar-text">
Example Sentence that should be centered
</div>
</v-app-bar-title>
</v-container>
</v-app-bar>
Related
I have this layout:
This is the code for the image below:
<main>
<div className="flex justify-center max-w-xl mx-auto bg-purple-400">
...
</div>
</main>
What I want is to have two divs, one of the left and one on the right of this layout (in the white area) that take up the remaining space without affecting the width of the main content area. How can this be done?
I've experimented with this code, but I haven't figured it out yet:
<main className="flex">
<div className="">left white area</div>
<div className="flex justify-center max-w-xl mx-auto bg-purple-400">
...
</div>
<div className="">right white area</div>
</main>
UPDATE:
I was able to get the desired behaviour with media queries, even though I wanted to do this with native tailwind, this works as well:
--HTML--
<main className="flex">
<div id="left" className="hidden">left white area</div>
<div className="flex justify-center max-w-xl mx-auto bg-purple-400">
...
</div>
<div id="right" className="hidden">right white area</div>
</main>
--CSS--
#media screen and (min-width: 64rem) {
#left,
#right {
width: calc((100vw - 64rem) / 2);
display: block;
}
}
I'll leave this thread open for any possible other solutions. If it can be figured out with just tailwind that's even better.
Edited again to clean up the code a bit.
I think you want flex-1 or flex-grow in the middle one, and instead of media queries for the side ones try hidden md:block and possibly something like w-1/5
I'm using Vue3/Vuetify3, I'm trying to align the text of the app-bar to the center, but for some reason when I try to add text-center to the v-app-bar-title like so:
<div class="d-flex align-center text-center">
and/or I append the text-center on to the div or to the v-container, nothing successfully makes thev-app-bar-title text centered.
I tried one thing that worked, which was removing the existing div classes and just adding text-center, but I'm assuming this will mess with responsiveness since afaik d-flex and align-center are required for it?
Any explanations and/or suggestions would be much appreciated! Thanks in advance!
<v-app>
<v-app-bar>
<v-container class="d-flex align-center py-0">
<v-app-bar-title class="pl-0">
<div class="d-flex align-center">
<v-avatar
rounded="0"
class="mr-3"
image="https://cdn.vuetifyjs.com/docs/images/logos/v.png"
/>
Example Sentence that should be centered
</div>
</v-app-bar-title>
</v-container>
</v-app-bar>
You should use the justify-center class to center the content , text-center will center text but not your container if you're using flexbox. You can take a look at this vuetify documentation
Vuetify CSS Flex Helpers
the flexbox helpers override text-center. you can use justify-center with flexbox, or remove the flex classnames and just use text-center
<v-app-bar-title class="pl-0">
<div class="text-center">
<v-avatar
rounded="0"
class="mr-3"
image="https://cdn.vuetifyjs.com/docs/images/logos/v.png"
/>
Example Sentence that should be centered
</div>
</v-app-bar-title>
You can simply achieve this requirement by using the margin helper class available here in Vue 3 style documentation.
Live Demo (As facing some challenge to create a below code snippet in Vuetify 3, I am demoing it by using Vuetify 2) :
new Vue({
el: '#app',
vuetify: new Vuetify()
})
<script src="https://unpkg.com/vue#2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify#2.6.13/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify#2.6.13/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"/>
<div id="app">
<v-app id="inspire">
<div>
<v-app-bar
color="deep-purple accent-4"
dense
dark
>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title class="mx-auto">Page title</v-toolbar-title>
</v-app-bar>
</div>
</v-app>
</div>
No matter what I seem to try, I cannot align some content in a nav bar in the center of the screen (oh the irony I know!)
# app.vue
<template>
<header>
<ContactBar />
</header>
</template>
# ContactBar.vue
<template>
<nav class="bg-neutral-900 w-100">
<div class="mx-auto p-4 max-w-7xl text-zinc-300">
<p>abc</p>
</div>
</nav>
</template>
Output:
What am I doing wrong here? :(
In the ContactBar.vue you should change w-100 (which is not a standard tailwind class btw) with w-full. Then you need to replace the max-w-7xl on the child by min-w-max w-[80rem]. The w-[80rem] is the replacement of the 7xl max width, which also is 80rem.
See playground example:
https://play.tailwindcss.com/VHSBUxiMx5
Hello I am trying to create scrollable content in card with flex util classes and components of Vuetify but I am unsuccessful. He is my last version of code which I tried:
https://codesandbox.io/embed/sharp-kilby-g3e4t?fontsize=14&hidenavigation=1&theme=dark
This is my expectation is this:
I found some samples with pure flex but I am not able did it with Vuetify? Can you help me edit codesandbox to make it working? Thank you.
Uses the component=v-virtual-scroll built in Vuetify will be one solution.
for example:
<v-card class="flex-grow-0">
<v-virtual-scroll
:items="Array.from({length: 100}).map((_, index) => index)"
:item-height="50"
height="300"
>
<template v-slot="{ item }">
<v-list-item>
<v-list-item-content>
<v-list-item-title>Item {{ item }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
</v-virtual-scroll>
</v-card>
Updated CodeSandBox
This question is much related to CSS than Vuetify, so let me explain you how you can fix it. Say that your markups render in the browser like below html, either style v-card__text or add your custom class my-list, if you are using v-card__text to style then make sure to add scoped to style tag in your component else this will effect entire project.
<div class="v-card v-sheet theme--light">
<div class="v-card__title">You Title goes here</div>
<div class="v-card__text my-list">
<ul>
<li>Text</li>
...
</ul>
</div>
</div>
<style scoped>
.my-list {
// For eg. here 200px is MainNavBar + TitleBar and some padding/margins
// keep on increasing height if you have more items placed above the v-card
height: calc(100vh - 200px);
overflow-y: auto;
}
</style>
You can set the height to the v-list then make it scrollable using overflow-y: scroll;
<!-- Set height to your `<v-list>` and add `overflow-y: scroll` -->
<v-list style="height: 250px; overflow-y: scroll">
<v-list-item-group color="primary">
<v-list-item v-for="(n) in 100" :key="n">
<v-list-item-content>
<v-list-item-title>Item {{ n }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
I've edited your code and here is a working example at codesandbox.
Here is a sample output of what you want based on your sketch.
I'm using TailwindCSS -a utility class framework- to style my elements. Altough this is more a generic CSS question.
I can't manage to position the box so this gets the remaining space without overflowing it. This is my actual state:
<div class="flex flex-col h-screen mx-8 bg-white rounded p-4 mb-8">
<!-- SUBTITLE -->
<div>
<h2 class="text-lg font-bold text-gray-700 pb-4">Subtitle</h2>
</div>
<div class="relative self-auto mb-8">
<!-- ELEMENTS -->
<a href="#">
<img class="absolute z-10" style="top: 131px; left: 235px;"
src="{{ asset('some.svg') }}">
</a>
</div>
</div>
Output (omitting some of the inside elements):
As you can see, the scrollbar shows because the div is too big. In order to see the bothom of the box I have to scrolldown:
This is my desired output:
Thanks in advance.
Fiddle
Link.
The class .h-screen is 100vh. .mb-8 has an margin-bottom:2rem. So the height is 100vh + 2rem. You can use [calc][1] to subtract the margin from the height.
.h-screen{
height:calc(100vh - 2rem)!important;
}
https://jsfiddle.net/c28145au/
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
This is the solution I found: w-[calc(100%_-_10px)]
you are using class h-screen which has height: 100vh; remove that class from the div.