Horizontally aligning input fields - html

I am trying to get an input field, and it's associated submit button on the same horizontal line, but proving to be a challenge.
Here is my code:
<form name="prodSearch" action="/products/index.cfm" method="post">
<input type="text" name="prodKeyword" maxlength="50">
<input type="image" name="submit" src="/_css/images/but-ok-small.png">
</form>
You can view the site at (form is in the header) : http://d620923.u161.fasthit.net/
Basically I either need to nudge the input field up a bit, or the button down a bit. I've tried everything.. line height, padding, margin, tables etc.. but can't get them to budge.
Any suggestions greatly appreciated !!!

add this to your style.
#productSearch form input {
vertical-align: middle;
}

for textfield:
float: left;
for the button:
margin-top: 2px;
float: right;

Related

How to position inputs lower on the screen?

I have 2 inputs, a username and a password. I've aligned them in the middle, but I can't figure out how to push them lower down the screen and stay in the middle. Can anyone send me a reference to do so?
It's hard to tell what exactly you are trying to do without the relevant code, but here's a solution that might work for you:
form {
text-align: center;
}
input {
position: relative;
top: 50px;
}
<form>
<input type="text" placeholder="name" />
<input type="password" placeholder="password" />
</form>
It sounds something you can use Flexbox for. Make the containing div a flexbox and then justify and align to the center.

Pure CSS form label is condensed into small space

Im very new to html, and Im trying to create a website that uses Pure (type of CSS) forms to make a political poll. The issue I am having is that it scrunches up the question into a narrow spot, making it use several lines, when there is clearly room for it across the page to just take up one line (row). I tried telling the form to give the question (the label part) a certain portion of the page, and the rest of the line for the box where the user enters their answer, but the question (label) remains condensed into a small space. Any help to fix this is appreciated. Here is the code I am using to try to accomplish this:
<form class="pure-form pure-form-aligned" onsubmit="return validateForm()" method="post" name="myForm" action="politicsInsert.php" >
<fieldset>
<div class="pure-control-group">
<label class="pure-input-2-3" for="answerOne">What is your current political affiliation? </label> <input id="answerOne" type="text" name="answerOne">
</div>
<input class="pure-button pure-button-primary" type="submit" value="Submit data!">
</fieldset>
</form>
The label's width rule in the CSS you're linking to is causing the text to split over multiple lines:
.pure-form-aligned .pure-control-group label {
text-align: right;
display: inline-block;
vertical-align: middle;
width: 10em;
margin: 0 1em 0 0;
}
You can override it via something like:
div.pure-control-group label.pure-input-2-3 {
width:auto;
}
jsFiddle example

Display buttons in the same line

I have a web application in which i have these two submit button inside a table
<input type="submit" value="Modifier" name="btn" style="display:inline" />
<input type="submit" value="Exporter" name="btn" style="margin-left:10px ; display:inline" />
I'd like that it be displayed in the same line but i have this result:
Why this happens? how can i fix my code to show the buttons in the same line?
I'd stay away from this method of css personally, just my preference this will mean that every submit button is exactly the same but what if you don't want this styling with every submit button. But then again that method is much better than doing css inside a HTML file
input[type=submit]{
}
You're better off giving the submit buttons a class called submit then you can pick and choose which submits you want to do you're styling for
<input type="submit" class="submit">
.submit{
float: left;
etc.
}
The main problem is your table column widths perhaps give them all a class and give them a width and/or height that meets your needs inside an external css file.
you may try this styling;
input[type="submit"] {
float: right
}
you may also try float left.
Though you could increase the width of the table column or use display: inline-block, maybe you want to do something else:
Increaseing table/column width seems natural, as the two buttons look too wide to fit into that.
Once you have it, you may prefer to use something like block display with a float component.
The inline-block performs poorly in Internet Explorer browsers, even in recent versions like IE9, and a lot of your visitors will be using it for a while.
input[type=submit] {
display: block;
float: left;
width: 100px; /* or whatever fixed width you need */
}
You can try like this
Define a css rules for your submit buttons
input[type=submit] {
display: inline-block;
float: left; /* use this if you want them to be aligned other wise not */
width: as per needed
}
here is an example.. uses bootstrap though
http://jsfiddle.net/QYBHm/
<h3>
<input type="button" href="/users/sign_up">Sign up</input>
or
<input type="button" href="/users/sign_in">Sign in</input>
</h3>
Sign up
or
Sign in
Increase your column size if not auto and add float:left to "Exporter"
In your table row in column with the buttons try this code
<td nowrap="nowrap">
<input type="submit" value="Modifier" name="btn" style="display: inline" />
<input type="submit" value="Exporter" name="btn" style="margin-left: 10px;" />
</td>
I would say that the container column isn't wide enough, so even too they are inline they appear like this. Try changing the width of that column to check if that's the problem.
Try this css
input[type=submit] {
display: inline-block;
float: left;
width: /*adjust as per your table */;
}

CSS - dynamic length text input field and submit button in one row

I have:
<div>
<input id="input" type="text" />
<button id="submit">submit</button>
</div>
which gives me this
If I expand the main panel by dragging it with the mouse cursor the width the new space is empty:
I want that the <input type="text" /> fills the whole horizontal new space but that the submit button remains in the same row.
I tired to use <input style="width:100%" type="text"/> but then it fills the whole row and the submit button appears in the next row:
I also tried a table as mentioned in that thread:
Liquid textfield width
The result was that it works "a little bit" the submit button overlaps the input text and a certain space on the right always remains empty:
Can somebody help me with an code idea for fill the whole space except the (static) size of the submit button.
Thanks!
The "table" method you linked to will work, but you're missing one crucial property on your input elements: box-sizing.
http://cssdeck.com/labs/sbffl3l2
<div class="foo">
<div class="bar"><input type="text"></div>
<div class="bar"><input type="submit"></div>
</div>
.foo {
display: table;
width: 100%;
}
.bar {
display: table-cell;
}
.bar:first-child, input[type="text"] {
width: 100%;
}
input {
box-sizing: border-box; /* this is the key */
}
Prefixes may be required: http://caniuse.com/#feat=css3-boxsizing
I believe you can do this:
<input type="text" style="width:calc(100%- widthofbuttoninpixels);" />
It's not advisable to do inline styles though.
Edit: Make sure you also define a fixed width for the button
Why not give width of 70% to input and 20% to button?

Float left causes my input label to be on top instead v-align middle

I'm sure there are a lot of people with this problem, but I can't find a proper solution. That is basically is the problem. I've got a form with two pairs of label and field.
HTML:
<label for="Account">Inlognaam:</label>
<input class="field" id="Account" name="Account" type="
<br />
<label for="Wachtwoord">Wachtwoord:</label>
<input class="field" id="Wachtwoord" name="Wachtwoord" type="password" />
CSS:
label {
width: 150px;
float: left;
text-align: left;
}
So the problem is: when I don't use the 'float:left;' the input field will be not nice structured. BUT the label is going top-aligned. How can this be fixed?
An example is visible here: http://jsfiddle.net/ptKEh/9/ (comment float:left; to see what I mean)
EDIT::
Another thing... The input fields are in Chrome correct but in IE9 (9.0.8) the second field is a little shorter.
instead of floating the labels just use display: inline-block;
it will preserve the vertical alignment and it works even on IE6 and 7
I would recommend using padding to move the text down to be inline. This will only work with 1 line of text for the label and is cross browser capable.
I have put together an example jsfiddle http://jsfiddle.net/ptKEh/11/