If you are seeing this message it is likely that the master layout is unavailable. Please contact helpdesk and raise a support case.

Side col formsTip

TipMenu

Now with added tooltips!

Input fields in either side panel are adjusted in size and layout. This is activated in CSS where a sideCol class is found in a parent element.

Non-editable

Option C is set as disabled

OptionA Option B
Example validation notification
Actions

Fields that provide an action to edit are placed with a <div class="edit">. This will reduce the width of the input field allowing for an inline button.

FormsTip

TipMenu

Now with added tooltips!

Example form

The default set-up for form elements follows that generated by MVC scaffolding. Therefore all labels are enclosed in <div class="editor-label"></div> and the input elements are enclosed in <div class="editor-field"></div>

Should you need to use an inline element such as a <span> the CSS will maintain integrity.

 

Example validation notification
12345abcde

In order to accomodate a textarea the tag containing the class editor-field requires an additional class of areaField to allow for an input area with a greater height.

view codeSample HTML code
<div class="editor-field areaField">
    <textarea id="textArea" rows="3" cols="5"></textarea>
</div>

The following select boxes have option 2 set as diabled.

In the instances where extra information needs to be presented with input fields place a <div class="icon32 icon-timeTravel32 launchHTMLtooltip"></div>Tooltip text<div></div> immediately after the <input /> element making sure it is inside the <div class="editor-field">. This example uses the time machine icon to show the previous state of the field.

Time machine

TipTime travel

Value: xxxx
User: xxxx
Date: xx/xx/xxxx

Option A Option B

Button options

All submit buttons require class="button" to style appropriately.
Adaptations to this such as the delete button are simply additional CSS calls such as class="button delete".

Hyperlinks designed to look like buttons simply require class="button" to be added to the <a> tag.
Again, adaptations to this such as delete styling can be added by adding classes such as class="button delete"

Hyperlink button Hyperlink delete

Slim buttons are used primarily in tables but not exclusively. Therefore class="slimButton" is appended to buttons and hyperlinks where required.
Again, adaptations are done by adding classes.

Col A Col B
Slim button
Slim hyperlink button Hyperlink slim buttonHyperlink slim delete button

There are occasions when the action buttons will need to be inline.

In these instances the button/hyperlink must be an icon type (32px width) and placed immediately next to the relevant element such as a <div class="editor-field"> … </div>

The input parent element will need an additional CSS call to accomodate the inline buttons.

There are 2 CSS definitions based on the need to accomodate one or two buttons:

.inline1ButtonSpace

.inline2ButtonSpace

In this example the input parent is <div class="editor-field inline1ButtonSpace">

Delete

In this example the input parent is <div class="editor-field inline2ButtonSpace">

Save Delete

Alternative layouts

Where inputs need to be displayed side by side a simple <table> is used.
drop down
Example validation notification
Example validation notification

 

Emphasised forms

Some form elements on a page need to be distinctly different from the rest. An example of this is when you have a form with several pre-populated items and also need to be able to add an item.
This is achieved by putting the "add" section within a <fieldset class="generalMassage"> tag.

This sets the widths of the contained elements to be slightly smaller in order to accomodate the padding of the generalMessage class definition.

The legend tag is used to display the title of the section. This is achieved by setting the fieldset css position:relative and the legend css to position:absolute and setting an absolute height relative to the top of the fieldset.

Add section

Where inputs need to be displayed side by side a simple <table> is used.
Example validation notification
Example validation notification
Example validation notification
Example validation notification
Example validation notification
Example validation notification

 

Emphasised forms

Some form elements on a page need to be distinctly different from the rest. An example of this is when you have a form with several pre-populated items and also need to be able to add an item.
This is achieved by putting the "add" section within a <fieldset class="generalMassage"> tag.

This sets the widths of the contained elements to be slightly smaller in order to accomodate the padding of the generalMessage class definition.

The legend tag is used to display the title of the section. This is achieved by setting the fieldset css position:relative and the legend css to position:absolute and setting an absolute height relative to the top of the fieldset.

Add section

Form input restrictions

Client-side jQuery has been added to help prevent users from inputting incorrect data types.

class="AlphaNumericOnly" restricts charachters such as £ $ % { | / etc.

class="AlphaOnly" restricts to only allow text characters with the exception of comma(,).

class="NumberOnly" Allow only numbers.

class="MoneyOnly" Allow only numbers and a period(.).

class="PhoneOnly" Allow only numbers and phone related characters such as + ( ) [ ] and including space( ).

class="EmailOnly" Allow only email legal characters as well as informing the user if the email looks like a valid email type by the colour of the text entry.

© Copyright 2012 - 2024 Move with Us

Margins (form)Tip

TipMenu

Now with added tooltips!

The initial first two fields in this form are defined by sideCol being declared earlier on.

The remaining fields are contained within a table with the class thirdContainer is in order to layout as required for its design.

Discount Adhoc fee

Discount

£ %
Value
Client share
Supplier share
MWU share

Actions

Note: this example is for layout purposes only and does not contain the interactivity used in the final application.