"While creating screens in WebMaker, could you point me in the right direction for changing the spacing between the label and text boxes that I put on the screen. Please see attachmemt - in some instances the spacing seems appropriate for what I am trying to complete. However, in other cases it could be difficult to understand - for example the date field is very far away (screen real estate wise) from the "Date:" label. I would like to decrease that spacing."
Attachment
RE: Spacing between controls
The layout on WebMaker Pages is controlled via CSS. You can have application-wide CSS files as well as page-specific CSS files. You can see the files being used by looking within the Advanced Options links on the Application Map tab. The files listed on the left hand panel apply application-wide and the files on the right hand panel apply to the selected page. To avoid making changes that will apply to your whole application you should add separate CSS files and override the styles that are defined on the application-wide CSS files.
You can access the contents of these files by looking under the CSS Files link in the Fields Details tab on the top right-hand corner. You can then change the relevant widths of the classes that affect your desired labels and controls.
For this type of work it helps if you use the Developer Tools in IE or FireBug in FireFox, etc., (F12) to visualise the CSS styles being applied to individual elements. For example, for a Text Box you should see styles such as label, labelBackground, defaultBackground, textbox, etc.
If you simply want to make changes to a few fields then you also have the option of specifying some specific CSS Overrides, which will create CSS style markup on the actual resulting HTML page rather than use the CSS files. The exact combination depends on your requirements.
Some useful links:
http://www.hyfinity.com/node/96
http://www.hyfinity.com/node/148
Kind Regards
Abdul
RE: Spacing between controls
The standard CSS has a default of 150px for the label text. The width setting is applied to the labelBackground on the Field Details. You can search for 150px in the demo.css to see the specific CSS style.
If your goal is to shorten the single label for the "Date" field, simply use the CSS override for the Label Background Styling and set the width to perhaps 75px e.g. width: 75px;
For further details on general UI Look & Feel, please read this Forum Document (PDF).
RE: Spacing between controls