Search code examples
csstwitter-bootstrapgrailsstylinggsp

Styling Grails g:form and g:submit

My Grails (2.4.2) app has a simple form on one of its GSPs, that uses Bootstrap for styling:

<!DOCTYPE html>
<html>
<head>
    <!-- Head omitted for brevity. -->
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-8 text-center">
                <h1 class="strong-primary">Sign in to continue to MyApp.</h1>
            </div>
            <div class="col-md-4 text-center">
                <form role="form">
                    <div class="form-group">
                        <input type="email" class="form-control" id="signin-email" placeholder="Your email">
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control" id="signin-password" placeholder="Password">
                    </div>
                    <button type="submit" class="btn form-control btn-lg btn-success">Sign in</button>
                    <div class="form-group" style="text-align: left;"><a href="#">Need help?</a></div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

When the user clicks the "Sign in" button, the FizzController#signin() action should be executed. I am tempted to change the GSP form to something like:

<g:form controller="fizz" action="signin">
    <div class="form-group">
        <input type="email" class="form-control" id="signin-email" placeholder="Your email">
    </div>
    <div class="form-group">
        <input type="password" class="form-control" id="signin-password" placeholder="Password">
    </div>
    <g:submitButton name="submit" value="Sign in" />
    <div class="form-group" style="text-align: left;"><a href="#">Need help?</a></div>
</g:form>

But then I lose the form role="form" declaration and the styling (btn form-control btn-lg btn-success) classes on the button.

How can I merge <g:form> and <g:submitButton> with my Bootstrap stylings?

Solution

  • There is nothing keeping you from adding additional attributes and values to the output from the standard <g:> tag library.

    For example:

    <g:form controller="fizz" action="signin" role="form" class="someClass">

    The above will include the two additional attributes role and class as they appear. This holds true for almost all (if not all) of the standard tags in Grails.

    If you want to look and see how this is actually implemented in the outputAttributes, you can review the source code for the built in forms tag library.