Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

column layout - column width

Avatar

Level 4

Hi,

i have a column layout like this:

<tab1 jcr:primaryType="cq:Widget" hideMode="offsets" title="Column 1" xtype="panel"> <items jcr:primaryType="cq:WidgetCollection"> <Link jcr:primaryType="cq:Widget" cls="headerBold" layout="column" title="link" xtype="dialogfieldset"> <items jcr:primaryType="cq:WidgetCollection"> <title jcr:primaryType="cq:Widget" emptyText="text" name="./title1" xtype="textfield"/> <url jcr:primaryType="cq:Widget" emptyText="url" name="./link1" xtype="pathfield"/> </items> </Link> </items> </tab1>

How can i set a percentege width?

 

I have also a similar problem with a custom field:

CompositeLink = CQ.Ext.extend(CQ.form.CompositeField, { constructor: function (config) { config = config || {}; var defaults = { "border": false, "layout": "form" }; config = CQ.Util.applyDefaults(config, defaults); CompositeLink.superclass.constructor.call(this, config); }, //overriding CQ.Ext.Component#initComponent initComponent: function () { CompositeLink.superclass.initComponent.call(this); // Hidden field this.hiddenField = new CQ.Ext.form.Hidden({ name: this.name }); this.add(this.hiddenField); this.mainPanel = new CQ.Ext.Container({ layout:"column", autoScroll:true }); this.add(this.mainPanel); this.nameLink = new CQ.Ext.form.TextField({ emptyText:"text", listeners: { change: { scope: this, fn: this.updateHidden } } }); this.mainPanel.add(this.nameLink); this.urlLink = new CQ.form.PathField({ emptyText:"url", listeners: { change: { scope: this, fn: this.updateHidden }, dialogclose: { scope: this, fn: this.updateHidden } } }); this.mainPanel.add(this.urlLink); // Link openInNewWindow this.targetLink = new CQ.Ext.form.ComboBox({ triggerAction: 'all', mode: 'local', store: new CQ.Ext.data.ArrayStore({ fields: [ 'myId', 'displayText' ], data: [['inject', 'inject'], ['_self', 'self'], ['_blank', 'blank'], ['overlay', 'overlay']] }), valueField: 'myId', displayField: 'displayText', forceSelection: true, emptyText:'target', listeners:{ scope: this, 'select': this.updateHidden }, }); this.mainPanel.add(this.targetLink ); }, processInit: function (path, record) { this.nameLink.processInit(path, record); this.urlLink.processInit(path, record); this.targetLink.processInit(path, record); }, setValue: function (value) { var items = value.split("|"); if (items.length > 0) this.nameLink.setValue(items[0]); if (items.length > 1) this.urlLink.setValue(items[1]); if (items.length > 2) this.targetLink.setValue(items[2]); this.hiddenField.setValue(value); }, getValue: function () { return this.getRawValue(); }, getRawValue: function () { var link = this.nameLink.getValue() + "|" + this.urlLink.getValue() + "|" + this.targetLink.getValue(); return link; }, updateHidden: function () { this.hiddenField.setValue(this.getValue()); } }); CQ.Ext.reg('compositelink', CompositeLink);

How can i set now the percentage width?

 

Thanks

0 Replies

Avatar

Level 10

Hi,

When working with column layout you have option for setting width in % using columnWidth,

Please refer to the complete explanation here @ https://docs.adobe.com/docs/en/cq/5-6/widgets-api/index.html?class=CQ.Ext.layout.ColumnLayout

Avatar

Administrator

Hi samuel786431

 

There is a community article on Creating custom columns, this article uses bootstrap for doing the same.

Link:- https://helpx.adobe.com/experience-manager/using/custom_columns.html

I hope this would help you.

 

Thanks and Regards

Kautuk Sahni