I am trying to create a search bar like Google's after the user begins to type in a keywords. I usually try to align the search bar with the submit button. If I can get it to line up correctly in Firefox, it usually won't line up correctly in Chrome. Is Google actually lining up the two inputs, or is there a way to put the actual button inside of the search bar and position it to the very right?
Edit: Well, I guess it is more of a conceptual question. I do not actually have any code. I just remember my last attempts to try to align the search bar and button failed horribly. How does Google align up their search box and submit button so well?
Edit 2:
Here is my HTML:
<form method="get" action="">
<div id="search-outer">
<input id="search-input" type="text" name="search" /><input id="search-submit" type="submit" value="Search" />
</div></form>
Here is my CSS:
#search-outer {
width: 600px;
margin: 0 0 10px 0;
}
#search-input {
margin: 0;
width: 400px;
font-size: 20px;
padding: 5px;
border: 1px solid #EEEEEE;
}
#search-submit {
margin: 0;
font-size: 20px;
padding: 5px;
border: 1px solid #EEEEEE;
}
They are still off a little bit. If I give them specific heights, then the button's position begins to be above the input's position.
If you want pixel-perfect control of two elements next to eachother, one approach I often find crossbrowser successful is to absolute position the right element, but use margins instead of top/left, like so:
<html>
<body>
<input/>
<input type="submit" style="position:absolute;margin:42px 0 0 10px;"/>
</body>
</html>
Using margins will position it relative to its position of orgin, which is on the right of the input field in this case. Using top/left would position it relative to its offset parent, which could be an ancestor element.
<form method="post" action="">
<div id="div">
<input type="text" />
<input type="submit" value="send" />
</div>
</form>
#div { width: 100px; margin: 0 auto; text-align: center;}
You'd generally surround both with a container and align to one edge of that. Remove (reset) margins to 0 to avoid browser-specific alignment issues.
Related
I made the input box bigger (like 500 by 500 pixels), but the text would start from the middle, not the top. I tried putting the padding to zero but it doesn't seem to work. This is under the form tag.
Here's my html code:
<form>
<input class="postbox" value="Hello."><br>
</form>
and this is my css code:
.postbox{
padding:0;
height:500;
width:500;}
you stretched the input-line to 500px, not the form.
As Alvaro Menéndez noticed, you might want to use a textarea, not an input.
Use something like
<form>
<textarea class="postbox" placeholder="Hello"></textarea><br>
</form>
<style>
.postbox {
padding:0;
height:500px;
width:500px;
}
</style>
http://pascha.org/test/2.php
Something like this might do it, i have removed the height and padded the input out
.postbox{
padding-bottom:450px;
width:500px;
}
You can do that by using the padding-bottom property
HTML
<input type="text" value="test"/>
CSS
input {
padding: 10px 10px 100px;
width: 300px;
border: 1px solid red;
}
JSFiddle: http://jsfiddle.net/LeoAref/ko9ahz0L/
I'm trying to properly add spacing between the s in my table contact form here: http://jsfiddle.net/k6XSp/1/.
I would like to have the fields on the right to line up with the width of the message box on the right side, thus meaning I need space added in between the s in each of the two s.
It is looking good, but I can't figure out how to space the right sides of the fields. Adding a margin-right seems to do the trick, but not very well, as it is very glitchy.
In addition, the form moves around when you click on the filed because the border shows up.
The CSS for the text fields looks like this:
#contact-area input, #contact-area textarea {
padding: 5px;
width: 451px;
font-family: Helvetica, sans-serif;
font-size: 1.4em;
margin: 0px 0px 10px 0px;
border: none;
background-color: #dedede;
height: 40px;
}
Take a look at this fiddle http://jsfiddle.net/k6XSp/6/. As suggested, try not to use tables to position elements. Use css instead.
<div class="control-group">
<label for="FirstName" class="text">First Name:</label>
<div class="control">
<input type="text" name="FirstName" id="FirstName" />
</div>
</div>
.control-group {width: auto; float: left; margin: 0 10px 0 0}
.control {display: block; clear: both;}
Forms use fieldset, legend and label tags, not tables, unless you need to code HTML from the 90's. The idea is to be semantically correct e.g. your HTML should reflect it's meaning/purpose.
<form action="contactengine.php" method="POST">
<fieldset>
<legend>personal data</legend>
<label for="firstname">First name</label>
<input id="firstname" placeholder="First name" />
</fieldset>
<input type="submit" value="submit my form" />
</form>
Spacing these fields is part of your markup => CSS.
See fiddle for a responsive/liquid (desktop, tablet, mobile) approach.
Note:
I see you use the 62.5% font base approach. We've tested with this on a big project and noticed IE has a floating point issue ending up with a different font-base than 10px. In my opinion just put it to 10px and be done with it => rem values can now be used in modern browsers.
I'm trying to create a custom form input that utilizes some images, it should look like this:
I've tried the following:
<style>
input {
background-image: url(../img/search-background-middle.png);
background-repeat: repeat-x;
padding: 17px 0;
font-size: 12px;
border: none;
margin: 0;
}
form {
padding: 0;
margin: 0;
}
</style>
<body>
<form>
<img src="../img/search-background-left.png"/>
<input type="text" value=" start typing to search..." size="40" maxlength="255" />
<img src="../img/search-background-right.png"/>
</form>
</body>
Which results in:
Why?? I'm not only interested in the solution, but also in the reason why this doesn't work. I think my understanding of inline elements put next to each other is flawed.
Try setting the vertical-align to top
form * {vertical-align:top;}
also remove the spaces between the imgs and the input
remove whitespace between img and input elements (including linebreaks)
set height and line-height on input element to match the image height
set padding and margin to 0 on input.
you may also need to add a float: left !important; to the input. Sometimes that fixes my issues when things aren't lining up
I've looked everywhere but to no avail.
I got a <legend> in a form, which displays as I want in every browsers, except in Chrome. It's like it sits outside of the fieldset, or it's like it goes on top of the next element. And it's very annoying. I can't even put margins on it.
Why does it display like in that way?
And is there a workaround?
HTML:
<fieldset class="col-12-box-bottom add-extras">
<legend class="plus">Add Promotion Code</legend>
<ul id="promo-fields">
<li><input class="field-small" type="text" /></li>
<li><button class="but-sec" type="submit">Apply</button></li>
</ul>
</fieldset>
CSS:
.add-extras legend{
width: 260px;
height: 0px;
border: 1px solid red;
display: block;
margin-top: 10px;
}
.add-extras fieldset{
position: relative;
}
.add-extras ul{
padding: 0 0 20px 0 !important;
overflow: hidden;
}
.add-extras li{
list-style-type: none;
float: left;
margin: 0 18px 0 0;
}
.add-extras li:last-child a{
color: #afafaf;
display: block;
margin: 27px 0px 0 0;
}
fieldset.add-extras{
margin: 0px 0 23px 0;
}
.add-extras label{
float: none;
display: block;
text-align: left;
width: 110px;
font-weight: bold;
margin: 0 0 5px 0;
}
This is a known issue with the legend element in webkit browsers. There are no clean workarounds for the legend element itself, but you could instead add the margin to the first element that follows the legend.
Also, you'll have to explicitly set -webkit-margin-collapse: separate on that element to make it work properly. Try using this:
legend + * {
-webkit-margin-top-collapse: separate;
margin-top: 10px;
}
http://jsfiddle.net/JLsPs/1/
(answer found here: Cannot add `margin` to `<legend>` element in Safari & Chrome (WebKit))
I have struggled with this issue many times, eventually leading to my abandoning the legend tag until recent, where I have begun using it again to add more semantic meaning to my markup.
Here is a fix I have devised to control the appearance of the legend tag's layout in relation to it's siblings:
Markup:
<div class="fieldset">
<fieldset>
<legend>Form Section</legend>
<div class="field_row">
<label for="first_name">First Name</label>
<input id="first_name" name="first_name" type="text">
</div>
<div class="field_row">
<label for="last_name">Last Name</label>
<input id="last_name" name="last_name" type="text">
</div>
</fieldset>
</div>
Styles:
.fieldset {
padding-top:48px; /*legend height(18px) + top value(15px) + bottom spacing(15px) */
position:relative;
}
legend {
height:18px; /* Default Height of non-styled legend element with default font-size of 16px as tested at time of this posting */
left:15px;
/*margin:15px 0;*/ /* Margins initially trying to achieve */
position:absolute;
top:15px; /* replaces top margin-top:15px; */
}
From the example I provided above, in order to achieve the bottom "margin" on the <legend> tag that you desire, you'll just apply a top padding to the fieldset equal to the amount of top and bottom margin you desire plus the explicit height of the legend tag. This pushes down the <legend>'s siblings down appropriately.
If you haven't explicitly set the height of your legend, you can just check it out in the metric tab of either Firebug or Chrome Developer tools, as the font-size will affect the height of it.
But yeah, pretty simple solution, I just ran into it again a few days ago when working on a client project. Then came across this question, as I was trying to do more research on it today.
Edit: I realized after posting this answer that in my original fix, I applied the padding to a parent <div> of the <fieldset> because for some reason Firefox starts the top:15px; from the bottom of the top padding, when the padding is applied to the <fieldset>. Putting the padding-top and position:relative; on the parent div allowed the <legend> to position absolutely over the padding instead of being pushed down by the padding. I have edited the code above to reflect my findings. This solution which started out simple, is less attractive to me now, but it definitely works. Here is a page that I created, testing two methods of positioning the <legend> tag: Legend tag positioning: http://dl.dropbox.com/u/37971131/css-testing/forms.html
The method proposed by Stephan Muller only works if the HTML element following the is visible. As in my case, this is not always possible without potentially large restructuring of the HTML code. Thus, in addition to his CSS code
legend + * {
-webkit-margin-top-collapse: separate;
margin-top: 10px;
}
just apply the following jQuery command, which basically just inserts an empty div (having a height of 0 px) but now matches the CSS selector adding the margin in every case:
$('legend + *').not(':visible').each(function() {
$('<div></div>').insertBefore($(this));
}
If updating the templates is not possible, you can use this script, just wrap the legend tag inside a div tag
jQuery('legend').each(function() {
jQuery(this).wrap( "<div></div>" );
});
Hope this helps! Enjoy coding..
What am I missing here?
Edit, because this doesn't work in a comment:
The below solution results in this:
----------------------------------------------------
| |
| Legend text |
but what I'm going for is:
----------------------Legend text-------------------
| |
| |
Edit #2:
Based on the feedback so far, it is sounding like this whole <legend> tag is a losing proposition. Does anyone have an example of what they use in lieu of this--something that has a similar appearance that is more reliable?
Assuming your markup looks something similar to this:
<form>
<fieldset>
<legend>Person:</legend>
Name: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
</fieldset>
</form>
Your CSS should look something like this:
legend {
margin:0 auto;
}
that's easiest
Oh Dear... You have chosen probably the most difficult thing in CSS when it comes to cross-browser compatibility. Cameron Adams said it best
Probably the only difficulty in
styling semantic forms is the legend
tag. It is insufferably variable
across browsers. In Mozilla, the
legend tag is not left-indented from
the body of the fieldset, in IE and
Opera it is. In Mozilla, the legend
tag is positioned in between the
fieldset's border and its content, in
IE and Opera it is positioned inside
the content. This makes it very hard
to move the legend inside the fieldset
border, or position it flush to the
left of the fieldset, as you get
varying effects across browsers
You can read more about what he said at Fancy Form Design Using CSS on how to style forms.
My solution to the problem would be to remove the fieldset border completely and absolutely position the legend element. The problem with what you want to do is that it is different in every browser.
The legend can be styled by html attribute quite easily. I've found by searching..
<legend align="center">Legend</legend>
finally got it without the align="center" hack. using only legal css margins
legend{
width: 70px;
padding: 2px;
margin-left: calc(50% - 35px - 2px);
}
Legends are notoriously resistant to styling.
One thing you can do is use a heading element instead of legend as that will be much easier to style. This does what you want in FF3 and Safari at least.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
h3{
background-color:#FFF;
margin: -1em auto 0;
text-align:center;
width:10%;}
</style>
</head>
<body>
<form>
<fieldset>
<h3>Person:</h3>
Name: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
</fieldset>
</form>
</body>
</html>
legend
{
margin-left: calc(50%);
transform: translateX(-50%);
}
(Answerer then drops his keyboard on the floor, like a microphone)
Here is with what I came just a few minutes ago. This is working in Firefox and Chromium/Opera. Haven't tested in Edge and earlier IE-crap, but according to my experience, should work there as well.
Assuming that form element inside is displayed as block.
fieldset {
border: 1px solid Olive;
padding: 0.1%;
margin: 1px auto;
width: auto;
}
legend {
font-size: 10px;
text-align: center;
padding: 0.2% 0.4%;
width: 30%;
margin: 0 34.6%;
border: 1px solid DarkOrange;
border-radius: 5px;
}
The trickery is with legend margin and percentages. margin: 0 34.6%;
Now, if You increase or decrease padding left/right or width, You'll need to recalculate percentage for legend's left/right margin, apparently. Don't bother with 0 auto. It simply won't work.
You can also replicate whatever semantic_form_for outputs as HTML, using the very basic rails form helper. Since you know what you expect, you can write it out without the use of semantic_form_for. We are doing this in one of our projects.
Little late to throw out an alternative for this? Anyway, I wanted to use a fieldset and found the lack of positioning of the legend and the variable display by browser annoying so I replicated with a couple divs:
<div style="border:solid 1px #AAAAAA; position:relative; padding:10px;">
<div style="position:absolute; top:-10px; left:50%; margin-left:-35px; width:70px; text-align:center; background-color:#FFFFFF;" >Legend</div>
Stuff in your fieldset
</div>
The important notes on this: the inner div width must be set, and the margin left must be set to half. You may have to make adjustments to the width depending on the length of your text. The left:50% starts it at the halfway point of the parent and the negative margin left positions it back half it's own width.
You can use it like
<legend align="center"> your text here </legend>
Use "margin-left" to legend to move the text to right.
<fieldset>
<legend style="margin-left:3%;">Summary</legend>
<div>
The novella The Metamorphosis was written by Franz Kafka in 1912. It tells the story of the tragedy of a salesman, Gregor Samsa, who turned into a gigantic insect, but still possessed a human mind.</div>
</fieldset>