Results 1 to 2 of 2

Thread: TabPanel bottom-docked without Icons

  1. #1

    Default TabPanel bottom-docked without Icons

    what would be the correct way to handle the dimension of the bottom-aligned tabpanel-bar, if I don't want to use icons?
    I wasn't able to apply a css to change it myself (you could apply it to the tabbar, or even apply to the buttons in the tabbar, but it doesn't change this layout);
    For now, I was able to remove the blue background colour, by changing directly the app.css values, but it's sure not the correct way!

    this would help for the colour, but the height of the tabbar remains the same;
    how can I reduce it, as there are no icons for this bar?

    what I changed in the app.css

    /* line 170, /home/teamcity/buildAgent/work/856564e37705b5b7/touch/resources/themes/stylesheets/sencha-touch/default/src/tab/_Panel.scss */
    .x-tabbar-dark.x-docked-bottom .x-tab-active {
    background-image: none;
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    /* disable old values!
    background-color: #0b3c5e;
    background-image: -webkit-linear-gradient(top, #061f31, #092e47 10%, #0b3c5e 65%, #0c3e60);
    background-image: -moz-linear-gradient(top, #061f31, #092e47 10%, #0b3c5e 65%, #0c3e60);
    background-image: -o-linear-gradient(top, #061f31, #092e47 10%, #0b3c5e 65%, #0c3e60);
    background-image: -ms-linear-gradient(top, #061f31, #092e47 10%, #0b3c5e 65%, #0c3e60);
    text-shadow: rgba(0, 0, 0, 0.5) 0 -0.08em 0;
    -webkit-box-shadow: #092e47 0 0 0.25em inset;
    -moz-box-shadow: #092e47 0 0 0.25em inset;
    box-shadow: #092e47 0 0 0.25em inset;

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL


    Try some CSS like:

    .x-tabbar.x-docked-bottom {
        height : 48px;
    .x-tabbar.x-docked-bottom .x-button-icon.x-hidden {
        display : none;
    .x-tabbar.x-docked-bottom .x-button-label, .x-tabbar.x-docked-bottom .x-badge {
        font-size   : 15px;
        padding-top : 13px;
    I added the no-icon class to the tab manually:

        xtype          : 'tabpanel',
        tabBarPosition : 'bottom',
        items          : [
                title : 'Foo',
                tab   : {
                    cls : 'no-icon'
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:

    Posts are my own, not any current, past or future employer's.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts