PDA

View Full Version : selectfield , textfield display incorrect



atula_a1
14 Jan 2012, 1:53 AM
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 )
30708

mitchellsimoens
15 Jan 2012, 2:12 PM
Please don't mark your own bug report as open. You can correct this via simple CSS.

atula_a1
16 Jan 2012, 2:24 AM
:) Ok mitchell.
Can you show me that css ?
Thanks a lot!

WallTearer
19 Jan 2012, 4:53 AM
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 (http://stackoverflow.com/questions/6297495/sencha-touch-checkboxfield-has-funky-layout-with-long-label/8926265#8926265)

atula_a1
1 Feb 2012, 5:51 PM
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%'
}