PDA

View Full Version : How to set the labels background width?



profunctional
24 Jun 2010, 8:37 AM
I have a login form with the label "Remember Me". I was able to add the "style" attribute to the item to set white-space:nowrap, but now the text runs longer than the background color. How do I set the background to run the length of the text? Thanks again.

TommyMaintz
24 Jun 2010, 10:58 AM
Could you please provide an example app somewhere that we can look at? This would make it easier for us to help you.

profunctional
24 Jun 2010, 11:13 AM
21104

Here is a screenshot. Notice how the ? is outside of the field's label bg. I would just like the bg color to extend to the right some more.

Thanks again.

TommyMaintz
24 Jun 2010, 11:19 AM
I think the only way to do this right now is by changing the width of your label inside css. Forms and Fields are still very basic in Sencha Touch, but soon we will have labelWidth as a config option on fields.

skydance
30 Jun 2010, 6:13 AM
Hi Tommy, Which css that I need to change? Thanks in advance, much appreciated

profunctional
30 Jun 2010, 7:04 AM
I tried a lot of things. I don't think you can change it. What I ended up doing was changing "Remember Me?" to "Save Login?". You may need to shorten your label to fix this.

skydance
30 Jun 2010, 7:18 AM
I found out the css that you can change the size on ext-touch.css, try to use css-debug instead, it gives you more sense to look through:

.x-form-fieldset .x-label-align-left label, .x-form-fieldset .x-label-align-right label {
width: 10em; /* <--- default is 7em
position: absolute;
top: 0; }

nikolayLevin
6 Jul 2010, 1:19 AM
@skydance, changing width 7em to 10 em makes labelWidth longer but it overflows. I also want to grow labelWidth and i changed css as below. But then i couldnt typed into textfield. If i changed width in css the textfield becomes unclickable. I think we need to do some more changes in css but i couldnt find. If there is anyone solved this problem help me pls
.x-form-fieldset .x-label-align-left label, .x-form-fieldset .x-label-align-right label {
width: 10em; /* <--- default is 7em
position: absolute;
top: 0; }

mrsixcount
7 Jul 2010, 10:57 AM
Hi Tommy do you know when you will have the labelWidth Config option? I tried to change the css but the input fields go under the label I even changed the following from 7.6 to 11.6 but it still shows up underneath.

.x-form-fieldset .x-field.x-label-align-left label + input[type="text"], .x-form-fieldset .x-field.x-label-align-left label + input[type="number"], .x-form-fieldset .x-field.x-label-align-left label + input[type="password"], .x-form-fieldset .x-field.x-label-align-left label + input[type="url"], .x-form-fieldset .x-field.x-label-align-left label + input[type="email"], .x-form-fieldset .x-field.x-label-align-left label + textarea, .x-form-fieldset .x-field.x-label-align-left label + .x-field-slider {
margin-left:10.6em; }

EDIT: changed the above from padding to margin and also added
.x-form-fieldset .x-field.x-label-align-left label + .x-spinner {margin-left: 10.6em; }
.x-form-fieldset .x-field.x-label-align-left select {margin-left: 10.6em; }

and this has now moved the inputs over. This is an interm solution until they have the labelwidths attribute.

meyerovb
20 Jul 2010, 6:39 AM
Bump: can this thread be moved to the feature request board and an eta be given for the labelWidth property. Also, will labelWidth be added to FieldSet or Field?

meyerovb
20 Jul 2010, 6:56 AM
FYI: setting the labelAlign to 'top' on the field seems to mitigate the issue