causeway-standard-theme
Version:
1,079 lines (1,021 loc) • 155 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2, minimum-scale=0.25">
<title>Causeway Theme</title>
<!--Favicon-->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="../css/causeway-utils.css" rel="stylesheet" media="screen">
<link href="../css/causeway-standard.css" rel="stylesheet" media="screen">
<link href="../docs/css/docs.css" rel="stylesheet" media="screen">
<link href="../css/causeway-print.css" rel="stylesheet" media="print">
</head>
<body>
<div class="container site-header">
<div class="site-header-holder">
<div class="site-heading">
<div class="site-logo"></div>
<h1 class="page-title">Causeway Style</h1>
<div class="account-management dropdown">
<div class="user-avatar">
<img src="../images/image_placeholder.png">
</div>
<div class="user-info">
<a data-toggle="dropdown" href="#">Hello Guest <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li>
<a>Logout</a>
</li>
</ul>
</div>
</div>
</div>
<nav class="navbar site-menu" role="navigation">
<div class="resp-back hidden-lg hidden-md">
<a href="#"><span class="fa fa-chevron-left"></span></a>
<span class="title">MENU</span>
</div>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="../docs/index.html#style" data-hover="dropdown"> Style <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/index.html#build"> Build Instructions </a>
</li>
<li>
<a href="../docs/index.html#javascript"> Javascript </a>
</li>
<li>
<a href="../docs/index.html#stylesheets"> Stylesheets </a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="../docs/shells.html#shells" data-hover="dropdown"> Shells <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a href="../docs/content.html#content"> Content </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/content.html#content-email"> Emails </a>
</li>
<li>
<a href="../docs/content.html#content-link"> Links </a>
</li>
<li>
<a href="../docs/content.html#content-page-header"> Page Header </a>
</li>
</ul>
</li>
<li>
<a href="../docs/shells.html#footer"> Footer </a>
</li>
<li>
<a href="../docs/shells.html#header"> Header </a>
</li>
<li>
<a href="../docs/left-navigation.html#left-navigation"> Left Navigation </a>
</li>
<li>
<a href="../docs/login.html"> Login page </a>
</li>
<li>
<a href="../docs/shells.html#single-pane"> Single Pane </a>
</li>
<li>
<a href="/docs/twopane-horizontal.html#twopane-horizontal"> Two Pane - Horizontal </a>
</li>
<li>
<a href="../docs/left-navigation-rightpane.html#leftnav-twopane"> Two Pane - Horizontal (Left Navigation Shell) </a>
</li>
<li>
<a href="../docs/twopane-vertical.html#twopane-vertical"> Two Pane - Vertical </a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="../docs/components.html#components" data-hover="dropdown"> Components <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/accordion.html#accordion"> Accordion </a>
</li>
<li>
<a href="../docs/breadcrumb.html#breadcrumb"> Breadcrumb </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/buttons.html#buttons"> Buttons </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/buttons.html#buttons-arrow"> Arrow Button </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-icon"> Icon Buttons </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-multi-action"> Multi-action Buttons </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-standard"> Standard Buttons </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-standard-icons"> Standard Buttons with Icons </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-text"> Text Button </a>
</li>
</ul>
</li>
<li>
<a href="../docs/components.html#dialog-box"> Dialog Box </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/forms.html#forms"> Forms </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/forms.html#forms-advanced-listbox"> Advanced Listbox </a>
</li>
<li>
<a href="../docs/forms.html#forms-checkbox"> Checkbox </a>
</li>
<li>
<a href="../docs/forms.html#forms-color"> Color </a>
</li>
<li>
<a href="../docs/forms.html#forms-currency"> Currency </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/date.html#forms-date"> Date </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/date.html#forms-date-range"> Date Range </a>
</li>
<li>
<a href="../docs/date.html#forms-date-single"> Single Date </a>
</li>
</ul>
</li>
<li>
<a href="../docs/forms.html#forms-email"> Email </a>
</li>
<li>
<a href="../docs/forms.html#forms-file"> File </a>
</li>
<li>
<a href="../docs/forms.html#forms-hyperlink"> Hyperlink </a>
</li>
<li>
<a href="../docs/forms.html#forms-image"> Image </a>
</li>
<li>
<a href="../docs/forms.html#forms-password"> Password </a>
</li>
<li>
<a href="../docs/forms.html#forms-radio"> Radiobutton </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/select.html#forms-select"> Select </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/select.html#forms-select-multiple"> Multiple Choice </a>
</li>
<li>
<a href="../docs/select.html#forms-select-single"> Single Choice </a>
</li>
</ul>
</li>
<li>
<a href="../docs/forms.html#forms-select-shuttle"> Select Shuttle </a>
</li>
<li>
<a href="../docs/forms.html#spinbox"> Spinbox </a>
</li>
<li>
<a href="../docs/forms.html#forms-telephone"> Telephone </a>
</li>
<li>
<a href="../docs/forms.html#forms-text"> Text </a>
</li>
<li>
<a href="../docs/forms.html#forms-textarea"> Textarea </a>
</li>
<li>
<a href="../docs/forms.html#forms-time"> Time </a>
</li>
<li>
<a href="../docs/forms.html#forms-tristate"> Tristate </a>
</li>
</ul>
</li>
<li>
<a href="../docs/components.html#lightbox"> LightBox </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/menus.html#menus"> Menus </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/menus.html#menus-dropdown"> Dropdown Menu </a>
</li>
<li>
<a href="../docs/menus.html#menus-dropdown-site"> Site Menu </a>
</li>
<li>
<a href="../docs/menus.html#menus-dropdown-page"> Page Menu </a>
</li>
<li>
<a href="../docs/menus.html#menus-three-line"> Three Line Menu </a>
</li>
</ul>
</li>
<li>
<a href="../docs/pagination.html#pagination"> Pagination </a>
</li>
<li>
<a href="../docs/site-notification.html#site-notification"> Site Notification </a>
</li>
<li>
<a href="../docs/status-indicator.html#status-indicator"> Status Indicator </a>
</li>
<li>
<a href="../docs/table.html#table"> Table </a>
</li>
<li>
<a href="../docs/components.html#tabstrip"> Tabstrip </a>
</li>
<li>
<a href="../docs/misc.html#tooltip"> Tooltip </a>
</li>
<li>
<a href="../docs/treegrid.html#treegrid"> Tree Grid </a>
</li>
<li>
<a href="../docs/treelist.html#treelist"> Tree List </a>
</li>
<li>
<a href="../docs/treesearchlist.html#treesearchlist"> Tree Search List </a>
</li>
<li>
<a href="../docs/treeview.html#treeview"> Tree View </a>
</li>
<li>
<a href="../docs/wizard.html#wizard"> Wizard </a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="../docs/icons.html#content-icons" data-hover="dropdown"> Icons <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/icons.html#favicon"> Favicon and App Icons </a>
</li>
<li>
<a href="../docs/icons.html#content-icons-available"> Available Icons </a>
</li>
<li>
<a href="../docs/icons.html#content-icons-use"> How to use </a>
</li>
</ul>
</li>
<li>
<a href="../docs/color-palette.html#color-palette"> Color Palette </a>
</li>
<li>
<a href="../index.html"> Download </a>
</li>
</ul>
<div class="additional-nav-info">
<ol class="breadcrumb">
<li><a href="#">Causeway LTD</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Company Name <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Sub Company A</a></li>
<li><a href="#">Sub Company B</a></li>
<li><a href="#">Sub Company C</a></li>
<li class="link"><a href="#">More</a></li>
</ul>
</li>
</ol>
<span class="cs-badge has-count">
<a href="#">
<span class="fa fa-shopping-cart"></span>
<span class="cs-badge-count">5</span>
</a>
</span>
<span class="site-notification has-notification">
<a href="#">
<span class="fa fa-bell"></span>
<span class="notification-count">5</span>
</a>
</span>
<span class="cs-badge has-count">
<a href="#">
<span class="fa fa-envelope"></span>
<span class="cs-badge-count">5</span>
</a>
</span>
<span class="additional-menu">
<a href="#" data-toggle="dropdown"> <span class="glyphicon glyphicon-threeLine-menu"></span> </a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Site Map</a></li>
<li><a href="#">Application Sample</a></li>
</ul>
</span>
</div>
</nav>
</div>
</div>
<!--Notification block starts here-->
<section class="notification-content-right">
<div class="notification-content-wrapper">
<div class="notification-header">
<h2>Notifications</h2>
</div>
<div class="notification-content">
<ul>
<li>
<strong>Far far away,</strong> behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.
</li>
<li>
<strong>It is a paradisematic country,</strong>in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
<a href="#">Find out more.</a>
</li>
<li>
<strong>It is a paradisematic country,</strong>in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
<a href="#">Find out more.</a>
</li>
<li>
You have <strong>One New</strong> Pending Invitation:
<a href="#">Carillion AMBS Limited</a>.
<a href="#" class="close glyphicon glyphicon-close"></a>
</li>
<li>
You have <strong>One New</strong> Pending Invitation:
<a href="#">Amey Group Services Ltd</a>.
<a href="#" class="close glyphicon glyphicon-close"></a>
</li>
<li>
You have <strong>One New</strong> Pending Invitation:
<a href="#">Amey Group Services Ltd</a>.
<a href="#" class="close glyphicon glyphicon-close"></a>
</li>
</ul>
</div>
</div>
</section>
<!--Notification block ends here-->
<div class="container page">
<div class="content pane single-pane">
<section>
<a id="forms"></a>
<header class="content-header">
<h1 class="title">
Forms
</h1>
<ul class="nav nav-pills">
<li>
<a href="/docs/forms.html#forms-text">
Text
</a>
</li>
<li>
<a href="/docs/forms.html#forms-textarea">
Textarea
</a>
</li>
<li>
<a href="/docs/forms.html#forms-password">
Password
</a>
</li>
<li class="dropdown">
<a href="/docs/select.html#forms-select" data-hover="dropdown">
Select
<span class="fa fa-chevron-down"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="/docs/select.html#forms-select-single">
Single Choice
</a>
</li>
<li>
<a href="/docs/select.html#forms-select-multiple">
Multiple Choice
</a>
</li>
</ul>
</li>
<li>
<a href="/docs/forms.html#forms-file">
File
</a>
</li>
<li class="dropdown">
<a href="/docs/date.html#forms-date" data-hover="dropdown">
Date
<span class="fa fa-chevron-down"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="/docs/date.html#forms-date-single">
Single Date
</a>
</li>
<li>
<a href="/docs/date.html#forms-date-range">
Date Range
</a>
</li>
</ul>
</li>
<li>
<a href="/docs/forms.html#forms-email">
Email
</a>
</li>
<li>
<a href="/docs/forms.html#forms-hyperlink">
Hyperlink
</a>
</li>
<li>
<a href="/docs/forms.html#forms-telephone">
Telephone
</a>
</li>
<li>
<a href="/docs/forms.html#forms-checkbox">
Checkbox
</a>
</li>
<li>
<a href="/docs/forms.html#forms-tristate">
Tristate
</a>
</li>
<li>
<a href="/docs/forms.html#forms-radio">
Radiobutton
</a>
</li>
<li>
<a href="/docs/forms.html#forms-time">
Time
</a>
</li>
<li>
<a href="/docs/forms.html#forms-color">
Color
</a>
</li>
<li>
<a href="/docs/forms.html#forms-currency">
Currency
</a>
</li>
<li>
<a href="/docs/forms.html#forms-image">
Image
</a>
</li>
<li>
<a href="/docs/forms.html#spinbox">
Spinbox
</a>
</li>
<li>
<a href="/docs/forms.html#forms-advanced-listbox">
Advanced Listbox
</a>
</li>
<li>
<a href="/docs/forms.html#forms-select-shuttle">
Select Shuttle
</a>
</li>
</ul>
</header>
<p>
Forms comprise of a surround and controlled by optional attribute. The attribute appears in the opening <code><form></code> tag. The form tags should surround any content containing form controls but should not contain any child <code><form></code> tags. A single row on a form should be contained by a div with a class of <code>"form-group"</code> as shown in the example below.
</p>
<pre><code>
<form role="form">
<div class="form-group">
<label for="inputField1"></label>
<input type="text" class="form-control" id="inputField1"/>
</div>
</form>
</code></pre>
<br/>
<header class="content-header">
<div class="row">
<div class="col-sm-8">
<h2 class="title">
A complex form example
</h2>
</div>
<div class="col-sm-4">
<button id="condense-form" class="pull-right btn btn-default">Condense</button>
</div>
</div>
</header>
<form id="tobeCondensed">
<div class="row">
<div class="col-md-6">
<div class="form-group invalid error">
<label for="userName">User Name:</label>
<input type="text" id="userName" class="form-control" placeholder="Enter username">
<span class="error-message">Error Message</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" class="form-control" placeholder="Enter Password">
</div>
</div>
</div>
<div class="form-group invalid error-hover">
<label for="email">Email:</label>
<input type="email" id="email" class="form-control" placeholder="Enter Email Address">
<span class="error-message">Error Message</span>
</div>
<div class="form-group invalid error-hover">
<label for="email">Text Area:</label>
<textarea placeholder="Enter text" name="textarea" id="textarea" rows="5" class="form-control"></textarea>
<span class="error-message">Error Message for textarea</span>
</div>
<div class="form-group invalid error-hover">
<label for="selectMenu">Select Menu:</label>
<div class="select">
<select id="selectMenu" class="form-control">
<option value="">All</option>
<option value=""></option>
<option value="A">Order Acknowledgement</option>
<option value="BR">Bulk Upload Response</option>
<option value="D">Dispatch Note</option>
<option value="I" selected="selected">Invoice</option>
<option value="LU">Lookup File</option>
<option value="O">Order</option>
<option value="P">PCard</option>
<option value="PR">PCard Response</option>
<option value="PT">Pass Through File</option>
<option value="Q">Query</option>
<option value="R">Requisition</option>
<option value="RM">Remittance</option>
<option value="SM">Status</option>
<option value="S">Statement</option>
</select>
<span class="error-message">Error Message for select</span>
</div>
</div>
<div class="form-group">
<label for="selectMenu2">Select Menu 2:</label>
<div class="select">
<select id="selectMenu2" class="form-control">
<option value="send">Send</option>
<option value="recv">Receive</option>
</select>
</div>
</div>
<div class="form-group invalid error-hover">
<label>This has an error:</label>
<div class="checkbox">
<input type="checkbox" id="errorMessage">
<label for="errorMessage"><span class="checkbox-icon"></span></label>
<span class="error-message" data-original-title="" title="">Error Message for checkbox</span>
</div>
</div>
<div class="form-group">
<label>Reporting Days: </label>
<div class="checkbox-input-group">
<div class="checkbox-inline">
<input type="checkbox" id="sun">
<label for="sun"><span class="checkbox-icon"></span>Sun</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" id="mon">
<label for="mon"><span class="checkbox-icon"></span>Mon</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" id="tue">
<label for="tue"><span class="checkbox-icon"></span>Tue</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" id="wed">
<label for="wed"><span class="checkbox-icon"></span>Wed</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" id="thu">
<label for="thu"><span class="checkbox-icon"></span>Thu</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" id="fri">
<label for="fri"><span class="checkbox-icon"></span>Fri</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" id="sat">
<label for="sat"><span class="checkbox-icon"></span>Sat</label>
</div>
</div>
</div>
<div class="form-group time">
<label for="reportingInterval">Reporting Interval:</label>
<div class="input-group">
<input type="text" id="reportingInterval" class="form-control">
<span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
</div>
</div>
<div class="form-group time">
<label for="startTime">Start Time:</label>
<div class="input-group">
<input type="text" id="startTime" class="form-control">
<span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
</div>
</div>
<div class="form-group has-addon">
<label for="finishTime">Add on Example:</label>
<div class="input-group">
<input type="text" id="finishTime" class="form-control">
<span class="input-group-addon"><span class="fa fa-star"></span></span>
</div>
</div>
<div class="form-group date">
<label for="finishDate">Date Example:</label>
<div class="input-group">
<input type="text" id="finishDate" class="form-control">
<span class="input-group-addon"><span class="fa fa-calendar"></span></span>
</div>
</div>
<div class="form-group">
<label for="disabled">Disabled:</label>
<input type="text" id="disabled" class="form-control" disabled="disabled"
value="Readonly text fields cut off text. need to display all text. Readonly text fields cut off text. need to display all text. need to display all text">
</div>
<div class="form-group">
<label for="readonly">Readonly Example:</label>
<input type="text" id="readonly" class="form-control readonly"
value="Readonly text fields cut off text. need to display all text. Readonly text fields cut off text. need to display all text. need to display all text"
readonly="readonly">
</div>
<div class="form-group">
<label for="readonly2">Readonly Example 2:</label>
<input type="text" id="readonly2" class="form-control readonly"
value="Readonly text fields cut off text.. need to display all text. " readonly="readonly">
</div>
<div class="form-group">
<label for="readonly3">Readonly Example 3:</label>
<textarea name="readonly3" id="readonly3" class="form-control readonly" readonly="readonly">Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.
</textarea>
</div>
<div class="form-group">
<label for="readonly4">Readonly Example 4:</label>
<textarea name="readonly4" id="readonly4" class="form-control readonly" readonly="readonly">Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.
</textarea>
</div>
<div class="form-group">
<label for="fileUpload">File Upload</label>
<div class="file-input input-group">
<input type="file" class="form-control file-input-file sr-only" id="fileUpload" name="fileUpload">
<input type="hidden" class="file-input-remove" id="file-field1a-remove" name="file_field1a_remove"
value="0">
<input type="text" class="form-control file-input-text" id="fileUpload-text" placeholder="Path / Filename"
value="">
<span class="input-group-addon">
<label for="fileUpload" class="btn btn-text btn-file btn-file-choose">Choose File</label>
<button type="button" class="btn btn-text btn-file btn-file-remove">Remove</button>
</span>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="attachCSV">
<label for="attachCSV"><span class="checkbox-icon"></span>Attach CSV Report:</label>
</div>
</div>
<div class="form-group invalid error-hover">
<label>My First Radio Buttons:</label>
<div class="radio-input-group">
<div class="radio-inline">
<input type="radio" class="form-control" id="radio1" name="firstRadio" value="">
<label for="radio1">
<span class="radio-icon"></span>
Option 1
</label>
</div>
<div class="radio-inline">
<input type="radio" class="form-control" id="radio2" name="firstRadio" value="">
<label for="radio2">
<span class="radio-icon"></span>
Option 2
</label>
</div>
<div class="radio-inline">
<input type="radio" class="form-control" id="radio3" name="firstRadio" value="">
<label for="radio3">
<span class="radio-icon"></span>
Option 3
</label>
</div>
<span class="error-message" data-original-title="" title="">Error Message for my first radio buttons.</span>
</div>
</div>
<div class="form-group invalid error-hover">
<label>My Second Radio Buttons:</label>
<div class="radio-input-group">
<div class="radio">
<input type="radio" class="form-control" id="radio4" name="secondRadio" value="">
<label for="radio4">
<span class="radio-icon"></span>
Option 1
</label>
</div>
<div class="radio">
<input type="radio" class="form-control" id="radio5" name="secondRadio" value="">
<label for="radio5">
<span class="radio-icon"></span>
Option 2
</label>
</div>
<div class="radio">
<input type="radio" class="form-control" id="radio6" name="secondRadio" value="">
<label for="radio6">
<span class="radio-icon"></span>
Option 3
</label>
</div>
<span class="error-message" data-original-title=""
title="">Error Message for my second radio buttons.</span>
</div>
</div>
</form>
<h2 class="title">Hover over error message code for above example</h2>
<p>Class <code>invalid</code> and <code>error-hover</code> should added to <code>.form-group</code> if there's an
error.</p>
<p>Inside <code>.control-input</code> and empty <code><span class="error-message">error message</span></code>
should be placed.</p>
<p><code><span class="error-message">error message</span></code> will remain hidden if the
parent <code>.form-group</code> doesn't have the class <code>invalid error-hover</code> which means there's no
error.</p>
<pre><code>
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group invalid error">
<label for="userName">User Name:</label>
<input type="text" id="userName" class="form-control" placeholder="Enter username">
<span class="error-message">Error Message</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" class="form-control" placeholder="Enter Password">
</div>
</div>
</div>
<div class="form-group invalid error-hover">
<label for="email">Email:</label>
<input type="email" id="email" class="form-control" placeholder="Enter Email Address">
<span class="error-message">Error Message</span>
</div>
<div class="form-group invalid error-hover">
<label for="email">Text Area:</label>
<textarea placeholder="Enter text" name="textarea" id="textarea" rows="5" class="form-control"></textarea>
<span class="error-message">Error Message for textarea</span>
</div>
<div class="form-group invalid error-hover">
<label for="selectMenu">Select Menu:</label>
<div class="select">
<select id="selectMenu" class="form-control">
<option value="">All</option>
<option value=""></option>
<option value="A">Order Acknowledgement</option>
<option value="BR">Bulk Upload Response</option>
<option value="D">Dispatch Note</option>
<option value="I" selected="selected">Invoice</option>
<option value="LU">Lookup File</option>
<option value="O">Order</option>
<option value="P">PCard</option>
<option value="PR">PCard Response</option>
<option value="PT">Pass Through File</option>
<option value="Q">Query</option>
<option value="R">Requisition</option>
<option value="RM">Remittance</option>
<option value="SM">Status</option>
<option value="S">Statement</option>
</select>
<span class="error-message">Error Message for select</span>
</div>
</div>
<div class="form-group">
<label for="selectMenu2">Select Menu 2:</label>
<div class="select">
<select id="selectMenu2" class="form-control">
<option value="send">Send</option>
<option value="recv">Receive</option>
</select>
</div>
</div>
<div class="form-group invalid error-hover">
<label>This has an error:</label>
<div class="checkbox">
<input type="checkbox" id="errorMessage">
<label for="errorMessage"><span class="checkbox-icon"></span></label>
<span class="error-message" data-original-title="" title="">Error Message for checkbox</span>
</div>
</div>
<div class="form-group">
<label>Reporting Days: </label>
<div class="checkbox-input-group">
<div class="checkbox-inline">
<input type="checkbox" id="sun">
<label for="sun"><span class="checkbox-icon"></span>Sun</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" id="mon">
<label for="mon"><span class="checkbox-icon"></span>Mon</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" id="tue">
<label for="tue"><span class="checkbox-icon"></span>Tue</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" id="wed">
<label for="wed"><span class="checkbox-icon"></span>Wed</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" id="thu">
<label for="thu"><span class="checkbox-icon"></span>Thu</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" id="fri">
<label for="fri"><span class="checkbox-icon"></span>Fri</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" id="sat">
<label for="sat"><span class="checkbox-icon"></span>Sat</label>
</div>
</div>
</div>
<div class="form-group time">
<label for="reportingInterval">Reporting Interval:</label>
<div class="input-group">
<input type="text" id="reportingInterval" class="form-control">
<span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
</div>
</div>
<div class="form-group time">
<label for="startTime">Start Time:</label>
<div class="input-group">
<input type="text" id="startTime" class="form-control">
<span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
</div>
</div>
<div class="form-group has-addon">
<label for="finishTime">Add on Example:</label>
<div class="input-group">
<input type="text" id="finishTime" class="form-control">
<span class="input-group-addon"><span class="fa fa-star"></span></span>
</div>
</div>
<div class="form-group date">
<label for="finishDate">Date Example:</label>
<div class="input-group">
<input type="text" id="finishDate" class="form-control">
<span class="input-group-addon"><span class="fa fa-calendar"></span></span>
</div>
</div>
<div class="form-group">
<label for="disabled">Disabled:</label>
<input type="text" id="disabled" class="form-control" disabled="disabled"
value="Readonly text fields cut off text. need to display all text. Readonly text fields cut off text. need to display all text. need to display all text">
</div>
<div class="form-group">
<label for="readonly">Readonly Example:</label>
<input type="text" id="readonly" class="form-control readonly"
value="Readonly text fields cut off text. need to display all text. Readonly text fields cut off text. need to display all text. need to display all text"
readonly="readonly">
</div>
<div class="form-group">
<label for="readonly2">Readonly Example 2:</label>
<input type="text" id="readonly2" class="form-control readonly"
value="Readonly text fields cut off text.. need to display all text. " readonly="readonly">
</div>
<div class="form-group">
<label for="readonly3">Readonly Example 3:</label>
<textarea name="readonly3" id="readonly3" class="form-control readonly" readonly="readonly">Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.
</textarea>
</div>
<div class="form-group">
<label for="readonly4">Readonly Example 4:</label>
<textarea name="readonly4" id="readonly4" class="form-control readonly" readonly="readonly">Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.
</textarea>
</div>
<div class="form-group">
<label for="fileUpload">File Upload</label>
<div class="file-input input-group">
<input type="file" class="form-control file-input-file sr-only" id="fileUpload" name="fileUpload">
<input type="hidden" class="file-input-remove" id="file-field1a-remove" name="file_field1a_remove"
value="0">
<input type="text" class="form-control file-input-text" id="fileUpload-text" placeholder="Path / Filename"
value="">
<span class="input-group-addon">
<label for="fileUpload" class="btn btn-text btn-file btn-file-choose">Choose File</label>
<button type="button" class="btn btn-text btn-file btn-file-remove">Remove</button>
</span>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="attachCSV">
<label for="attachCSV"><span class="checkbox-icon"></span>Attach CSV Report:</label>
</div>
</div>
<div class="form-group invalid error-hover">
<label>My First Radio Buttons:</label>
<div class="radio-input-group">
<div class="radio-inline">
<input type="radio" class="form-control" id="radio1" name="firstRadio" value="">
<label for="radio1">
<span class="radio-icon"></span>
Option 1
</label>
</div>
<div class="radio-inline">
<input type="radio" class="form-control" id="radio2" name="firstRadio" value="">
<label for="radio2">
<span class="radio-icon"></span>
Option 2
</label>
</div>
<div class="radio-inline">
<input type="radio" class="form-control" id="radio3" name="firstRadio" value="">
<label for="radio3">
<span class="radio-icon"></span>
Option 3
</label>
</div>
<span class="error-message" data-original-title="" title="">Error Message for my first radio buttons.</span>
</div>
</div>
<div class="form-group invalid error-hover">
<label>My Second Radio Buttons:</label>
<div class="radio-input-group">
<div class="radio">
<input type="radio" class="form-control" id="radio4" name="secondRadio" value="">
<label for="radio4">
<span class="radio-icon"></span>
Option 1
</label>
</div>
<div class="radio">
<input type="radio" class="form-control" id="radio5" name="secondRadio" value="">
<label for="radio5">
<span class="radio-icon"></span>
Option 2
</label>
</div>
<div class="radio">
<input type="radio" class="form-control" id="radio6" name="secondRadio" value="">
<label for="radio6">
<span class="radio-icon"></span>
Option 3
</label>
</div>
<span class="error-message" data-original-title=""
title="">Error Message for my second radio buttons.</span>
</div>
</div>
</form>
</code></pre>
<br/>
<div>
<a id="forms-text"></a>
<header class="content-header">
<h1 class="title">
Text
</h1>
</header>
<p>
Text controls comprise of a surround and 4 styles, toggled by optional attributes and classes. The attribute should be
added to the <code><input></code> tag, and classes should follow on from the surrounding <code>
<div></code>.
</