I am using angularJS to create web pages for the application. I have multiple tabs with content. I want to make tabs fixed without scrolling and only the content should scroll when the data is more to view. I went through many examples online and tried but nothing had worked for me as the content in the tab is having multiple div's and tables.
<div ng-controller="TabsParentController" class="tabs-wrapper">
<tabset class="full-size">
<tab ng-repeat="workspace in workspaces"
heading="{{workspace.name}}"
active=workspace.active>
<div class="tab-content" ng-include="workspace.content"></div>
</tab>
</tabset>
</div>
CSS code:
.tabs-wrapper {
position: relative;
}
.full-size {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
I have tried using css code, but it didn't work. Please suggest how to make tabs fixed without scrolling and only the content inside the tabs should be scrolled.