Removed mention of an outdated formatting trick. Also some wording and formatting fixes, as well as cleanup.

Change-Id: Iba0e209df41311a8e3ada7e96599318f95e62079

documentation/components/components-textfield.asciidoc

@@ -9,14 +9,12 @@ layout: page
 
 ((("[classname]#TextField#", id="term.components.textfield", range="startofrange")))
 
-
 [classname]#TextField# is one of the most commonly used user interface
 components. It is a [classname]#Field# component that allows entering textual
 values using keyboard.
 
 The following example creates a simple text field:
 
-
 [source, java]
 ----
 // Create a text field
@@ -38,7 +36,6 @@ in most other fields. The value can be acquired with [methodname]#getValue()#
 directly from the text field, as is done in the example below, or from the
 property reference of the event.
 
-
 [source, java]
 ----
 // Handle changes in the value
@@ -67,7 +64,7 @@ single-line text fields.
 
 [[figure.components.textfield.api]]
 .Text Field Class Relationships
-image::img/textfield-diagram-hi.png[]
+image::img/textfield-diagram-hi.png[width=50%]
 
 [[components.textfield.databinding]]
 == Data Binding
@@ -77,7 +74,6 @@ any property type that has a proper converter, as described in
 <<dummy/../../../framework/datamodel/datamodel-properties#datamodel.properties.converter,"Converting
 Between Property Type and Representation">>.
 
-
 [source, java]
 ----
 // Have an initial data model. As Double is unmodificable and
@@ -116,7 +112,6 @@ the Values in a Table">>, and
 <<dummy/../../../framework/datamodel/datamodel-itembinding#datamodel.itembinding,"Creating
 Forms by Binding Fields to Items">> regarding forms.
 
-Bean Binding
 [[components.textfield.length]]
 == String Length
 
@@ -129,21 +124,15 @@ length property is defined at [classname]#AbstractTextField# level.
 Notice that the maximum length setting does not affect the width of the field.
 You can set the width with [methodname]#setWidth()#, as with other components.
 Using __em__ widths is recommended to better approximate the proper width in
-relation to the size of the used font. There is no standard way in HTML for
-setting the width exactly to a number of letters (in a monospaced font). You can
-trick your way around this restriction by putting the text field in an
-undefined-width [classname]#VerticalLayout# together with an undefined-width
-[classname]#Label# that contains a sample text, and setting the width of the
-text field as 100%. The layout will get its width from the label, and the text
-field will use that.
-
-Fitting TextField width to fixed input length
+relation to the size of the used font, but the __em__ width is not exactly the
+width of a letter and varies by browser and operating system. There is no standard
+way in HTML for setting the width exactly to a number of letters (in a monospaced font).
+
 [[components.textfield.nullvalues]]
 == Handling Null Values
 
 ((("Null representation", id="term.components.textfield.nullvalues", range="startofrange")))
 
-
 ((("[methodname]#setNullRepresentation()#")))
 As with any field, the value of a [classname]#TextField# can be set as
 [parameter]#null#. This occurs most commonly when you create a new field without
@@ -164,7 +153,6 @@ representation string sets the value as the literal value of the string, not
 null. This default assumption is a safeguard for data sources that may not allow
 null values.
 
-
 [source, java]
 ----
 // Have a property with null value
@@ -196,7 +184,6 @@ image::img/textfield-nullrepresentation.png[]
 
 ((("[classname]#Text change events#", id="term.components.textfield.textchangeevents", range="startofrange")))
 
-
 Often you want to receive a change event immediately when the text field value
 changes. The __immediate__ mode is not literally immediate, as the changes are
 transmitted only after the field loses focus. In the other extreme, using
@@ -210,7 +197,6 @@ Text change events are received with a [classname]#TextChangeListener#, as is
 done in the following example that demonstrates how to create a text length
 counter:
 
-
 [source, java]
 ----
 // Text field with maximum length
@@ -278,14 +264,11 @@ sequentially one after another. Change events are nevertheless communicated
 asynchronously to the server, so further input can be typed while event requests
 are being processed.
 
-
-
 (((range="endofrange", startref="term.components.textfield.textchangeevents")))
 
 [[components.textfield.css]]
 == CSS Style Rules
 
-
 [source, css]
 ----
 .v-textfield { }
@@ -296,7 +279,6 @@ only of an element with the [literal]#++v-textfield++# style.
 
 For example, the following custom style uses dashed border:
 
-
 [source, css]
 ----
 .v-textfield-dashing {
@@ -317,7 +299,4 @@ that contain a text input field, even if the text input is not an actual
 [classname]#TextField#. This ensures that the style of different text input
 boxes is similar.
 
-
 (((range="endofrange", startref="term.components.textfield")))
-
-