Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: How to set the labels background width?

  1. #1
    Touch Premium Member
    Join Date
    Jun 2010
    Posts
    324

    Default How to set the labels background width?

    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.

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243

    Default

    Could you please provide an example app somewhere that we can look at? This would make it easier for us to help you.

  3. #3
    Touch Premium Member
    Join Date
    Jun 2010
    Posts
    324

    Default

    sencha-login.gif

    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.

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243

    Default

    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.

  5. #5
    Ext JS Premium Member
    Join Date
    May 2010
    Posts
    4

    Default

    Hi Tommy, Which css that I need to change? Thanks in advance, much appreciated

  6. #6
    Touch Premium Member
    Join Date
    Jun 2010
    Posts
    324

    Default

    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.

  7. #7
    Ext JS Premium Member
    Join Date
    May 2010
    Posts
    4

    Default

    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; }

  8. #8

    Default

    @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; }

  9. #9

    Default

    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.

  10. #10
    Sencha User
    Join Date
    Jun 2010
    Posts
    220

    Default

    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?

Page 1 of 2 12 LastLast

Similar Threads

  1. Setting a combobox fieldLabel width to include long labels?
    By rtrocc in forum Ext 2.x: Help & Discussion
    Replies: 8
    Last Post: 21 May 2017, 10:59 PM
  2. Replies: 6
    Last Post: 31 Mar 2010, 1:22 AM
  3. Set field labels after rendering a form panel
    By zaccret in forum Community Discussion
    Replies: 12
    Last Post: 7 Jan 2010, 9:34 AM
  4. set style background
    By shuang in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 11 Sep 2008, 1:27 AM
  5. How to set Grid column width according to the title text width
    By maya in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 30 Jul 2007, 4:53 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •