I have a really simple search form with the following
Label ("Search")
Textbox (fixed width)
Submit button
"Advanced" link
Label, textbox and submit are all on one horizontal line and centered.
Now I would like my advanced link to be under the submit button.
Any ideas?
If I understand the question you want:
Search [xxxxxxxxxxxxxxxx] [Submit]
Advanced
You'll have to add some more elements in to do that:
<div style="width: 300px; margin: auto; text-align: center;">
Search [xxxxxxxxxxxxxxx] [Submit]
<div style="text-align: right">Advanced</div>
</div>
<style type="text/css">
#searchpanel
{
width: <displaywidth of controls>px;
text-align: center;
}
#button
{
text-align: right;
}
</style>
<div ="searchpanel">
<label for="textbox">Search</label><input type="text" id="textbox" />
<input type="submit" value="Search" />
</div>
<div id="button">
Advanced
</div>
Hope this helps.
Related
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?
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.. :)
I want to center the div box im making here but i dont want to center the text in the box and i cant seem to find how to do this. For now what i have is this:
.box {
text-align: left;
background-color:#3F48CC;
color:white;
font-weight:bold;
margin:120px auto;
height:150px;
display: inline-block;
width: 200px;
}
and
<div class=box>
Login
<form method ="post" action="addMember.php">
<label for="name">Username:</label>
<input name="name"/>
<label for="password">Password:</label>
<input name="password"/>
<p>
<input name="submit" type="Submit" value="Register"/>
<input name="reset" type="reset" value="Clear Form">
</form>
</div>
Thanks in advance!
Remove display: inline-block; & text-align:center
inline-block is not necessary when you are defining the width/height for the div.
By default div is a block element.
.box {
background-color:#3F48CC;
color:white;
font-weight:bold;
margin:120px auto;
height:150px;
width: 200px;
}
DEMO
Use dead centre...
.box {
text-align: left;
background-color:#3F48CC;
color:white;
font-weight:bold;
height:150px;
width: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -75px;
}
Note: Negative margins are exactly half the height and width, which pull the element back into perfect center. Only works with elements of a fixed height/width.
More info:
CSS Tricks Example
jsFiddle Demo
jsFiddle DEMO
Alternate jsFiddle DEMO with Centered Form and also this CSS3 Version.
The key to making the form look correct is to use padding, which is part of box model. Doing so allows you to fill in the sides, and keeps the text left-hand aligned.
HTML
<div class=box>Login
<form method="post" action="addMember.php">
<label for="name">Username:</label>
<input name="name" />
<label for="password">Password:</label>
<input name="password" />
<div class="buttons">
<input name="submit" type="Submit" value="Register" />
<input name="reset" type="reset" value="Clear Form" />
</div>
</form>
</div>
CSS:
.box {
background-color:#3F48CC;
color:white;
font-weight:bold;
height:150px;
width: 150px;
padding: 10px;
}
.buttons{
padding-top: 20px;
}
Screenshot:
I'm 'having a hard time figuring out which css rule is messing up the file upload form element because it's not quite aligned properly with the other form elements.
http://jsfiddle.net/emRr2/
There are some conflicting styles.
This style is overriding the width and padding on your custom element:
form .section > div {
[...]
padding: 0 10px 0 1%;
width: 75%;
}
Adding a DIV around the custom field will fix the width:
<div class="section _100">
<label for="file">Image</label>
<div> <!-- New DIV -->
<div class="customfile">
<button class="customfile-button" aria-hidden="true">Browse</button>
<span class="customfile-feedback" aria-hidden="true">No file selected...</span>
<input type="file" style="left: -53.4167px; top: 24.1667px; margin: 0px;" name="file" value="" class="required customfile-input">
</div>
</div> <!-- /New DIV -->
</div>
In my opinion, you should also remove the following, which is offsetting the button and increasing the height:
.customfile-button {
margin-top:6px;
}
I am trying to create tableless Form using and tags, im stuck.
I want the form look like this:
I should be able to set the width of textbox, text area and select in CSS.
Make each row a <p> containing a <label> and an <input>, both display: inline-block with preset width. (The <label> should be text-align: right)
The buttons can be float: right.
This is a good walk through: http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html
check out working example here:
http://jsfiddle.net/bRm3P/2/
<form>
<label>To: <input type="text" /></label>
<label>Subject: <input type="text" /></label>
<label>Message: <textarea></textarea></label>
<div class="submit-container">
<input type="submit" value="submit"/><input type="submit" value="submit"/>
</div>
</form>
<style>
form {
width: 500px;
}
label {
display: block;
text-align: right;
margin-bottom: 4px;
}
label input,label textarea {
border: 1px solid #DEDEDE;
width: 80%;
vertical-align: top;
}
.submit-container {
padding-top: 4px;
text-align: right;
}
</style>
A nice semantic layout would be one of the following:
<ul>
<li><label>To <input></label></li>
...
</ul>
Or with a dl (more common):
<dl>
<dt><label>To</label></dt><dd><input></dd>
...
</dl>
You will find lots of ways to layout the latter if you google for: definition list layout form
I want to create a form with 3 columns using Div,
Label : Textbox Label : Textbox Label : Textbox
Label : Textbox Label : Textbox Label : Textbox
If someone can help me, I would appreciate it.
Note: The label will be in multilingual, the text could be longer in other language.This is the major problem I see with div method. If the label is longer, the textbox will automatically go under the label and this is not correct .
<style>
.wrapperField{
float:left;
width:200px;
}
</style>
<div class="wrapperField">
<Label .....
<input type="text....
</div>
<div class="wrapperField">
<Label .....
<input type="text....
</div>
<div class="wrapperField">
<Label .....
<input type="text....
</div>
Please try the following layout
<style>
.wrapperField {
float: left;
width: 200px;
overflow: hidden;
}
.wrapperField label {
float: left;
margin-right: 10px;
}
.wrapperField input, .wrapperField textarea {
float: right;
}
</style>
<style>
.wrapperField {
float:left;
width:200px;
margin-left:10px;
}
.wrapperField label{
float:left;
margin-right:10px;
width:90px;
overflow:hidden;
white-space:nowrap;
text-align:right;
}
.wrapperField input, .wrapperField textarea {
float:left;
width:100px;
}
</style>
<div class="wrapperField">
<label>testfasdf asd asd as ff er</label>
<input type="text" />
</div>
<div class="wrapperField">
<label>test asdf asdf asdf asdf asdf </label>
<input type="text" />
</div>
<div class="wrapperField">
<label>test</label>
<input type="text" />
</div>
<br style="clear:left;" />
<div class="wrapperField">
<label>test</label>
<input type="text" />
</div>
<div class="wrapperField">
<label>test</label>
<input type="text" />
</div>
<div class="wrapperField">
<label>test</label>
<input type="text" />
</div>
#mmanco I do change on your solution . It's working great now. Thanks again for your help. I'll never think to use the overflow properties. I Just put the overflow properties on the Label and specify a width on the label.
we'll the textbox is going under the label because you have set a fixed width of 200 px on that div. so if it exceeds 200px he will push it down. it's a normal behaviour
and I don't think using overflow:hidden will help. Better use 2 columns