Column Properties
Label: 'Above Control' selected

Plain Text Attribute (both group box or not)
Type: Dropdown or Text Input
Hide Label: Unchecked <----- Trigger :idea:
Layout Cell (label): Above Control
Width (text element): 350px
Description of attribute: Defined
Show Description: Any Selection

Result:
Description correctly displayed under the input control but the input control has been shrunk by more than half (maybe to 150px)

If the Hide label is checked it's all displayed fine

10 days later

Also,

if the label is longer than the input control it is restricted to the input control's width and not the column width

Example.

Label: Number of products in stock
Input: [___] Number 80px width

Label is cramped into 2 lines & and 90% of the 2nd line of text is displayed behind the input control and not visible.

Some CSS inspected
<div id="container-1066" class="x-container x-box-item x-container-default" style="overflow-x: hidden; left: 373px; margin: 0px; width: 373px; top: 0px;">

<table id="ext-comp-1067" class="x-field x-form-item x-field-default x-autocontainer-form-item x-form-invalid" style="width: 80px; table-layout: fixed;" cellpadding="0">

2 months later

Hi Support,

(Possible Solution)

The attribute <td> shrinks to 100px, the description <td> to 100px.

The problem may be in

Ext.define('AwareApp.Labelable', (aware_full.js Line 3113069)

  // Body of the input. That will be an input element, or, from a TriggerField, a table containing an input cell and trigger cell(s)
'<td class="{baseBodyCls} {fieldBodyCls}" id="{id}-bodyEl"  role="presentation" >',

By adding colspan="3" into the above <td>, the attribute is no longer cut to 100px and instead uses the full width.

Also, when displaying a 'description' under input or as a pop-up window, the attribute is not cut to 100px.

So the the line 31169 & 31170 code should be:

 // Body of the input. That will be an input element, or, from a TriggerField, a table containing an input cell and trigger cell(s)
	    '<td class="{baseBodyCls} {fieldBodyCls}" id="{id}-bodyEl" colspan="3" role="presentation" >',

If you look at Line 31139, the <td> contains colspan="3"

'<td id="{id}-labelCell" colspan="3" style="width:100%;{labelCellStyle}" {labelCellAttrs}>',

Can you please test it out and confirm if this is the case.

Cheers

The issue is now with the YES/NO attribute displaying description on the right.

Danm :cry:

it may not have been a solution, but I still feel is has to do with Ext.define('AwareApp.Labelable'

Aware creates <label>, <input> & the description all within a html <table> to display the attribute in the browser.

In Aware, when you edit attribute details within the from layout cell, you can specify the width of the input control eg 300px

But what happens is, Aware makes the <table> that hold everything the width of the input control (eg 300px) leaving no space for anything else & cuts the <input> width.

<table id="ext-comp-1025" class="x-field x-form-item x-field-default x-autocontainer-form-item" style="width: 300px; table-layout: fixed;" cellpadding="0">

And the <input> width 100% (which would be ok if the <td> is 300px):

<input id="ext-comp-1025-inputEl" type="text" size="1" name="AddressLine2" style="width:100%;" class="x-form-field x-form-text " autocomplete="off" aria-invalid="false" data-errorqtip="">

So you've got the 300px input and description or pop-up icon all in a table that's just not wide enough.

Solution would be for aware to create a <table> width the same as form column layout width and the sections of the <table> to accommodate all the values.

Cheers

Sample Bsv emailed.

Note: Form total width is 1000px

WORKING

  1. Form has 1 column
  2. Separator: Label to the left of controls
  3. Column properties Label: To the left of control
  4. Preview form.
    5 The labels, descriptions & input control is all displayed fine.

  • The tables created by aware <table> holding the address, address line 2 etc... has style="width:395px", ok that works.

BUG 1

  1. Form has 1 column
  2. Column label display properties are ignored & separator column properties are used instead. Bug?
  3. Set the separator label to 'Label above control'
  4. Preview form
  5. The input control is reduced to about 100px
  6. Description pop-up is displayed ok next to it.

    • The tables created by aware <table> holding the address, address line 2 etc... has style="width:300px", which is the length of the input control. Why is aware using this width to specify the table length?.

    BUG 2
  7. Insert a blank column
  8. Form now has 2 column
  9. Set the separator label to 'Left of the controls'
  10. Set the Column lablel: Above input control
  11. Now the column label display properties are recognised & separator column properties are ignored.
  12. Preview form
  13. Again, 5. The input control is reduced to about 100px
  14. Same table issue as in BUG 1

Aware support has already mentioned its a complex issue & they are working on it.

Cheers

a month later