PDA

View Full Version : How to make labelWidth be auto?



alicexyl
4 Oct 2012, 1:50 PM
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?

Tim Toady
4 Oct 2012, 1:54 PM
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.

alicexyl
4 Oct 2012, 1:58 PM
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.

Tim Toady
4 Oct 2012, 2:09 PM
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

alicexyl
4 Oct 2012, 2:12 PM
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.

Tim Toady
4 Oct 2012, 3:19 PM
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.

alicexyl
5 Oct 2012, 12:25 PM
Actually I have to set labelWidth = false for labelStyle to work:

{
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:
39189
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.

JesusMF
8 Sep 2017, 5:33 AM
labelWidth:'auto'

or

labelStyle:"width:auto;"

worked for me.

Thanks a lot, I spent a lot of time with this silly problem.