I am using Materialize CSS to create a front end mockup where I found that the height of the coponent tabs, cannot be altered.
Inside the codepen is an simple example where I try to make the tab components inside tabs any size I want. The idea is to control those elements’ sizes so that I can style it better. Make the fonts bigger and such. Or I can straight up put other content into those tabcomponent.
Inside the codepen you can see the 1st issue I am facing is :
I cannot get the
tabcomponent to fill up its parenttabs.
Here is the source code of materialize.CSS if it helps.
(function($, anim) {
'use strict';
let _defaults = {
duration: 300,
onShow: null,
swipeable: false,
responsiveThreshold: Infinity // breakpoint for swipeable
};
/**
* @class
*
*/
class Tabs extends Component {
/**
* Construct Tabs instance
* @constructor
* @param {Element} el
* @param {Object} options
*/
constructor(el, options) {
super(Tabs, el, options);
this.el.M_Tabs = this;
/**
* Options for the Tabs
* @member Tabs#options
* @prop {Number} duration
* @prop {Function} onShow
* @prop {Boolean} swipeable
* @prop {Number} responsiveThreshold
*/
this.options = $.extend({}, Tabs.defaults, options);
// Setup
this.$tabLinks = this.$el.children('li.tab').children('a');
this.index = 0;
this._setupActiveTabLink();
// Setup tabs content
if (this.options.swipeable) {
this._setupSwipeableTabs();
} else {
this._setupNormalTabs();
}
// Setup tabs indicator after content to ensure accurate widths
this._setTabsAndTabWidth();
this._createIndicator();
this._setupEventHandlers();
}
static get defaults() {
return _defaults;
}
static init(els, options) {
return super.init(this, els, options);
}
/**
* Get Instance
*/
static getInstance(el) {
let domElem = !!el.jquery ? el[0] : el;
return domElem.M_Tabs;
}
/**
* Teardown component
*/
destroy() {
this._removeEventHandlers();
this._indicator.parentNode.removeChild(this._indicator);
if (this.options.swipeable) {
this._teardownSwipeableTabs();
} else {
this._teardownNormalTabs();
}
this.$el[0].M_Tabs = undefined;
}
/**
* Setup Event Handlers
*/
_setupEventHandlers() {
this._handleWindowResizeBound = this._handleWindowResize.bind(this);
window.addEventListener('resize', this._handleWindowResizeBound);
this._handleTabClickBound = this._handleTabClick.bind(this);
this.el.addEventListener('click', this._handleTabClickBound);
}
/**
* Remove Event Handlers
*/
_removeEventHandlers() {
window.removeEventListener('resize', this._handleWindowResizeBound);
this.el.removeEventListener('click', this._handleTabClickBound);
}
/**
* Handle window Resize
*/
_handleWindowResize() {
this._setTabsAndTabWidth();
if (this.tabWidth !== 0 && this.tabsWidth !== 0) {
this._indicator.style.left = this._calcLeftPos(this.$activeTabLink) + 'px';
this._indicator.style.right = this._calcRightPos(this.$activeTabLink) + 'px';
}
}
/**
* Handle tab click
* @param {Event} e
*/
_handleTabClick(e) {
let tab = $(e.target).closest('li.tab');
let tabLink = $(e.target).closest('a');
// Handle click on tab link only
if (!tabLink.length || !tabLink.parent().hasClass('tab')) {
return;
}
if (tab.hasClass('disabled')) {
e.preventDefault();
return;
}
// Act as regular link if target attribute is specified.
if (!!tabLink.attr('target')) {
return;
}
// Make the old tab inactive.
this.$activeTabLink.removeClass('active');
let $oldContent = this.$content;
// Update the variables with the new link and content
this.$activeTabLink = tabLink;
this.$content = $(M.escapeHash(tabLink[0].hash));
this.$tabLinks = this.$el.children('li.tab').children('a');
// Make the tab active.
this.$activeTabLink.addClass('active');
let prevIndex = this.index;
this.index = Math.max(this.$tabLinks.index(tabLink), 0);
// Swap content
if (this.options.swipeable) {
if (this._tabsCarousel) {
this._tabsCarousel.set(this.index, () => {
if (typeof this.options.onShow === 'function') {
this.options.onShow.call(this, this.$content[0]);
}
});
}
} else {
if (this.$content.length) {
this.$content[0].style.display = 'block';
this.$content.addClass('active');
if (typeof this.options.onShow === 'function') {
this.options.onShow.call(this, this.$content[0]);
}
if ($oldContent.length && !$oldContent.is(this.$content)) {
$oldContent[0].style.display = 'none';
$oldContent.removeClass('active');
}
}
}
// Update widths after content is swapped (scrollbar bugfix)
this._setTabsAndTabWidth();
// Update indicator
this._animateIndicator(prevIndex);
// Prevent the anchor's default click action
e.preventDefault();
}
/**
* Generate elements for tab indicator.
*/
_createIndicator() {
let indicator = document.createElement('li');
indicator.classList.add('indicator');
this.el.appendChild(indicator);
this._indicator = indicator;
setTimeout(() => {
this._indicator.style.left = this._calcLeftPos(this.$activeTabLink) + 'px';
this._indicator.style.right = this._calcRightPos(this.$activeTabLink) + 'px';
}, 0);
}
/**
* Setup first active tab link.
*/
_setupActiveTabLink() {
// If the location.hash matches one of the links, use that as the active tab.
this.$activeTabLink = $(this.$tabLinks.filter('[href="' + location.hash + '"]'));
// If no match is found, use the first link or any with class 'active' as the initial active tab.
if (this.$activeTabLink.length === 0) {
this.$activeTabLink = this.$el
.children('li.tab')
.children('a.active')
.first();
}
if (this.$activeTabLink.length === 0) {
this.$activeTabLink = this.$el
.children('li.tab')
.children('a')
.first();
}
this.$tabLinks.removeClass('active');
this.$activeTabLink[0].classList.add('active');
this.index = Math.max(this.$tabLinks.index(this.$activeTabLink), 0);
if (this.$activeTabLink.length) {
this.$content = $(M.escapeHash(this.$activeTabLink[0].hash));
this.$content.addClass('active');
}
}
/**
* Setup swipeable tabs
*/
_setupSwipeableTabs() {
// Change swipeable according to responsive threshold
if (window.innerWidth > this.options.responsiveThreshold) {
this.options.swipeable = false;
}
let $tabsContent = $();
this.$tabLinks.each((link) => {
let $currContent = $(M.escapeHash(link.hash));
$currContent.addClass('carousel-item');
$tabsContent = $tabsContent.add($currContent);
});
let $tabsWrapper = $('<div class="tabs-content carousel carousel-slider"></div>');
$tabsContent.first().before($tabsWrapper);
$tabsWrapper.append($tabsContent);
$tabsContent[0].style.display = '';
// Keep active tab index to set initial carousel slide
let activeTabIndex = this.$activeTabLink.closest('.tab').index();
this._tabsCarousel = M.Carousel.init($tabsWrapper[0], {
fullWidth: true,
noWrap: true,
onCycleTo: (item) => {
let prevIndex = this.index;
this.index = $(item).index();
this.$activeTabLink.removeClass('active');
this.$activeTabLink = this.$tabLinks.eq(this.index);
this.$activeTabLink.addClass('active');
this._animateIndicator(prevIndex);
if (typeof this.options.onShow === 'function') {
this.options.onShow.call(this, this.$content[0]);
}
}
});
// Set initial carousel slide to active tab
this._tabsCarousel.set(activeTabIndex);
}
/**
* Teardown normal tabs.
*/
_teardownSwipeableTabs() {
let $tabsWrapper = this._tabsCarousel.$el;
this._tabsCarousel.destroy();
// Unwrap
$tabsWrapper.after($tabsWrapper.children());
$tabsWrapper.remove();
}
/**
* Setup normal tabs.
*/
_setupNormalTabs() {
// Hide Tabs Content
this.$tabLinks.not(this.$activeTabLink).each((link) => {
if (!!link.hash) {
let $currContent = $(M.escapeHash(link.hash));
if ($currContent.length) {
$currContent[0].style.display = 'none';
}
}
});
}
/**
* Teardown normal tabs.
*/
_teardownNormalTabs() {
// show Tabs Content
this.$tabLinks.each((link) => {
if (!!link.hash) {
let $currContent = $(M.escapeHash(link.hash));
if ($currContent.length) {
$currContent[0].style.display = '';
}
}
});
}
/**
* set tabs and tab width
*/
_setTabsAndTabWidth() {
this.tabsWidth = this.$el.width();
this.tabWidth = Math.max(this.tabsWidth, this.el.scrollWidth) / this.$tabLinks.length;
}
/**
* Finds right attribute for indicator based on active tab.
* @param {cash} el
*/
_calcRightPos(el) {
return Math.ceil(this.tabsWidth - el.position().left - el[0].getBoundingClientRect().width);
}
/**
* Finds left attribute for indicator based on active tab.
* @param {cash} el
*/
_calcLeftPos(el) {
return Math.floor(el.position().left);
}
updateTabIndicator() {
this._setTabsAndTabWidth();
this._animateIndicator(this.index);
}
/**
* Animates Indicator to active tab.
* @param {Number} prevIndex
*/
_animateIndicator(prevIndex) {
let leftDelay = 0,
rightDelay = 0;
if (this.index - prevIndex >= 0) {
leftDelay = 90;
} else {
rightDelay = 90;
}
// Animate
let animOptions = {
targets: this._indicator,
left: {
value: this._calcLeftPos(this.$activeTabLink),
delay: leftDelay
},
right: {
value: this._calcRightPos(this.$activeTabLink),
delay: rightDelay
},
duration: this.options.duration,
easing: 'easeOutQuad'
};
anim.remove(this._indicator);
anim(animOptions);
}
/**
* Select tab.
* @param {String} tabId
*/
select(tabId) {
let tab = this.$tabLinks.filter('[href="#' + tabId + '"]');
if (tab.length) {
tab.trigger('click');
}
}
}
M.Tabs = Tabs;
if (M.jQueryLoaded) {
M.initializeJqueryWrapper(Tabs, 'tabs', 'M_Tabs');
}
})(cash, M.anime);
.tabs {
&.tabs-transparent {
background-color: transparent;
.tab a,
.tab.disabled a,
.tab.disabled a:hover {
color: rgba(255,255,255,0.7);
}
.tab a:hover,
.tab a.active {
color: #fff;
}
.indicator {
background-color: #fff;
}
}
&.tabs-fixed-width {
display: flex;
.tab {
flex-grow: 1;
}
}
position: relative;
overflow-x: auto;
overflow-y: hidden;
height: 48px;
width: 100%;
background-color: $tabs-bg-color;
margin: 0 auto;
white-space: nowrap;
.tab {
display: inline-block;
text-align: center;
line-height: 48px;
height: 48px;
padding: 0;
margin: 0;
text-transform: uppercase;
a {
&:focus,
&:focus.active {
background-color: transparentize($tabs-underline-color, .8);
outline: none;
}
&:hover,
&.active {
background-color: transparent;
color: $tabs-text-color;
}
color: rgba($tabs-text-color, .7);
display: block;
width: 100%;
height: 100%;
padding: 0 24px;
font-size: 14px;
text-overflow: ellipsis;
overflow: hidden;
transition: color .28s ease, background-color .28s ease;
}
&.disabled a,
&.disabled a:hover {
color: rgba($tabs-text-color, .4);
cursor: default;
}
}
.indicator {
position: absolute;
bottom: 0;
height: 2px;
background-color: $tabs-underline-color;
will-change: left, right;
}
}
// Fixed Sidenav hide on smaller
@media #{$medium-and-down} {
.tabs {
display: flex;
.tab {
flex-grow: 1;
a {
padding: 0 12px;
}
}
}
}