1. #1
    Sencha User
    Join Date
    Jul 2011
    Location
    San Francisco, CA
    Posts
    103
    Answers
    2
    Vote Rating
    5
    alicexyl is on a distinguished road

      0  

    Question Unanswered: How to make labelWidth be auto?

    Unanswered: How to make labelWidth be auto?


    I have a field with label on the left. I'd like the label width not to be a specific number but to accommodate the length of the label text. I tried using labelWidth: 'auto', and it looks to work, except the CSS generated is "width: autopx", which is invalid.

    Is there a way to do this and generate valid CSS?

  2. #2
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    536
    Answers
    61
    Vote Rating
    70
    Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough

      0  

    Default


    I am not aware of a built in way to do this. It can't just be css because it is dependent on the size of all the fields. 30px might be the correct size for one field but another field in the form might have a longer label. You want them all to have the same size so they line up.

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Location
    San Francisco, CA
    Posts
    103
    Answers
    2
    Vote Rating
    5
    alicexyl is on a distinguished road

      0  

    Default


    In my current scenario, I have a bunch of fields laid out horizontally, so fields don't need to line up like in a traditional form.

  4. #4
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    536
    Answers
    61
    Vote Rating
    70
    Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough

      0  

    Default


    You might be better off using the label component instead of the fieldLabel then.
    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Label

  5. #5
    Sencha User
    Join Date
    Jul 2011
    Location
    San Francisco, CA
    Posts
    103
    Answers
    2
    Vote Rating
    5
    alicexyl is on a distinguished road

      0  

    Default


    I need to be able to show/hide a field and its label at the same time, so I find fieldLabel to be a cleaner solution than using a separate label component. If I use a separate label component, then I have to manage that when I show/hide the field, or I have to put the field and label inside a container so I can show/hide the container, but that seems to be unnecessary extra DOM.

  6. #6
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    536
    Answers
    61
    Vote Rating
    70
    Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough

      0  

    Default


    I just realized to achieve what you originally wanted, you could use labelStyle: 'width: auto' on your fields.

    --Edit--
    Actually that is a bit hacky since you still have to deal with the width of the entire field. I think you are better off going with label components. I don't think you are going to find a perfect solution. With the label components you will need to either nest them or have listeners on them to hide/show the previous component.

  7. #7
    Sencha User
    Join Date
    Jul 2011
    Location
    San Francisco, CA
    Posts
    103
    Answers
    2
    Vote Rating
    5
    alicexyl is on a distinguished road

      0  

    Default


    Actually I have to set labelWidth = false for labelStyle to work:
    Code:
    	            {
    	            	xtype: 'datefield',
    	            	name: 'date2',
    	            	fieldLabel: 'and', 
    	            	labelSeparator: '',
    	            	labelWidth: false,
    	            	labelStyle: 'width: auto'
    	            }
    For my purpose, where I just want fields to be laid horizontally next to each other, I think the solution's fine:
    datefields.png
    Specifying the width for the field just affects the field, not its label width. I suppose it's not the cleanest solution since the label doesn't actually explain what the field is, but it makes the code simpler.

Thread Participants: 1

Tags for this Thread