CODEWITHSUNDEEP
cssplayframework
Conor Pender
Conor Pender

Reputation: 1081

play form-helper not displaying inline

I'm new to the play framework and am trying to add a form to the top of my page with a simple username and password field and a submit button. I'm using the play form helper, but it won't allow me to have these fields side by side ,instead it always puts them on top of one another. I keep trying to change the CSS, but no luck.

Here's the relevant part of the HTML

    <header id="top_header" class=rounded>
        <div id="logo">
            <h1>@message</h1>
        </div>
        <div id="login_pane">
            <div id="login">
            @helper.form(action=routes.Test.testFunction(), 'id->"login_form"){
                @helper.inputText(loginForm("username"), 'id->"username", '_label->"Username")
                @helper.inputPassword(loginForm("password"), 'id->"password", '_label->"Password")
                <input type="submit" value = "Enter" id="login_button">
            }
            </div>
        </div>
    </header>

And the CSS

#top_header{
    background: yellow;
    height: 30px;
}

#logo{
    float: left;
    background: green;
    width: 200px;
}

#login_pane{
    float: right;
    background: blue;
    width: 500px;
}

#login{
    float: left;
    background: red;
}

#username, #password, #login_button{
    display: inline;
}

By the way, I just use the ugly background colours to see where things are positioned. I've tried putting display: inline just about everywhere but it's having no effect. Has anybody any ideas on how to position the form elements side by side?

Upvotes: 0

Views: 811

Answers (1)

Wayan Wiprayoga
Wayan Wiprayoga

Reputation: 4562

If you check the HTML source you can notice that the form-helper generating HTML like this (maybe similar not exactly identical) :

<form action="/test/testFunction" method="GET" id="login_form">
    <dl class=" " id="username_field">
        <dt><label for="username">Username</label></dt>
        <dd>
            <input type="text" id="username" name="username" value="" >
        </dd>
    </dl>
    <dl class=" " id="password_field">
        <dt><label for="password">Password</label></dt>
        <dd>
            <input type="password" id="password" name="password" >
        </dd>
    </dl>
    <input type="submit" value = "Enter" id="login_button">
</form>

So, you can define your css based on dl, dd, or dt element to make it displayed side by side. This is simple but not best sample (I only tell you the basic) :

#login_form dl {
   padding: 10px;
   float: left;
}
#login_form dd {
   margin-left: 0px;
}

Hope this useful for you friend.. :)

Upvotes: 1

Related Questions