I have created a sandbox demo to illustrate my issue. My goal is to make the content of tabs scroll when necessary but fill to the bottom if not needed. I believe using flex columns could be the solution, however, my attempts so far have been unsuccessful.
To achieve the desired effect of having the header on the left or right side, you can utilize CSS to override certain PrimeVue classes. Below is an example demonstrating how to achieve this using a CDN.
In order to move the header to the left side dynamically, a CSS class named .vertical-header is used. By applying this class to the TabPanel, the header automatically shifts to the vertical position on the left side.
/* Styling for moving header to the left */
.p-tabview.p-component.vertical-header {
display: flex;
flex-direction: row;
}
/* Individual header items */
.p-tabview.p-component.vertical-header > .p-tabview-nav-container > .p-tabview-nav-content > .p-tabview-nav {
display: flex;
flex-direction: column;
gap: 4px;
}
/* Stylizing the right border when item is not selected */
.p-tabview.p-component.vertical-header > .p-tabview-nav-container > .p-tabview-nav-content > .p-tabview-nav > li:not(.p-highlight) > .p-tabview-nav-link {
border-bottom-width: 0px;
border-right-width: 2px;
border-right-color: #dee2e6;
border-radius: 0;
}
/* Stylizing the right border when item is selected */
.p-tabview.p-component.vertical-header > .p-tabview-nav-container > .p-tabview-nav-content > .p-tabview-nav > li.p-highlight > .p-tabview-nav-link {
border-bottom-width: 0px;
border-right-width: 2px;
border-radius: 0;
}
A similar approach can be taken to position the header on the right side dynamically, by adjusting the flex properties and border styles accordingly.
/* Styling for moving header to the right */
.p-tabview.p-component.vertical-header {
display: flex;
flex-direction: row-reverse;
}
/* Individual header items */
... (same styling as before)
/* Stylizing the left border when item is not selected */
... (similar to previous styling)
/* Stylizing the left border when item is selected */
... (similar to previous styling)
It is recommended to use Vue components along with PrimeVue libraries to implement the changes effectively. The below code snippet demonstrates the implementation:
(Code snippet for Vue component implementation goes here...)When using PrimeVue, the TabView component automatically adjusts the content height. To ensure proper display, it is recommended to fix the size of the entire TabView container and then use CSS to align the fixed nav-container at the top.
/* Set TabView height */
.p-tabview.p-component {
height: 300px;
overflow: auto;
}
/* Set Header's position to top */
.p-tabview.p-component > .p-tabview-nav-container {
position: sticky;
top: 0;
}
// Include Vue via CDN
const { createApp, ref, onMounted, onUnmounted } = Vue
const app = createApp({
setup() {
const tabViewHeight = ref(0) // Store current height
const updateHeight = () => {
tabViewHeight.value = window.innerHeight // Preserve own diagram
// Use this code:
/*
// Deduct total content height from window height and add current tabview height (as it doesn't need to be deducted)
tabViewHeight.value = window.innerHeight -
document.querySelector('.pageLayout').clientHeight +
document.querySelector('.body').clientHeight
*/
}
onMounted(() => {
updateHeight() // Set initial value
window.addEventListener('resize', updateHeight) // Update height on window resize
})
onUnmounted(() => {
window.removeEventListener('resize', updateHeight)
})
return { tabViewHeight }
},
components: {
"TabView": primevue.tabview,
"TabPanel": primevue.tabpanel,
},
template: `
<TabView :style="{ height: tabViewHeight + 'px' }">
<TabPanel header="Header 1">
<p v-for="i in 200" :key="i">Lorem ipsum dolor sit amet, consectetur.</p>
</TabPanel>
<TabPanel header="Header 2">
<p>Sed ut perspiciatis unde omnis iste natus error.</p>
</TabPanel>
<TabPanel header="Header 3">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus.</p>
</TabPanel>
</TabView>
`
}).mount('#app')/* Set TabView height */
.p-tabview.p-component {
overflow: auto;
}
/* Set Header's position to top */
.p-tabview.p-component > .p-tabview-nav-container {
position: sticky;
top: 0;
}<link rel="stylesheet" href="https://unpkg.com/primevue/resources/themes/lara-light-blue/theme.css" />
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="29595b40444c5f5c4c691a071a1b071b">[email protected]</a>/resources/primevue.min.css" rel="stylesheet">
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="57212232176479647963">[email protected]</a>/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="403032292d2536352500736e73726e72">[email protected]</a>/core/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/primevue/3.32.2/tabview/tabview.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/primevue/3.32.2/tabpanel/tabpanel.min.js"></script>
<div id="app"></div>UPDATE: After carefully reviewing my code once again, I have identified the issue. The problem lies in the positioning of a certain function (unfortunately not included here), but rest assured that I have rectified it! Allow me to provide a brief summary ...
Is there a method to utilize the <picture> element in order to prevent a page from downloading an image when viewed on a mobile phone? I have a website that features a header image. Unfortunately, due to the site's functionality, using CSS (bac ...
Utilizing Vercel's AI SDK along with the useChat utility hook from Vercel in my Nuxt.js project, I'm developing a chat interface. Within this interface, I have multiple agents (such as General, Exercise, Cardiology) listed in a select dropdown me ...
I keep receiving an alert box saying "Image uploaded" even when the variable $imagename is empty. Below is the script in question: <script> function ajax_post1(ca){ var cat = ca; var name = document.getElementById("name").value; var ...
I am currently in the process of migrating an application from Vue 2 to Vue 3 using the composition API. In our previous version, we were utilizing Bootstrap, but after some research, I discovered that it would be more suitable to switch to bootstrap-vue- ...
Frontend mentor projects have been a tricky challenge for me lately, especially when it comes to serving images of different viewport sizes on desktop. I've tried using the picture element and specifying at what width the image should be served, but f ...
Is there a way to enable slideToggle for all my queries? Currently, it is only working on the first query. Any suggestions on how to resolve this issue? JS code $(document).ready(function(){ $("#SendCopy").click(function(){ $("#users").slideToggle("s ...
Having trouble rotating a div within another div. I tried using the transform property but it's not working as expected. I heard about another method which involves using :before pseudo-element, but I'm not sure what's wrong with that either ...
I am currently working on developing a responsive navigation bar with CSS animation. However, I am encountering some issues when trying to run the code on my laptop. Upon running it, only the checkbox appears while the list of navigation items is displayed ...
Is there a way to increase the spacing between the tabs of a Primefaces AccordionPanel component? ...
Struggling to create a select element with a width="347px" and id="select-box-1". I attempted to use .append("select"), but my search on .append() didn't yield the desired results. Unsuccessful Attempt: .append("< ...
When an image is resized using a percentage, it preserves its aspect ratio properly. I am looking for a way to replicate this behavior with a div. My current challenge involves precisely positioning an element relative to an image. The image fills 100% of ...
I'm looking to select CSS settings based on the presence of a data tag. What would be the correct approach for this? var datadirection = 'left'; //default direction if( $(this).attr('data-right') ){ datadirection = 'righ ...
I'm working on a project that involves displaying XML data in a textarea and creating an onClick event for the content within the textarea. For example: <textarea>Hello Web, This is a simple HTML page.</textarea> My goal here is to create an ...
I am new to working with Angular JS. Currently, I am populating an array and attempting to showcase its contents on the HTML page using ng-repeat. $scope.groupedMedia = []; // Elements are being added through a for loop. $scope.groupedMedia[year].push(r ...
I'm working on a project that involves creating a cartoon version of a record player. I want to incorporate an animation where the play button on the side toggles the spinning motion of the record using webkit, while also starting the audio track. The ...
Can I adjust the size of an image inserted using :before? For example, if I want to use a high resolution image in the content below - how can I specify the dimensions? .buy_tickets_btn:before{ content: url(../images/buttons/pink_ticket_btn_bg.pn ...
I have developed two scripts for this specific HTML code along with a corresponding PHP script. Below is the HTML markup: <html> <body> <form action="http://senindiaonline.in/admar/non-series-numbers-db.php" method="post" target="_bl ...
I've been attempting to shrink the size of the Input field in MUI autocomplete but haven't had any luck. Here's the code I tried: styling: autocompleteStyle: { height: '2.3rem', color: `${theme.palette.grayDark1} !important ...
I am looking for a way to extract the redirected URL from an anchor tag without actually visiting it. I have tried using `selenium` `get_attribute('href')`, but all I get is "javascript: return false". Is there a method to obtain the redirected U ...