I found an example that I am trying to follow at the following link: https://vuetifyjs.com/en/components/tabs#content
<v-tabs-items v-model="model">
<v-tab-item
v-for="i in 3"
:key="i"
:value="`tab-${i}`"
>
<v-card flat>
<v-card-text v-text="text"></v-card-text>
</v-card>
</v-tab-item>
</v-tabs-items>
However, I am looking for a way to make the v-card take up the remaining height. Is there a way to achieve this?
Encountered a problem today and found a solution by analyzing the hierarchy of classes generated by Vuetify in the inspector tool. By tweaking the CSS for specific classes, I was able to resolve the issue. The suggestion from this SO answer guided me to change the height of .v-tabs__content, which led me to determine that the class structure has evolved.
<div>
<!-- Top level container of the tabbed interface -->
<nav>
<!-- Toolbar and tab header generated here -->
</nav>
<div class="v-window">
<div class="v-window__container">
<div class="v-window-item">
<div class="v-card">
<div class="v-card__text">Text.</div>
</div>
</div>
</div>
</div>
</div>
To adjust the tab content container's size appropriately, it became essential to modify the heights of v-window, v-window__container, and
v-window-item</code. Additionally, the internal content's height (e.g., the <code>v-cardIn my implementation, setting display:flex for the container wrapper and utilizing flex specifically for .v-window ensured proper alignment below the toolbar while achieving the desired stretched height for the tab content.
View my solution on CodePen: https://codepen.io/anon/pen/wNEOdy, tailored to the provided example.
HTML:
<div id="app">
<v-app id="inspire">
<div class="tab-wrapper">
<v-toolbar
color="cyan"
dark
tabs
>
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title>Page title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>search</v-icon>
</v-btn>
<v-btn icon>
<v-icon>more_vert</v-icon>
</v-btn>
<v-tabs
slot="extension"
v-model="model"
centered
color="cyan"
slider-color="yellow"
>
<v-tab
v-for="i in 3"
:key="i"
:href="`#tab-${i}`"
>
Item {{ i }}
</v-tab>
</v-tabs>
</v-toolbar>
<v-tabs-items v-model="model">
<v-tab-item
v-for="i in 3"
:key="i"
:value="`tab-${i}`"
>
<v-card flat>
<v-card-text v-text="text"></v-card-text>
</v-card>
</v-tab-item>
</v-tabs-items>
</div>
</v-app>
</div>
CSS:
.tab-wrapper {
height:100%; /* Set to desired height of entire tabbed section, or use flex, or ... */
display:flex;
flex-direction: column;
}
.tab-wrapper .v-window{
flex: 1;
}
.tab-wrapper .v-window__container,
.tab-wrapper .v-window-item {
height: 100%;
}
/* customise the dimensions of the card content here */
.tab-wrapper .v-card {
height: 100%;
}
JS:
new Vue({
el: '#app',
data () {
return {
model: 'tab-2',
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
}
}
})
When dealing with components inside a scoped style block, it is important to utilize a deep selector in order to access nested windows containers. This can be achieved using the following CSS code snippet:
.tab-items-row >>> .v-window__container,
.tab-items-row >>> .v-window-item {
height: 100%;
}
<style>
.v-window__container {
height: 100%
}
</style>
Worked like a charm!
My project consists of the following files: App.vue, changcolor.vue, config.json, main.js, index.html, xyz.css, abc.css. I need a solution where based on the URL, the appropriate CSS file is applied. For instance, if the URL is "xyz.local.com" then xyz.cs ...
Question regarding Vue/Vuex efficiency and best practices. I am working with an API that returns a paginated data-set of 50 products, which I am storing in a Vuex store. When displaying all products, I iterate over the Vuex store. Now, for individual pr ...
The Vuetify documentation mentions the following: After installation, you need to locate your webpack.config.js file and insert the provided code snippet into the rules array. If you already have a sass rule configured, you may need to make some adjustme ...
I have some data that includes HTML elements: data(){ text: 'Go to <v-btn> to="profile">Profile</v-btn>'} Now I want to render this data with the embedded HTML in my component. I attempted to accomplish this using th ...
I'm looking to design something similar to a desktop-only carousel. Here's the code snippet I have: <div class="wrapper"> <div class="image-container"> <img alt="Siac" src="https://diey.now.sh/Icons/Clients/SIAC_LOGO.svg"> ...
In the world of Laravel Dusk, the default selector hunts for the dusk="something" attribute in your HTML. If you want to dive deeper into this topic, check out this resource. However, when it comes to compatibility with Typescript for React/Vue, ...
I am encountering an issue with my Vue component's axios requests when passing dates. The input method works fine when I manually enter a date like "2021-03-06", but it fails when using a datePicker. public function store() { $attributes ...
I recently implemented a dark mode feature on my WordPress site. Here are the four modes I included: 1- Automatically based on user's system settings 2- Light mode 3- Semi-lit mode 4- Dark mode The implementation is in place and functioning perf ...
Can you clarify the distinctions among various methods of declaring variables? When should I employ each of these declaration methods? <script> const someVariable = 12345 export default { name: 'App', } </script> <script> e ...
I am currently working on a loop that displays different products, each with its own product card. My goal is to create a toggle function for the button so that when clicked, it switches from Add to cart to Remove from cart. The issue I'm facing is t ...
Looking to enhance my slideshow by replacing the standard "Next" and "Previous" text buttons with custom JPEG images I've created. Anyone familiar with the steps needed to make this switch in the HTML code? Current HTML code in use: <body sty ...
When using a textarea with the CSS property white-space:nowrap, it successfully removes spaces but adds a horizontal scrollbar to the text. I want to avoid the horizontal scrollbar while also preventing scrolling using arrow keys when using overflow-x:hi ...
Seeking a solution for my static html, CSS, and JS website which includes some Jquery elements. I want to implement a user-friendly backend system that allows non-developer admins to log in, easily edit sections or change images with their own preferences. ...
I'm having an issue: I need to create inputs with different states, including when the text is longer than the input itself. In this case, the extra text should fade out with a gradient transparency effect: Here is my current code snippet: .Input { ...
Looking to enhance my 360 image rotator with an indicator that fades out after the first image. I added this function to the end of my 360.js: (function(){ if( $('#first').css('visibility','hidden')) { $('#rotat ...
I am attempting to create a flexible div that will adjust its width and height proportionally based on the viewport size. However, in the example above, this method only seems to make the div expand horizontally without affecting the vertical height (wh ...
My attempt at creating a jQuery sliding video gallery is not working as I hoped. Instead of scrolling through the images when clicking arrow buttons, the entire div moves left or right depending on the direction. HTML: <div id="videocontainer"> & ...
I'm facing an issue with my Tailwind CSS code that is hindering me from scrolling to the bottom of an aside element. <body> <div> <nav class=" bg-white px-2 py-2.5 dark:bg-gray-800 sm:px-4 fixed w-full z-20 border-b borde ...
Implementing the bootstrap4 framework in my web application, I have a table displaying various values. Each row includes an edit button at the end of the row (last column). The requirement is that when this edit button is clicked, a form should pop up with ...
I'm currently developing a new newsletter template, and I've encountered an issue with background images not displaying properly in Outlook. The code below illustrates the desired layout: <table style="width: 600px;" align="cent ...