Creating a Fixed or Sticky Tab Bar Header in React with Ant Design Library!

Trying to fix my tab bar headers that are nested in a drawer. I attempted using the Antd recommended react-sticky library, but it didn't seem to work due to potential issues with the drawer scroll and tab body scrolling preventing the sticky functionality.

Ant Design Tabs Reference: https://ant.design/components/tabs/ https://i.sstatic.net/nMIU1.png

react-sticky package: https://www.npmjs.com/package/react-sticky

position: -webkit-sticky;
position: sticky;
top: 0;

I also experimented with custom CSS solutions, but encountered no success in resolving the issue.

cssreactjstabsantd

Answer №1

When exploring Antd's handling of the subject of fixed/sticky elements, I discovered that using the Header component from Layout and setting the style position to fixed resolved my issue. While it may not be a perfect solution, it does ensure that the Tab Bar Headers in a drawer remain fixed.

const renderTabBar = (props, DefaultTabBar) => (
    <Layout>
        <Header style={{ position: 'fixed', zIndex: 1, top: 0, padding: 0, width: '100%', 
          background: 'white' }}>
            <DefaultTabBar {...props} style={{
                top: 20,
            }} />
        </Header>
    </Layout>

);

    <Drawer
    placement="right"
    onClose={onClose}
    visible={visible}
    getContainer={false}
    title={<> </>}
    style={{ position: 'absolute' }}
    width={"25%"}
    keyboard={true}
    closable={true}
    closeIcon={<CloseOutlined />}
    mask={false}
    maskClosable={false}
    headerStyle={{ border: 'none' }}>
    <Tabs tabPosition="top"
        renderTabBar={renderTabBar}
        animated={true}
        style={{ paddingTop: 20 }}>
        {tabBody}
    </Tabs>
</Drawer >

Answer №2

To customize CSS, you can simply override it:

.ant-tabs-nav{
  position: fixed !important;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customizing the appearance of a QProgressBar with stylesheet editing

I am facing an issue where I am unable to edit the colors for the progress bar in my app. I have only been able to change the text color. pyhton: 3.9 PySide6 QT Creator: 7.0.2 Link to Python app import sys from PySide6 import QtWidgets class MyWidget(Qt ...

pythoncssuser-interfacepyqtpyside

What is the best way to define coordinates or set margins for the autoTable component in jsPdf when using React js?

While working with the jsPdf library to create a PDF in React, I am encountering an issue where I am unable to set margins for the autoTable when there are multiple tables on a single page. Below is the code snippet: import React from "react"; ...

javascriptcssreactjsjspdfjspdf-autotable

Stagnant className in map persisting despite changes being made

I am in the process of updating my react className based on changes to the active status within the sites variable, which is iterated over with a map function. The issue I'm facing is that the 'inactive' className persists even when the act ...

javascriptreactjs

The issue of CSS stylesheet not being updated in Firefox browser on VirtualBox Ubuntu Guest with DJango and Apache configuration

While working on a Django app within a VirtualBox VM running Ubuntu 14.04, I encountered an issue with CSS stylesheets. Despite making changes to the stylesheet, the Firefox Style Inspector still displayed the old version. I have tried various methods such ...

cssdjangoapachefirefoxvirtualbox

The screen size dominates all the other specifications

I've been attempting to adjust the category images based on screen size, but it seems that only the first specified width is being applied. It appears that subsequent rows of code are being overridden by the initial max-width setting (769px) on this w ...

htmlcss

Tips for optimizing your animation using ReactCSSTransitionGroup

I'm currently working on integrating the "bounce" animation feature from animate.css into a React component. Here's the CSS I've set up so far: // Animation Bounce @-webkit-keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animat ...

cssreactjsreactcsstransitiongroup

React Bootstrap's drop-down components with a dark theme

In my react application, I am looking to design a custom navbar for the header using react-bootstrap. Specifically, I need a dark styled NavDropdown that changes background color to #f0ad4e on hover. Despite attempting the following code snippet, I couldn& ...

cssreactjsreact-bootstrap

The parameter type (key: string, id: string, pagination: number) in the argument does not match the expected type of Boolean for the parameter

I'm facing an issue while trying to implement the following documentation: https://swr.vercel.app/ using my own setup: import React, { useEffect } from 'react' import PatientsTable from 'components/patients/PatientsTable' import ...

reactjstypescriptnext.js

Having issues changing image types with onError in react functionality

I am facing an issue trying to display images from our project server as they are saved in four different types (jpg, jpeg, png, and gif) and I do not know which type each image will be. To handle this uncertainty, I wrote the following code within my img ...

reactjs

How can I use flexbox to position this footer at the bottom of its parent container?

I'm not an experienced designer and it's been a while since I last worked with CSS. I'm diving into using flexbox layout for the first time and feeling a bit overwhelmed. Here is the existing HTML structure that I need to work with and cann ...

csslayoutflexboxpositionalignment

The Angular material datepicker fails to organize items in a horizontal row

My web application features an Angular Material datepicker, however, I am facing an issue where not all elements are showing up in a row. The view is as follows: Datepicker To prevent any custom CSS from impacting the view, I have removed all customized ...

cssangularangular-materialdatepicker

Increased pixels being incorporated into my line spacing

Looking for a solution: A <div> containing only one word at a font size of 16px with a line-height set to 1. Encountering issues with extra space above the text in Chrome and Firefox, while the text bleeds slightly out of the bottom. IE exacerbates t ...

css

Error message encountered: React hydrate TypeError - the function __webpack_require_.i(...) is not recognized as a

I encountered a webpack TypeError while attempting to use hydrate() in my index.js file. Strangely, the error does not appear when I use ReactDOM.render() instead of hydrate. My intention behind using hydrate was for server-side rendering. src/index.js i ...

javascriptreactjswebpackbabeljspackage.json

Steps to create a hover effect that alters the appearance of another chosen "element"

For instance, I have two classes named A and B. I want to be able to change the appearance of B when I hover over it, such as its color or size. I am unsure if this can be achieved using CSS and the onmouseover event. I am including a snippet of code that ...

javascriptjquerycssjqgrid

An issue arises in Typescript when attempting to pass an extra prop through the server action function in the useForm

I am struggling with integrating Next.js server actions with useFormState (to display input errors on the client side) and Typescript. As per their official documentation here, they recommend adding a new prop to the server action function like this: expo ...

reactjstypescriptnext.jsserver-action

Allowance for text overflow on subsequent line

Below is the snippet of HTML code I am working with: <h4 class="clickbelow">This is a very long line that overflows onto a new line when the width is small.</h4> Here is the CSS that I have implemented: .clickbelow:before { content: url( ...

htmlcss

Here's a guide on customizing the appearance of the date picker in NativeBase components for React Native by

Is there a way to show icons while using the date picker component from the Native Base UI library? ...

javascriptreactjsreact-native

Get the cookies from the NodeJs API using Next.js version 13.4

Could you please review my code? I have a Next.js and Node API app, and I'm facing an issue with obtaining the cookie from my API in my Next app. The signInUser API that I created should return a generated JWT cookie. However, when I use it in my Next ...

node.jsreactjsnext.jsfetch-apinext.js13

What is the best way to create a drop-up feature for a Bootstrap navbar positioned at the bottom of the

I am experiencing some issues with my navbar. I have a dropdown menu in the third li element that does not seem to work properly. Despite adding the dropup class, it still fails to appear when I hover over it. <nav class="navbar navbar-expand-lg navb ...

htmlcsstwitter-bootstrapbootstrap-4

tips for inserting text within the confines of a range slider

I am currently utilizing the noUiSlider, although any range slider library should suffice. I have a compact widget (see here: https://codepen.io/chapkovski/pen/pobRwZj) where users need to divide the range into three sections: var slider = document.ge ...

javascripthtmlcssrangeslidernouislider