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

How to avoid multlple times called method at angular's ng-repeat

javascript angularjs

I've write this code. But it called three times called when I clicked image. It should be called foo() method once.Do you have any idea?

Advantages of using a single echo statement for a php script

php variables coding-style

I've recently been exposed to a PHP practice of only using a single echo statement. So effectively the view is built in a view class and a function exists to return the HTML.

Retreiving data LINQ vs Reflection

c# linq reflection

I was hoping someone could tell me which is the more efficient and/or correct way to retrieve some data.

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.