Fix the position of tabs into tabContainter.

0
Hi, I am using tab-container widget into my application. I have used 3-4 tabs. But I want to fix the position of Tabs while I am scrolling. By default, these tabs are also get scrolled. How should I fix this?   Thanks, Samarth Jadhav
asked
1 answers
2

Hi Samarth,

To achieve this you have to add some custom styling to tab container. To add custom styling the best way is to;

  • Install or open and setup Calypso
  • Go to your project directory > ‘\theme\styles\web\sass\app’
  • Create a new folder for your widget or UI  resource (in your case this will be ‘Widgets’) 
  • Add a new file under your new folder (in your case filename will be ‘_tabcontainer.scss’). You can have a look at available widget filenames by navigating to project directory > theme > styles > web > sass > core > widget.  
  • Open _custom.scss from app folder and import newly added file, (in your case, add @import "Widgets/tabcontainer" and save it
  • Go to newly created file and add required SCSS code and save it so that Calypso compiles the code. (in your case go to _tabcontainer.scss add below suggested code)

 

.custom-tabcontainer .mx-tabcontainer {
    .mx-tabcontainer-content {
        height: 250px; //Update height as per your requirement
        overflow-y: scroll;
    }
}

My suggestion will be to add custom class called .custom-tabcontainer to your tab container scss file and apply custom-tabcontainer class to your tab container widget on the page. If you want this style to be applied across all the tab containers in the application than just remove .custom-tabcontainer from the code above.   

Hope this helps!

answered