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
    Location
    Gainesville, FL
    Posts
    40,450
    Answers
    3997

    Default

    Try some CSS like:

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

    Code:
    Ext.Viewport.add({
        xtype          : 'tabpanel',
        tabBarPosition : 'bottom',
        items          : [
            {
                title : 'Foo',
                tab   : {
                    cls : 'no-icon'
                }
            }
        ]
    });
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

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
  •