selectfield , textfield display incorrect

[atula_a1]

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

[mitchellsimoens]

Please don't mark your own bug report as open. You can correct this via simple CSS.

[atula_a1]

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

[WallTearer]

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

[atula_a1]

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%'
}