Im using a search form that contains a text box and submit button...For some reason, I have a alignment issue with the 2 elements(input=text and button on the top of the div) particularly in chrome..
Can you please let me know what is the issue?
HTML & CSS
<form id="bigsearchform_new" method="post" >
<input id="search_string" name="search_string" type="text" class="startnewsearch rounded" placeholder="Search..." maxlength="500" /><input id="bigsearchbutton_new" type="button" class="searchButton" title="Click here to search the database"/>
<input type="hidden" name="antiCSRF" value="{{acsrf}}" />
<input type="hidden" name="session_id" value="{{session_id}}" />
<input type="hidden" name="commodity_id" id="commodity_id" />
</form>
</div>
JSFiddle
Input elements are vertically misaligned as they have inline layout and different heights. One of the options is to use vertical-align property with middle/bottom/top (for example) value :
input {
vertical-align : middle;
}
Example
Your button is missing the value property:
<input id="bigsearchbutton_new"
type="button"
class="searchButton"
title="Click here to search the database"
value="Go" />
See Fiddle
Related
I have submit and reset buttons for a form, and I cant for the life of me figure out how them to get under the textbox. And then the address element is displaying on the right side aswell.
<label id="warranty">
<input type="checkbox" name="warranty" />
Yes, I want the 24-month extended warranty
</label>
<label for="request" id="request">Any special requests on your order?</label>
<textarea name="request" id="request"></textarea>
<input type="submit" value="Submit Order" />
<input type="reset" value="Cancel" />
</form>
CSS:
input[type="submit"], input[type="reset"] {
display: inline-block;
width: 150px;
float: inline;
}
Surely I'm missing something right?
CSS
#request { display: block; clear: both; }
Working Fiddle
How about a line break after the textarea?
ie:
<label for="request" id="request">Any special requests on your order?</label>
<textarea name="request" id="request"></textarea>
<br />
<input type="submit" value="Submit Order" />
<input type="reset" value="Cancel" />
or via css, you could make the first of the 2 buttons clear any previous floats;
input[type="submit"] {
clear: both;
}
Instead of display: inline-block; try display: block; for either your text area (doing this will say "put nothing else on the the same line as this element unless it floats", or for your submit order and cancel buttons.
I'd also suggest putting your two buttons inside of a wrapper div so that way you can manipulate the position of those two buttons as a unit instead of individually.
Also, one last note: don't have more than one element on a page with the same id. For elements you want to apply the same properties to, make the id a class instead.
You can use a div to wrap them.
I don't see "address element", so I can't help you.
<div>
<input type="submit" value="Submit Order" />
<input type="reset" value="Cancel" />
</div>
You can try this working fiddle!
<form>
<label id="warranty">
<input type="checkbox" name="warranty" />
Yes, I want the 24-month extended warranty
</label>
<label for="request" id="request">Any special requests on your order?</label>
<div class="clear:both"></div>
<textarea name="request" id="request"></textarea>
<div class="clear:both"></div>
<input type="submit" value="Submit Order" />
<input type="reset" value="Cancel" />
</form>
I have a text input element and a submit input element that I need to be inline and responsive. The problem is that I can't find a way to get the text input element to be fluid without screwing up the positioning of the button. Any help would be appreciated.
Here is the html structure I'm using.
<div class="search-call-to-action">
<form action="#">
<input type="text" name="search" placeholder="Search charities by keyword or name...">
<input class="btn btn-primary btn-large" type="submit" name="submit" value="Search">
</form>
</div>
Here is a screenshot of what I am trying to achieve. The text input needs to be fluid.
http://i.imgur.com/Ivty5Qq.png
I have provided a jsfiddle with a working demo on how to achieve this. It uses the overflow property. Demo http://jsfiddle.net/kevinPHPkevin/vbdy9/
<form action="search.php" method="get">
<input type="submit" name="search" value="Go" style="float: right" />
<div style="overflow: hidden; padding-right: .5em;">
<input type="text" name="term" style="width: 100%;" />
</div>
</form>
You can use media queries to achieve this. Then you should create queries for each resolution. Example:
#media (min-width: 320px){
div
{
//some propererties in ems
}
I have a fieldset with a text input box, with a submit button. I want them to appear in a single row but the fieldset appears in one row, and then the continue appears in the next. Here's my html:
<label><fieldset class="registration_code">
<legend>Registration Code</legend>
<input type="text" name="regis_code" id="regis_code"/>
</fieldset>
<input type="button" class="button2" name="Submit" value="Continue"/>
</label>
I've tried all combinations of making the button or the fieldset inline, inline-block, float:left, float:right. none of them are resulting in what I want. I just want a single row displaying both of these elements. How do I go about doing this?
Not sure why you wrapped your code in a label tag:
http://jsfiddle.net/hyxaK/1/
<fieldset class="registration_code">
<legend>Registration Code</legend>
<input type="text" name="regis_code" id="regis_code"/>
</fieldset>
<input type="button" class="button2" name="Submit" value="Continue"/>
.registration_code { display:inline-block; }
Either you can do this,
<label>
<fieldset class="registration_code">
<legend>Registration Code</legend>
<input type="text" name="regis_code" id="regis_code"/>
<input type="button" class="button2" name="Submit" value="Continue"/>
</fieldset>
</label>
or this,
fieldset{
display : inline-block;
}
DEMO
I need help in HTML styling
here is the case:
<div id="hidden" style="display: none;">
<label>URL:</label>
<input type="text" name="url" size="50"/><br/>
<input type="button" id="button2" value="Update"/> <br/>
</div>
<input type="button" id="button1" value ="Get Info" onclick="document.getElementById('hidden').style.display = '';" size="25"/>
as we can see all the elements inside
<div></div>
will be displayed on clicking button1(they will hidden initially).When all the fields appear the another button inside div(button2) is unaligned to button1.
What i want is when i click button1 both button1 and button2 should be aligned..
how can i do this??
<div id="hidden" style="display: none;">
<label>URL:</label>
<input type="text" name="url" size="50"/><br/>
</div>
<input type="button" id="button1" value ="Get Info" onclick="document.getElementById('hidden').style.display = '';document.getElementById('button2').style.display=''" size="25"/>
<input type="button" id="button2" value="Update" style="display:none"/>
If you want the two buttons next to each other, but the second one can only be displayed upon clicking the other button, then you'll need to include script to show the button onclick.
What do you mean "aligned"? Are they supposed to be aligned horizontally, that-is, they should appear on the same line? If so, you need to remove your <br /> tags that force line-breaks, and set the display of your div not to blank, but to inline (as divs are displayed as block by default):
<div id="hidden" style="display: none;">
<label>URL:</label>
<input type="text" name="url" size="50"/>
<input type="button" id="button2" value="Update"/>
</div>
<input type="button" id="button1" value ="Get Info" onclick="document.getElementById('hidden').style.display = 'inline';" size="25" />
This produces the following when you click on the "Get Info" button:
Note that the text input, update and get info are all on one line!
If you want them all to appear left-aligned, the code that you provided looked just fine when I tested it. Upon clicking the get info button, I get a display that looks like this:
[INPUT "URL" AREA]
[Update Button]
[Get Info]
If you aren't trying to get your display horizontally aligned or left-aligned, then what type of alignment are you looking for? Can you provide a diagram or screen shot if this is not the answer you're looking for?
I generally agree with what Kiley mentioned a moment ago. If you must maintain that exact structure and want the buttons horizontally aligned, adding float:left; styles to the <div></div> and to button1 would solve your issue.
<div id="hidden" style="display:none; float:left;">
<label>Url:</label>
<input type="text" name="url" size="50" />
<input type="button" id="button2" value="Update" />
</div>
<input type="button" id="button1" value="Get Info" onClick="document.getElementById('hidden').style.display = '';" style="float:left;" size="25" />
Hope that helps!
They shouldn't be unaligned, there's probably an style on that div.
try this css
#hidden {
margin:0;
padding:0;
}
For some reason my Submit and Cancel buttons are not being wrapped in the form tag like I expect them to be (based on their position with in the form tag in the HTML) when I have their float property set to right and left respectively. The two buttons are positioned just outside & below the form div to the far right & left sides.
Link to the HTML & embedded CSS
alt text http://lh5.ggpht.com/_rNlSpSUBkYo/TFLpNgv4XkI/AAAAAAAAAE8/ocwa0uSzwX4/reply-float-form.png
How can I make it so the form div wraps the two buttons so they do not appear outside & below the form div?
Thank you
Adam
Remove .cancels float rule:
.cancel{/* no float */}
*tested on Chrome
Looks like you need to clear the floats. Give this a try.
<form action="#" method="get">
<textarea name="Reply Textarea" type="text" rows="2" cols="40" wrap="soft"></textarea>
<input id="buttons" class="submit" type="submit" value="Submit" />
<input id="buttons" class="cancel" type="button" value="Cancel">
<br style="clear: both;" />
</form>