I am using Grails 2.4.2. I want to use Grails default CSS with a few modifications. Now I need to place the field label on top of the field instead of left side.
Here are my form element where I want to show 4 field in a row:
<div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'fullName', 'error')} required">
<label for="fullName">
<g:message code="users.fullName.label" default="Full Name"/>
<span class="required-indicator">*</span>
</label>
<g:textField name="fullName" required="" value="${usersInstance?.fullName}"/>
<label for="email">
<g:message code="users.email.label" default="Email"/>
<span class="required-indicator">*</span>
</label>
<g:field type="email" name="email" required="" value="${usersInstance?.email}"/>
</div>
And output for above code is as below:
Now I want to add 4 fields in a row and the label of all field will be on top.
Single field in each line:
Form element:
<div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'username', 'error')} required">
<label for="username">
<g:message code="users.username.label" default="Username"/>
<span class="required-indicator">*</span>
</label>
<g:textField name="username" required="" value="${usersInstance?.username}"/>
</div>
<div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'password', 'error')} required">
<label for="password">
<g:message code="users.password.label" default="Password"/>
<span class="required-indicator">*</span>
</label>
<g:textField name="password" required="" value="${usersInstance?.password}"/>
</div>
<div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'fullName', 'error')} required">
<label for="fullName">
<g:message code="users.fullName.label" default="Full Name"/>
<span class="required-indicator">*</span>
</label>
<g:textField name="fullName" required="" value="${usersInstance?.fullName}"/>
</div>
<div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'email', 'error')} required">
<label for="email">
<g:message code="users.email.label" default="Email"/>
<span class="required-indicator">*</span>
</label>
<g:field type="email" name="email" required="" value="${usersInstance?.email}"/>
</div>
<div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'phone', 'error')} required">
<label for="phone">
<g:message code="users.phone.label" default="Phone"/>
<span class="required-indicator">*</span>
</label>
<g:textField name="phone" required="" value="${usersInstance?.phone}"/>
</div>
<div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'fax', 'error')} required">
<label for="fax">
<g:message code="users.fax.label" default="Fax"/>
<span class="required-indicator">*</span>
</label>
<g:textField name="fax" required="" value="${usersInstance?.fax}"/>
</div>
<div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'address', 'error')} required">
<label for="address">
<g:message code="users.address.label" default="Address"/>
<span class="required-indicator">*</span>
</label>
<g:textField name="address" required="" value="${usersInstance?.address}"/>
</div>
Here you go. Just define the following CSS:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.fieldcontain label, .fieldcontain .property-label {
display: block;
text-align: left;
width: 100%
}
.fieldcontain input {
width: 100%;
}
.fieldcontain {
width: 25%;
display: inline-block;
float: left
}
.row:before, .row:after {
display: table;
content: " ";
}
And your HTML should look like this:
<fieldset class="form">
<div class="row">
<div class="fieldcontain required">
<label for="firstName">
First Name
<span class="required-indicator">*</span>
</label>
<input type="text" name="firstName" required="" value="" id="firstName">
</div>
<div class="fieldcontain required">
<label for="lastName">
Last Name
<span class="required-indicator">*</span>
</label>
<input type="text" name="lastName" required="" value="" id="lastName">
</div>
<div class="fieldcontain required">
<label for="email">
Email
<span class="required-indicator">*</span>
</label>
<input type="text" name="email" required="" value="" id="email">
</div>
<div class="fieldcontain required">
<label for="number">
Number
<span class="required-indicator">*</span>
</label>
<input type="text" name="number" required="" value="" id="number">
</div>
</div>
</fieldset>
Wrap, your set of 4 elements i.e. .fieldcontain
in a div
with class .row
like I've shown in the example.
Although, Grails provide a basic CSS for styling so the new projects can be bootstrapped fastly, but I recommend you to use Twitter Bootstrap.