1. #1
    Sencha Premium Member
    Join Date
    Jul 2011
    Posts
    118
    Vote Rating
    4
    john76543 is an unknown quantity at this point

      0  

    Default Button text size in Neptune

    Button text size in Neptune


    If you use scale: "large" in a toolbar button in Neptune, the text size gets massive.

    Eg I took examples/menu/menu.js and made the following modification (red for commented out, blue for added):

    Code:
    snip
        tb.add({
                text:'Button w/ Menu',
                //iconCls: 'bmenu',
    	    icon: "images/add.gif", // this is a bigger image
    	    iconAlign: "top",
    	    scale: "large",
                menu: menu  
            }
    snip
    Now run this and compare Classic and Neptune. With classic the button text is the same size as the others, with neptune it is larger.

    How do you get Neptune buttons to show larger images like this? A workaround would be appreciated.

    Ext 4.2.0, IE10 and Chrome 25, Windows 7

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,642
    Vote Rating
    582
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    It's controlled by:

    Code:
    $button-large-font-size: 16px !default;
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha Premium Member
    Join Date
    Jul 2011
    Posts
    118
    Vote Rating
    4
    john76543 is an unknown quantity at this point

      0  

    Default


    I'm staying away from SASS but I bodged this together which sort-of works:

    Code:
    .x-btn-default-toolbar-large .x-btn-inner
    {
    	font-size: 11px;
    }
    .x-btn-default-toolbar-large .x-btn-arrow
    {
    	background-image: url();	/* just remove the massive arrow */
    }
    .x-btn-default-toolbar-large .x-btn-arrow-right {
    	padding-right: 0px;
    }
    Help on how to get a regular down-arrow for menus would be appreciated. I've just hacked it out here because I couldn't make it work.

    Thanks,

Thread Participants: 1

Tags for this Thread