Results 1 to 3 of 3

Thread: Combobox for tablets

  1. #1
    Sencha Premium Member
    Join Date
    Feb 2015
    Location
    Israel
    Posts
    114
    Answers
    3

    Default Answered: Combobox for tablets

    Hello everyone,

    I know Ext 5 is much more tablet-friendly but... what can I do... we're working with Ext 4 now.

    I managed to enlarge my combo box to suit better tablets:
    {
    xtype : 'combobox',
    width : 200,
    height : 40,
    fieldStyle : "font-size: 30px !important;"
    }

    I know using "!important" is hysterical but... it works.

    combo.PNG

    I also managed to change the image that is used to show an arrow going down. the one that opens the list of the combo box. But unfortunately, the "field" given to the the image is very small.

    combo2.PNG

    So I need help:

    1. Does anybody know how to make the room for image larger? (maybe using CSS)
    or:
    2. Does anybody know how to make a whole new combo box component which is larger than usual.

  2. Thank you very much for replying. It directed me to my solution.

    Code:
    {
    xtype: 'combobox', fieldStyle: "font-size: 30px !important;", emptyText: "choose", height: 50, triggerCls: 'big-combobox', store: [ 'one', 'two', 'three' ]
    }
    and ths is the CSS file. it allows you to "animated" the new big combo box "button" (image) you designed. of course u'll be needing three different ones: regular "button" image, hover one and clicked one (I made them 40px on 40px but you'll have to make it your size.

    Code:
    .big-combobox{
        background:transparent url(../images/tablet-combo.png) center 0 no-repeat !important; 
        width: 40px;
        height: 40px;
    }
     .big-combobox-over {
        background:transparent url(../images/tablet-combo-when-pressed.png) center 0 no-repeat !important; 
        width: 40px;
        height: 40px;
    }
    
    .big-combobox-over.big-combobox-click {
        background:transparent url(../images/tablet-combo-when-clicked.png) center 0 no-repeat !important; 
        width: 40px;
        height: 40px;
    }

  3. #2
    Sencha Premium Member
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,675
    Answers
    4

    Default

    this button is the trigger, so look for triggerCls, triggerWidth etc.

  4. #3
    Sencha Premium Member
    Join Date
    Feb 2015
    Location
    Israel
    Posts
    114
    Answers
    3

    Default Here is the answer to my question

    Thank you very much for replying. It directed me to my solution.

    Code:
    {
    xtype: 'combobox', fieldStyle: "font-size: 30px !important;", emptyText: "choose", height: 50, triggerCls: 'big-combobox', store: [ 'one', 'two', 'three' ]
    }
    and ths is the CSS file. it allows you to "animated" the new big combo box "button" (image) you designed. of course u'll be needing three different ones: regular "button" image, hover one and clicked one (I made them 40px on 40px but you'll have to make it your size.

    Code:
    .big-combobox{
        background:transparent url(../images/tablet-combo.png) center 0 no-repeat !important; 
        width: 40px;
        height: 40px;
    }
     .big-combobox-over {
        background:transparent url(../images/tablet-combo-when-pressed.png) center 0 no-repeat !important; 
        width: 40px;
        height: 40px;
    }
    
    .big-combobox-over.big-combobox-click {
        background:transparent url(../images/tablet-combo-when-clicked.png) center 0 no-repeat !important; 
        width: 40px;
        height: 40px;
    }

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
  •