Customize md-tabs from Angular Material

I'm using Angular Material for some parts of my project. At a point I use the md-tabs directive. (https://material.angularjs.org/latest/#/demo/material.components.tabs)

What I want to achieve is to center the tab labels (the ones allowing us to navigate between tabs on the 'header' of md-tabs)

This is now the only remaining issue : I also want to reduce the height and padding of this 'header' containing the label.

I tried a few things like :

.md-padding { padding: 4px; !important; } .md-pagination-wrapper { height: 4px; !important; }

Without success.

Here is a codepen : http://codepen.io/anon/pen/NqwrJO

Edit : It looks like we can change the height of the 'header' containing the labels by changing the canvas css height property in the codepen. However We can't change it's padding. And this property is not present in the demo on Angular Material website, so I'm not sure it should be used.

Edit 2 : In order to center the tabs, the only thing to do is add the parameter md-center-tabs to the md-tabs directive

Category:javascript Views:1 Time:2019-01-08

Related post

  • How can I programatically open a new page in a new tab from my codebind file in ASP.NET? 2009-08-01

    How can I programatically open a page in a new tab from my code behind file in ASP.NET after clicking on a button in my first page? Hopefully, from the new page I could also get to the Session[] array. --------------Solutions------------- "Code behin

  • How to remove the last tab from uitabbarcontroller if having only three tabs 2012-01-10

    Here i am trying to dynamically add and remove the tab from uitabbarcontroller . As well as replace them . My apps situation is as below. First view is Logon and about After successful logon new 3 tabs . With last as More and two other . In more Logo

  • Accidentally removed the View tab from the Menu Bar 2013-09-10

    Original Title: Restore Menu Bar I accidentally removed the "view" tab from the menu at the top of the page. Because the customize toolbar function was under that menu, I can't figure out how to get the view tab back onto the menu. Any ideas? -------

  • Bug: "Warn me when closing multiple tabs" doesn't work if General -> Startup ->"Start with tabs from the last session" is selected 2014-09-22

    "Warn me when closing multiple tabs" doesn't work if General -> Startup ->"Start with tabs from the last session" is selected. Using W7 64 Prof, SP1 --------------Solutions------------- Hi, Thank you for choosing Microsoft Community Forums. As

  • wxAuiNotebook - preventing certain tabs from closing 2009-04-19

    I'm experimenting with wx.aui.AuiNotebook; is there a way I can prevent particular tabs from being closed? i.e. I have an app that allows the user to create multiple tabs in an AuiNotebook, but the first 2 tabs are system managed and I don't want the

  • Overriding default jQuery UI tab from link on other page 2009-09-14

    I am using jQuery UI tabs (v1.7x) on the home page of a site I'm working on at the moment, and they are set up as follows: jQuery(document).ready(function($) { $("#mastheadhome").tabs({ selected:4, fx: {opacity: 'toggle'} }); }); It's all working gre

  • How to remove all spaces and tabs from a given string in C language? 2009-10-03

    What C function, if any, removes all preceding spaces and tabs from a string? Thanks. --------------Solutions------------- In C a string is identified by a pointer, such as char *str, or possibly an array. Either way, we can declare our own pointer t

  • How can i remove the tabs from tabcontrol using c# 2009-10-06

    How can i remove the tabs from tabcontrol when i reference each tab to the childform. I am using a tabcontrol, i want to remove a particular tab from the control. The value i have to do this in a string which i dynamically. How to remove the tab from

  • How to get text indent (tabs) from some text input? 2009-10-24

    For example, suppose I'm editing following text (\t is for tabs, it's not text) '\t\t\tSome text...' and my input keyboard position is right before 'S' (there is no selected text) and I want to get number of tabs before 'S' (in this case it's 3) So h

  • Prevent jQuery UI tabs from automatically loading content 2010-03-07

    Consider a page like this: <div id="tabs"> <ul> <li><a href="first">First</a></li> <li><a href="second">Second</a></li> </ul> <div id="tabContent" class="ui-tabs-panel"> This is

  • Android - Switch Tabs from within an Activity within a tab 2010-03-29

    Currently I have a TabHost implemented with 3 tabs each containing a separate activity. My question is how do I switch between tabs from within one of the activities that is located inside the tab host. I've looked everywhere and have been unsuccessf

  • Remove tab from UITabBar without UITabBarController 2010-05-04

    I'm using a UITabBar without a controller. I want to remove tabs from the UITabBar if certain conditions are met. For example, my UITabBar has 4 tabs set up in interface builder. If the scores module is not enabled at compile time, it should remove t

  • multiple jquery ui tabs - target one tab from another page 2010-06-30

    I'm using jQuery tabs on a long home page (scrolling down). The page has 3 sections which each use tabs and the viewer scrolls down to each section. I want to target specific tabs from other pages which works fine if the tabs are at the top of the pa

  • How to create dynamic tabs from a grid column on page load in extjs 2010-07-23

    I am generating data in a grid panel using json store. I have to generate tabs from the content of column 1 on page load . How can I generate those dynamic tabs from column 1? --------------Solutions------------- Thanks! I am following the same appro

  • How can i stop Eclipse's "Servers" tab from grabbing focus when start/stopping a server? 2010-09-10

    When using Eclipse IDE, anytime the the server (tomcat in my case) changes status (start, starting, stopping, stopped, etc...), the Servers tab becomes active. This is annoying because then I can't see Console. By default, I think Console has "Show C

  • Is it possible to hide a tab from a group of users in Team Foundation Server 2010? 2010-10-21

    I have a tab (Internal Development Review) on one of my work item forms that I would not like to show to all users: Is it possible to hide this from a specific user group (or conversely, to grant it to another group)? I cannot find a way to put permi

  • Change tabs from within webview 2010-11-02

    I've setup some webviews & with tabs in Appcelerator Titanium, but wondered: How can I change tabs from within the webview html? ie. I've split my app into 4 html pages (across 4 tabs). I have links in the html webviews which I would like to fire

  • How can I select a tab from the YUI TabView without clicking it based on URL arguments 2010-12-02

    I'm using the YUI TabView tab system. I want to be able to select a certain tab from this TabView without having to click it. I want it to automatically open based on arguments I'll pass via URL. I need to know what YUI event to call to make this hap

  • Remove all spaces, linebreaks, and tabs from anything outside a block 2010-12-16

    Ok, so I'm currently running this script to remove all the excess spaces, linebreaks, and tabs from my final HTML output: $html = preg_replace(array("/\t/", "/\s{2,}/", "/\n/"), array("", " ", " "), $html); However, I'm having a problem with my code

  • Chrome: How to close tab from within a page? 2011-01-06

    Is there a way to close Chrome Tab from within a html page? What i search for is some javascript that will will say: Click here to close tab! --------------Solutions------------- I think you can just use the window.close() function, just like you wou

  • jQuery tabs: creating tabs from div and li cutom format not the example way 2011-02-03

    I'm trying to create some tabs with Jquery, J*query UI tabs*, from this format that Drupal is ouputing me... I have several options to do the output, but this is the one I have selected, however NONE are resembles the one from the example given in th

  • How can i customize an XML from data table? 2011-03-17

    How can i customize an XML from data table? Or can i directly get the customized xml from sql server? Edited: I am getting some row in my data table, which i need to customized in the following format. <XML> <OfficeHours><monday>1:3

  • WPF tab from TabItem to TabItem within Tabcontrol 2011-04-18

    Any idea how to, with no code behind, within a WPF TabControl, tab from the last control on a given TabItem (maybe a textbox) to the first control on the next TabItem? --------------Solutions------------- I think you'd either need to derive from TabC

  • how to use buttons from HomeView to select tabs from uitabcontroller 2011-04-29

    My Apps main view is having 5 buttons and I'm having tabbarcontroller with 5 tabs.So I need to select each tabs from each button action. Thanks in advance --------------Solutions------------- Use self.tabBarController.selectedIndex = i; insted of i w

  • select last tab from a text link in jQuery UI tabs 2011-05-12

    I'm using jQuery UI tabs for product pages on my website. On some pages I have 2 tabs and on some 3. I would like to open last tab from a text link. The jquery tabs api just shows you how to go a particular tab if you know the tab index(let's say 2 t

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.093 (s). 11 q(s)