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

 
 ((("[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
 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
 
 [[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
 <<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
 <<dummy/../../../framework/datamodel/datamodel-itembinding#datamodel.itembinding,"Creating
 Forms by Binding Fields to Items">> regarding forms.
 
-Bean Binding
 [[components.textfield.length]]
 == String Length
 
 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
 null. This default assumption is a safeguard for data sources that may not allow
 null values.
 
-
 [source, java]
 ----
 // Have a property with null value
 
 ((("[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
 done in the following example that demonstrates how to create a text length
 counter:
 
-
 [source, java]
 ----
 // Text field with maximum length
 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 { }
 
 For example, the following custom style uses dashed border:
 
-
 [source, css]
 ----
 .v-textfield-dashing {
 [classname]#TextField#. This ensures that the style of different text input
 boxes is similar.
 
-
 (((range="endofrange", startref="term.components.textfield")))
-
-