I am having a ridiculous problem where my input text field and submit buttons are not lining up and I really can't figure out an elegant solution of how to fix it. As you can see in the image below, the input text field (labeled "Enter Keywords" in the upper right") is 2px higher than the "Search" submit button:
Here is the HTML:
<div id="search">
<form action="#" method="POST" id="search_form">
<div id="search_inputs">
<input type="text" placeholder="Enter Keywords" name="keywords" />
<input class="button" type="submit" name="search" value="SEARCH" />
</div>
</form>
</div>
Here is the css code:
#search_form .button {
background: black;
color: white;
padding: 3px 15px;
border: none;
font-size: 7pt;
height: 18px;
}
#search_form input[name="keywords"] {
width: 175px;
}
#search {
margin-top: 7px;
float: right;
}
I'm pretty sure setting the font-size to 7pt is messing it up, but I'm not sure why and I don't know how to deal with this because that's the font size of my other buttons in the area.
Thanks for any help!
adding a float: left; to the #search_form input[name="keywords"] style align's their tops correctly, then adding some margin-right should get you good to go.
Fiddle
The issue stems from the float: right on the search button. The input box has a natural display: inline-block to it, which causes the slight drop. Normally when you float right the fix to this is to move that element upwards in the DOM. This won't work in this case. By changing the input to a floated element you are also forcing it to be display: inline.
Though I'm not sure why you can't just add a display: inline to the element.
Related
There is a side bar with a couple of labels and input. I want to remove the space between a pair of label and input. How to remove the space?
Space between label and input.
Here is the main part of html
* {
list-style: none;
text-decoration: none;
box-sizing: border-box;
}
.container {
width: 80%;
margin: auto;
}
aside#sidebar-wrapper {
padding: 5px;
width: 300px;
border: 2px black solid;
}
aside#sidebar-wrapper input {
width: 100%;
}
<div class="container">
<aside id="sidebar-wrapper">
<h1>Get A Quote</h1>
<form action="" class="form-sidebar-wrapper">
<div class="sidebar-input-wrapper">
<label>Name</label>
<input type="text" placeholder="Name">
</div>
<div class="sidebar-input-wrapper">
<label>Email</label>
<input type="email" placeholder="Enter Email">
</div>
<button type="submit" class="button_1">Send</button>
</form>
</aside>
</div>
The only way to tackle this issue is by setting margin or padding to the two elements.
I would advise you to set padding & margin 0 for both label and input and if you still want to reduce the gap, sometimes you will probably need to set a negative margin which is not recommended but still does the job.
try this on your label
.label {
/*margin-bottom: -5px;*/
margin-bottom: 0px
}
In HTML
<label class="lable">...</label>
Again, this practice of adding a negative margin is highly discouraged.
EDIT: I missed the display:inline-block property, which someone in comments reminded me of
Above fix won't work, Making margin-bottom: 0 for the label will work though
a js fiddle:
* {
list-style: none;
text-decoration: none;
box-sizing: border-box;
}
.container {
width: 80%;
margin: auto;
}
aside#sidebar-wrapper {
padding: 5px;
width: 300px;
border: 2px black solid;
}
aside#sidebar-wrapper input {
width: 100%;
}
.lable {
margin-bottom: 0px;
}
<div class="container">
<aside id="sidebar-wrapper">
<h1>Get A Quote</h1>
<form action="" class="form-sidebar-wrapper">
<div class="sidebar-input-wrapper">
<label class="lable">Name</label>
<input type="text" placeholder="Name" class="nameINput">
</div>
<div class="sidebar-input-wrapper">
<label class="lable">Email</label>
<input type="email" placeholder="Enter Email">
</div>
<button type="submit" class="button_1">Send</button>
</form>
</aside>
</div>
Actually, this is caused by... New line in the code. That is new line between label and input. I am not sure why exactly this new line is being displayed, but I've encountered similar behavior even when the are in different order, when it can be rendered as space.
In fact, even in the snippet, if you try selecting the label text and then move your mouse slightly down to where that "extra space" is you will see how selection increases by 1 character of "nothing".
I thought I was seeing things, but https://www.tutorialrepublic.com/faq/how-to-remove-the-space-between-inline-block-elements-in-css.php actually suggests removing those new lines to remove the extra space in the 1st method shown on page.
So... I guess we should just be careful with extra new lines in our code. Or use flex on parent as https://www.geeksforgeeks.org/how-to-remove-the-space-between-inline-block-elements/ suggest (font-size: 0 does not always work for me)
If you have no margin or padding applied and you still have this space, you could either use display: flex on the parent or display: block/inline-block on the label to get rid of these.
I've got a static site, which is all of a sudden displaying irregular headings. This is a single page with lots of JavaScript including tabular selections at the top of the page. The site worked just fine six months ago. Now I'm seeing unexplained mis-alignment of input elements on a half of the 12 different navigation tabs:
Decorative Ends
Round to Tapered
Bracing
Round to Square
Round to Flat
Airframe Cluster
The headings contained within a form:
<form id="dte_form">
<div class="containerLeft">...</div>
<div class="containerLeft">...</div>
<div class="containerLeft">
<label title="Data can.. [hover info]">Tube O.D. (mm): </label>
<input type="text" id="dteCutTubeOD" value="31.75" size="8">
<br>
<label>Amplitude (mm):</label>
<input type="text" id="dteAmplitude" value="25.4" size="8">
<br>
<label># of Cycles:</label>
<input type="text" id="dteNumOfCycles" value="3" size="8">
<br>
</div>
<div style="clear: both"></div>
<div class="containerLeft">
<input type="button"...>
<input type="button"...>
<input type="button"...>
<input type="button"...>
</div>
</form>
The CSS is nothing fancy:
.containerLeft {
float: left;
margin: 4px 20px;
}
.containerLeft label {
float: left;
height: 21px;
margin: 8px 5px 0 5px;
}
.containerLeft input[type=text] {
float: right;
height: 15px;
margin: 4px 5px;
padding-left: 5px;
}
The heading should look like this:
Basically, in a div, I would float the label left, float the input element right, add a <br> and repeat. I can't figure out why occasionally the elements don't line up correctly. I'm sure I'm missing something silly, but I just can't see it. Any ideas what is causing the occasional misalignment?
Click here for website. Note. I'm seeing the same results in both Chrome and Firefox.
This is what happens when you use floats. They overlap following blocks and shrink line boxes.
If you want to prevent an block element from being adjacent to a float, just use clear.
.float {
float: left;
width: 50px;
height: 3em;
border: 1px solid;
background: yellow;
}
.normal, .clear {
height: 2em;
border: 1px solid;
background: pink;
}
.clear {
clear: left;
}
<div class="float">Float</div>
<div class="normal">Normal</div>
<div class="normal">Normal</div>
<br /><br />
<div class="float">Float</div>
<div class="normal">Normal</div>
<div class="clear">Clear</div>
So apparently the issue is related to element height. Note that the label and input elements have different heights. This was done for appearance. In some combinations and element lengths the float thing gets futzed up.
The corrective action was to modify the CSS style sheet in one place:
.containerLeft label {
clear: both; /* new addition to this element */
float: left;
height: 21px;
margin: 8px 5px 0 5px;
}
An alternative would be to use <div style="clear: both"></div> in lieu of the <br> elements (or use the handy CSS library classes offered up by Oriol)
How would I make the button connect to the input, there is an awkward gap I don't know how to fix.
#ask {
padding: 10px 10px 10px 6px;
font-size:45px;
background-color:#FAFAFA;
min-width: 400px;
padding: 0 auto;
border-radius: 5px;
}
#button {
text-align:center;
}
</style>
<input id="ask" type="text" placeholder = "Ex: how tall is the gateway arch" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Ex: how tall is the gateway arch'"/>
<input type="image" src="qmb.png" name="saveForm" class="btTxt submit" id="button" height="50.5px" padding = "0px"/>
Use CSS float:left to get input & image side by side.
input, img {
float:left;
}
Please check this fiddle: http://jsfiddle.net/hnj604pr/
Wrap your input tags in a div like this:
<div>
<input....>
<input....>
</div>
This way the browser will align them for you.
You also might want to consider changing your second input tag to use the button or submit tag.
For fun I have taken a piece of code I got from a friend and tried to create a login field with username and password and I am having a hard time get the fields next to the words. There is a big gap between the word username and the box you type in.The same applies for password.
This is my code:
<form method="post" action="https://www.mattepunkten.com/action_login.php">
<input type="hidden" name="error_url" value="http://www."here you write url to webpage one should be directed to when typing wrong login".com">
Username:
<input type="text" name="fld_userid" size="15" style="width: 120px"><br>
Password:
<input type="password" name="fld_password" size="15" style="width: 120px"><br>
<input type="submit" name="cmd_invia" value="Login">
</form>
And my css code is the following.
input {
color: black;
margin: 10px 100px 0px 400px;
}
form {
color: white;
text-align: right;
position: fixed;
margin-top: 30px;
}
I am pretty new at this and would appreciate some tips! Thanks!
Well your margins are huge, try to make them smaller and see how it looks:
input {
color: black;
margin: 10px;
}
The style you are using has the following format:
margin: <top> <right> <down> <left>;
So with 100px right and 400px left they will get very far away :)
To be able to style the text you need it to be an element, so a simple answer would be to wrap it in some tag, but this is a style I personally enjoy, and adds a lot more meaning:
html
<label>
<span>Username:</span>
<input name="fld_userid">
</label>
css
label { display: block; text-align: center; }
input, span { display: block; width: 200px; }
This should stack both the text and the input on top of each other, while keeping them grouped by the label, so when you interact with the text the browser properly focus its related input.
I will add an explanation
margin: 10px 100px 0px 400px;
stands for:
top margin is 10px
right margin is 100px
bottom margin is 0px
left margin is 400px
Have you tried working with labels at all - keeping it semantic, and formatted, plus if you wrap your inputs it'll give it a larger hit area for said fields. In addition - I removed the input margin, removed the forms positioning and float so it retained it's block level, and adjusted the overall form margin so it's centered.
HTML
<form method="post" action="https://www.mattepunkten.com/action_login.php">
<input type="hidden" name="error_url" value="#"/>
<label>Username:
<input type="text" name="fld_userid" size="15"/><label>
<label>Password:
<input type="password" name="fld_password" size="15"/></label>
<input type="submit" name="cmd_invia" value="Login"/>
</form>
CSS
label {
display: block;
}
form {
text-align: center;
margin-top: 30px auto;
}
http://jsfiddle.net/evanbriggs/kad7yy1L/
Its better form to contain your labels in a <label> tag.
For example:
<div class="form-element">
<label for="foo">Label</label>
<input type="text" name="foo" id="foo" />
</div>
CSS to style it left justified:
.form-element label {
display: inline-block;
width: 150px;
}
I have inputs with jQuery validation and I'm inserting images, when input is required, but it add some margin, and moves my divs.
Here is my fields without validation:
and inputs with error:
I tried different variants: adding z-index, positioning, but couldn't do this.
Here is my html with errors:
<form ... >
<div class="field3">
<div class="pickers">
<span id="pickers">From</span>
<input id="report_start_date" name="report[start_date]" size="30" type="text" class="hasDatepicker error"><label for="report_start_date" generated="true" class="error" style="">bla bla bla</label><
</div>
<div class="pickers"><span id="pickers">To</span>
<input id="report_end_date" name="report[end_date]" size="30" type="text" class="hasDatepicker error"><label for="report_end_date" generated="true" class="error" style="">bla bla bla</label>
</div>
</div>
<input name="commit" type="submit" value="Run Report">
</form>
And my css:
label.error {
background: url('../images/not_valid.png') no-repeat;
display:inline;
margin-left: 5px;
padding: 15px 0 5px 5px;
color:transparent;
}
label.valid {
background: url('../images/valid.png') no-repeat;
display:inline;
margin-left: 5px;
padding: 15px 0px 10px 50px;
width: 47px;
height: 36px;
color:transparent;
}
#pickers{
font-weight: bold;
}
.pickers{
display: inline;
padding-top: 5px;
}
(copied from the question comment)
Try using position: absolute for the labels that contain the validation marker images. This way they will not take part in the normal layout and update it whenever you need to show/hide them.
Position it however you want, and give it the css style visibility:hidden; that'll keep it part of the document flow while hiding it until you need it. Then, when you need it, use jQuery (or whatever you want to use -- jQuery is easiest) to un-hidden it.