Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    27
    Vote Rating
    0
    atula_a1 is on a distinguished road

      0  

    Default selectfield , textfield display incorrect

    selectfield , textfield display incorrect


    Sencha Touch version tested:
    • 1.1.0

    Platform tested against:
    • iPhone
    • iPad
    • SamsungI9100


    Description:
    • field of selectfield , textfield display incorrect when label too long.
      Bottom backgroup color has color of style .x-form .x-panel-body ( default is #eee )
      label long.png

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Please don't mark your own bug report as open. You can correct this via simple CSS.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    27
    Vote Rating
    0
    atula_a1 is on a distinguished road

      0  

    Default


    Ok mitchell.
    Can you show me that css ?
    Thanks a lot!

  4. #4
    Sencha User WallTearer's Avatar
    Join Date
    Jan 2012
    Location
    Kiev, Ukraine
    Posts
    19
    Vote Rating
    0
    WallTearer is on a distinguished road

      0  

    Default


    Sorry for possible duplicate, but I think this might help the topicstarter. I've posted the same reply in the similar topic.
    Here's the fix that worked in my case, that I've posted on stackoverflow
    You're a true obsessive programmer, if your answers to the questions are totally correct and totally useless at the same time.

  5. #5
    Sencha User
    Join Date
    Aug 2011
    Posts
    27
    Vote Rating
    0
    atula_a1 is on a distinguished road

      0  

    Default


    Hi Wall Tearer
    Thanks you. Your solution is the best in options.

    - In css file
    .x-form-label span {
    word-wrap: break-word; /*to avoid words that exceed length of the label*/
    }


    .x-input {
    /*
    the fix was working even without this,
    but I'm leaving it here for more stability
    */
    position: relative;
    }
    .x-input input {
    /*basically, the main 4 magic lines of the fix*/
    position: absolute;
    height:100%;
    width: 70%;
    right: 0;


    /*for more reliability*/
    top: 0;
    bottom: 0;
    }




    - Assign 'x-input' class to the element in Sencha app




    {
    xtype : 'datepickerfield',
    name : 'removeDateEdit',
    id : 'removeDateEdit',
    label : 'Remove Date:',
    picker : {
    yearFrom : 1981,
    yearTo : 2015
    },
    value : removeDate,
    cls: 'x-input',
    labelWidth:'40%'
    }

Thread Participants: 2