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?

Answers


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.. :)


Need Your Help

laravel 4 custom named password column

php database laravel

So I found a few problems already which says that you have to override getAuthPassword() to give custom name of password column from database. Tried putting this method with the same name as column...

“Pentium-safe FDIV” … in year 2014?

delphi compiler-construction cpu

Everytime I look in the compiler settings, the same question comes into my mind: Why does the current compiler of Delphi still have the "Pentium-safe FDIV" compiler option?

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.