This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed last month.
All my range <input> elements seem to have extra vertical space
after them, preventing them from being packed tightly together vertically,
and also preventing placing related elements (like text labels)
closely after them vertically.
How do I get rid of this unwanted extra vertical space?
Here's an html+css snippet that demonstrates the problem; it attempts to remove all space between all elements (except for some 1px colored borders for debugging):
<!DOCTYPE html>
<html>
<head>
<style>
/*
pack everything as tightly as possible,
except some 1px colored borders for debugging
*/
* {
margin:0;
border:10px solid black; /* make anything not covered by rules below look terrible */
padding:0;
}
html { border:1px solid red; }
body { border:1px solid orange; }
hr { border:1px solid green; }
table {
border:1px solid cyan;
border-spacing:0;
}
td { border: 1px solid blue; }
div { border:1px solid magenta; }
input {border:1px solid red; } /* the 1px matters but the red doesn't show?? */
</style>
</head>
<body>
Three range <input>s separated by <br> (unwanted extra vertical space):
<br>
<input type="range">
<br>
<input type="range">
<br>
<input type="range">
<hr>
Table with three range <input>s in same cell, separated by <br> (unwanted extra vertical space):
<table>
<tr>
<td>
<input type="range">
<br>
<input type="range">
<br>
<input type="range">
</table>
<hr>
Table with three range <input>s in different cells (unwanted extra vertical space):
<table>
<tr><td><input type="range">
<tr><td><input type="range">
<tr><td><input type="range">
</table>
<hr>
Three <div>s, each with a range <input> inside (unwanted extra vertical space):
<div><input type="range"></div>
<div><input type="range"></div>
<div><input type="range"></div>
<hr>
Three range <input>s separated by <div>s with negative margins (hack to show desired spacing):
<br>
<input type="range">
<div style="margin-top:-5px; margin-bottom:-1px;"></div>
<input type="range">
<div style="margin-top:-5px; margin-bottom:-1px;"></div>
<input type="range">
<hr>
<input> elements of type other than range, to show that the border color (red) works as expected on most of them:
<br>
button:<input type="button" value="button value"></input>
checkbox:<input type="checkbox"></input>
color:<input type="color"></input>
date:<input type="date"></input>
datetime-local:<input type="datetime-local"></input>
email:<input type="email" value="email value"></input>
file:<input type="file"></input>
hidden:<input type="hidden"></input>
image:<input type="image"></input>
month:<input type="month"></input>
number:<input type="number" value="123"></input>
password:<input type="password" value="abc"></input>
radio:<input type="radio"></input>
range:<input type="range"></input>
reset:<input type="reset"></input>
search:<input type="search" value="search value"></input>
submit:<input type="submit"></input>
tel:<input type="tel" value="tel value"></input>
text:<input type="text" value="text value"></input>
time:<input type="time"></input>
url:<input type="url" value="url value"></input>
week:<input type="week"></input>
</body>
</html>
Here's the output of the above snippet in chrome 108.0.5359 on linux; notice that the range <input>s seem to be
a bit more widely spaced vertically than necessary:
Inspecting the elements, I observe:
This range <input> element is 18 pixels high (16 if I turn off the 1px debugging borders); this looks reasonable:
The <td> that contains the range <input> is 24 pixels high (22 if I turn off the 1px debugging borders), because it contains 6 pixels of mystery space at the bottom:
More generally, there seems to be 6 pixels of mystery extra vertical space after each range <input> element.
Where is this mystery extra vertical space coming from?
Is there a way to get rid of it, without hard-coding the assumption that it's there and how big it is?
Also, less importantly, I'm curious why the border color (red) doesn't seem to have any effect on range <input> elements in the above snippet (the border-width is honored, but the border-color is not).
This is being caused by the default line-height (which is 1.2 times the current font size in chrome).
So the line break is actually breaking a new line at that size.
add a line-height of 0 to the td or div or any container it sits in
JSFiddle
This is usually browser specific, but at least in chrome browser, the cause of the extra white space is actually because input has display: inline-block and if you change it to display: block, it won't have extra space.
<!DOCTYPE html>
<html>
<head>
<style>
/*
pack everything as tightly as possible,
except some 1px colored borders for debugging
*/
* {
margin: 0;
border: 10px solid black;
/* make anything not covered by rules below look terrible */
padding: 0;
}
html {
border: 1px solid red;
}
body {
border: 1px solid orange;
}
hr {
border: 1px solid green;
}
table {
border: 1px solid cyan;
border-spacing: 0;
}
td {
border: 1px solid blue;
}
div {
border: 1px solid magenta;
}
input {
border: 1px solid red;
display: block
}
/* the 1px matters but the red doesn't show?? */
</style>
</head>
<body>
Three range <input>s separated by <br> (unwanted extra vertical space):
<br>
<input type="range">
<br>
<input type="range">
<br>
<input type="range">
<hr> Table with three range <input>s in same cell, separated by <br> (unwanted extra vertical space):
<table>
<tr>
<td>
<input type="range">
<br>
<input type="range">
<br>
<input type="range">
</table>
<hr> Table with three range <input>s in different cells (unwanted extra vertical space):
<table>
<tr>
<td><input type="range">
<tr>
<td><input type="range">
<tr>
<td><input type="range">
</table>
<hr> Three <div>s, each with a range <input> inside (unwanted extra vertical space):
<div><input type="range"></div>
<div><input type="range"></div>
<div><input type="range"></div>
<hr> Three range <input>s separated by <div>s with negative margins (hack to show desired spacing):
<br>
<input type="range">
<div style="margin-top:-5px; margin-bottom:-1px;"></div>
<input type="range">
<div style="margin-top:-5px; margin-bottom:-1px;"></div>
<input type="range">
<hr> <input> elements of type other than range, to show that the border color (red) works as expected on most of them:
<br> button:
<input type="button" value="button value"></input>
checkbox:<input type="checkbox"></input>
color:<input type="color"></input>
date:<input type="date"></input>
datetime-local:<input type="datetime-local"></input>
email:<input type="email" value="email value"></input>
file:<input type="file"></input>
hidden:<input type="hidden"></input>
image:<input type="image"></input>
month:<input type="month"></input>
number:<input type="number" value="123"></input>
password:<input type="password" value="abc"></input>
radio:<input type="radio"></input>
range:<input type="range"></input>
reset:<input type="reset"></input>
search:<input type="search" value="search value"></input>
submit:<input type="submit"></input>
tel:<input type="tel" value="tel value"></input>
text:<input type="text" value="text value"></input>
time:<input type="time"></input>
url:<input type="url" value="url value"></input>
week:<input type="week"></input>
</body>
</html>
As for why the border is not applied to the range slider, it's caused by the appearance: auto, if you change that to appearance: none, it will have the borders shown:
<!DOCTYPE html>
<html>
<head>
<style>
/*
pack everything as tightly as possible,
except some 1px colored borders for debugging
*/
* {
margin: 0;
border: 10px solid black;
/* make anything not covered by rules below look terrible */
padding: 0;
}
html {
border: 1px solid red;
}
body {
border: 1px solid orange;
}
hr {
border: 1px solid green;
}
table {
border: 1px solid cyan;
border-spacing: 0;
}
td {
border: 1px solid blue;
}
div {
border: 1px solid magenta;
}
input {
border: 1px solid red;
appearance: none;
display: block;
}
/* the 1px matters but the red doesn't show?? */
</style>
</head>
<body>
Three range <input>s separated by <br> (unwanted extra vertical space):
<br>
<input type="range">
<br>
<input type="range">
<br>
<input type="range">
<hr> Table with three range <input>s in same cell, separated by <br> (unwanted extra vertical space):
<table>
<tr>
<td>
<input type="range">
<br>
<input type="range">
<br>
<input type="range">
</table>
<hr> Table with three range <input>s in different cells (unwanted extra vertical space):
<table>
<tr>
<td><input type="range">
<tr>
<td><input type="range">
<tr>
<td><input type="range">
</table>
<hr> Three <div>s, each with a range <input> inside (unwanted extra vertical space):
<div><input type="range"></div>
<div><input type="range"></div>
<div><input type="range"></div>
<hr> Three range <input>s separated by <div>s with negative margins (hack to show desired spacing):
<br>
<input type="range">
<div style="margin-top:-5px; margin-bottom:-1px;"></div>
<input type="range">
<div style="margin-top:-5px; margin-bottom:-1px;"></div>
<input type="range">
<hr> <input> elements of type other than range, to show that the border color (red) works as expected on most of them:
<br> button:
<input type="button" value="button value"></input>
checkbox:<input type="checkbox"></input>
color:<input type="color"></input>
date:<input type="date"></input>
datetime-local:<input type="datetime-local"></input>
email:<input type="email" value="email value"></input>
file:<input type="file"></input>
hidden:<input type="hidden"></input>
image:<input type="image"></input>
month:<input type="month"></input>
number:<input type="number" value="123"></input>
password:<input type="password" value="abc"></input>
radio:<input type="radio"></input>
range:<input type="range"></input>
reset:<input type="reset"></input>
search:<input type="search" value="search value"></input>
submit:<input type="submit"></input>
tel:<input type="tel" value="tel value"></input>
text:<input type="text" value="text value"></input>
time:<input type="time"></input>
url:<input type="url" value="url value"></input>
week:<input type="week"></input>
</body>
</html>
Note that this is browser specific and different browser could have a different behaviors.
Related
I'm trying to move this add-on to the top of the text box, but I don't see an easy way to do it without breaking the design.
Here is my current code:
<div class="input-group">
<span class="input-group-addon redbar">Some long<br>addon text here:</span>
<input type="text"
name="someName"
maxlength="11"
style="height:134%;"
class="form-control"
title="some title"
placeholder="the content"/>
</div>
(Adding the line break and adjusting the height was my band-aid solution.) I understand that I can use a label, but doing so would make it inconsistent with the rest of the site (unless it's somehow styled the same).
I tried looking at various SO posts, but didn't see anything relevant. Is this possible with Bootstrap?
I am not quite sure on how you want it to be displayed. If you can show an image of how you want it then we can surely come up with exact solution. However, I have put on this fiddle that might me in your track I guess.
.redbar{
text-align: center;
border-image: none;
border-radius: 3px !important;
border-left: 3px solid red !important;
border-right: 3px solid red !important;
display: block !important;
width: 150px !important;
margin: 0px auto;
float: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<span class="input-group-addon redbar">Some long<br>addon text here:</span>
<input type="text"
name="someName"
maxlength="11"
style="height:134%;"
class="form-control"
title="some title"
placeholder="the content"/>
</div>
<div class="input-group">
<div class="col-xs-12 redbar">Some long<br>addon text here:</div>
<input type="text"
name="someName"
maxlength="11"
style="height:134%;"
class="form-control"
title="some title"
placeholder="the content"/>
</div>
CSS
.redbar{
text-align:center;
}
https://jsfiddle.net/f9feamb2/
I think this is the result you needed.
Removed the class .input-group-addon
jQuery Mobile automaticly adds this to an < input >. How can I override it and remove the top margin from the div?
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input id="myinput">
</div>
And css of the div looks like:
.ui-input-text input, .ui-input-search input, textarea.ui-input-text {
-moz-box-sizing: border-box;
display: block;
line-height: 1.4em;
outline: 0 none;
padding: 0.4em;
width: 100%;
}
DEMO
You may write new CSS for input with parent containers class name so that it will take higher priority
HTML
<div class="wrap">
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input id="myinput" />
</div>
</div>
CSS
.wrap .ui-input-text input{
border:1px solid red; /*desired style*/
margin-top:0;
}
Starting with jqm 1.4 you should use class="ui-field-contain" instead of data-role="fieldcontain" around your <label> and <input> tags. To adjust the vertical spacing of each of the field sets you can override the margins of the <div> tag using a simple additional style property:
<div class="ui-field-contain" style="margin-top:2px;margin-bottom:2px;">
<label for="field1">Field label:</label>
<input type="text" name="field1" data-mini="true" id="field1" />
<div>
Few hour ago I have asked question that for to align 2 text boxes in line.
But now problem is text boxes are aligned and I have put select list in side of each text box.
but problem is that when I change the label or text before text box all formation disturbed and it's not aligning in same format.
I want that whatever the text I write before text box, the position of text box should not change. (ONE TEXT BOX SHOULD BE AT SAME POSITION UNDER ANOTHER ONE)
fiddle demo
code :
.divkl {
display: inline;
margin: 20px;
}
.blockl{
width: 100%;
display: block;
padding:3px;
}
.txt_prd_add
{
width:100px;
border-radius:0px !important;
margin-left:10px;
margin-top:4px;
}
.select_prd
{
width:85px;
margin-top:4px;
}
Wrap all of the labels in <label></label> and then apply a fixed width and display: inline-block to the label via CSS. If you want to prevent the elements from wrapping when the browser is resized add white-space: nowrap; to .block1 and .divk1
HTML
<div class="blockl">
<div class="divkl">
<label>Material</label>
<input type="text" class="txt_prd_add">
<select class="select_prd">
<option>GB</option>
<option>MB</option>
<option>GHz</option>
</select>
</div>
<div class="divkl">
<label>Color</label>
<input type="text" class="txt_prd_add">
<select class="select_prd">
<option>GB</option>
<option>MB</option>
<option>GHz</option>
</select>
</div>
</div>
<div class="blockl">
<div class="divkl">
<label>Size</label>
<input type="text" class="txt_prd_add">
<select class="select_prd">
<option>GB</option>
<option>MB</option>
<option>GHz</option>
</select>
</div>
<div class="divkl">
<label>Type</label>
<input type="text" class="txt_prd_add">
<select class="select_prd">
<option>GB</option>
<option>MB</option>
<option>GHz</option>
</select>
</div>
</div>
CSS
label{
width: 50px;
display: inline-block;
}
.divkl {
display: inline;
margin: 20px;
white-space: nowrap; /* Prevents wrapping */
}
.blockl{
width: 100%;
display: block;
padding:3px;
white-space: nowrap; /* Prevents wrapping */
}
JS Fiddle: http://jsfiddle.net/u7aTD/7/
DEMO
<label class="title">Material</label>
.title {
display: inline-block;
width: 80px;
}
Demo: http://jsfiddle.net/abhitalks/u7aTD/6/
You would better wrap your text in labels, e.g.:
<div class="divkl">
<label>Material</label>
<input type="text" class="txt_prd_add">
...
And, then apply css to the labels, e.g.:
label { display: inline-block; width: 10%; }
.txt_prd_add { width:10%; ...
.select_prd { width:10%; ...
The problem you are having is with the widths. It would be better if you first apply widths in percentages to check it out, and then tweak it according to your design.
You can use tables insted of divs , as to get proper aling.`
Material
GB
MB
GHz
Color
GB
MB
GHz
<tr class="divkl"><td>Size</td>
<td>
<input type="text" class="txt_prd_add">
<select class="select_prd">
<option>GB</option>
<option>MB</option>
<option>GHz</option>
</select>
</td>
</tr>
<tr class="divkl">
<td>Type</td>
<td>
<input type="text" class="txt_prd_add">
<select class="select_prd">
<option>GB</option>
<option>MB</option>
<option>GHz</option>
</select>
</td>
</tr>
</table>
</div>`
I have a form where I gave the textfields a padding so it will be a bit bigger and nicer. Underneath the form I have a submit button.
The button and the textfields have a width of 100%, but the problem is, is that the button isn't fully 100% by that it isn't equally even in the width with the textfields. What am I doing wrong? Can't seem to "find" the issue
I have put it here http://jsfiddle.net/zrhB6/3/
The Css
input[type=text],input[type=password]{
display: block;
height: 3em;
width: 100%;
}
.btn {
background-color:#c1d82f;
border:3px solid #97a34b;
display:inline-block;
color:#26328c;
font-family:Verdana;
font-size:20px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
cursor: pointer;
width: 100%;
}
HTML
<div class="grid-container">
<div class="grid-50 login">
<h3>Login</h3>
<form class="grid-100">
<input type="text" name="loginEmail" placeholder="Email"/>
<input type="password" name="loginPassword" placeholder="pass"/>
<input type="submit" name="loginSubmit" class="btn"/>
</div>
<div class="grid-50 login">
<h3>Register</h3>
<form">
<input type="text" name="registerName" placeholder="Name"/>
<input type="text" name="registerEmail" placeholder="Email"/>
<input type="password" name="registerPassword" placeholder="pass"/>
<input type="submit" name="registerSubmit" class="btn"/>
</div>
</div>
I'm using unSemantic grid, but that shouldn't be a issue I think
To both CSS selectors, add:
box-sizing:border-box;
The reason is the default box sizing doesn't include padding and margins in the width, so you're getting 100% + padding + border + margin for the total width.
I have been spending the entire day trying to figure out how I can create big forms and at the same time maintain a proper design of the layout.
Currently I'm using formee (style and 960 grid system), which I have tried to turn into an inline form rather than row based (default). Unfortunately it gets really messy and looks horrible.
To give an visual understanding of what I want to archieve I have created a mockup.
How can I solve issue?
Here is such an example: http://jsfiddle.net/PhilippeVay/gaegv/2/
HTML:
<fieldset class="group">
<legend>First logical group of items</legend>
<div class="col">
<p class="text">
<label for="label1">Field label 1</label>
<input type="text" id="label1" />
</p>
<p class="text">
<label for="label2">Field label 2</label>
<input type="text" id="label2" />
</p>
<p class="text">
<label for="label3">Field label 3</label>
<input type="text" id="label3" />
</p>
</div>
<div class="col">
<p class="text">
<label for="label4">Field label 4</label>
<input type="text" id="label4" />
</p>
<p class="text">
<label for="label5">Field label 5</label>
<input type="text" id="label5" />
</p>
<p class="text">
<label for="label6">Field label 6</label>
<input type="text" id="label6" />
</p>
</div>
</fieldset>
<div class="group fieldset-like">
<p class="textarea">
<label for="label7">Field label 7</label>
<textarea id="label7">some text (test font-size)</textarea>
</p>
</div>
<div class="group">
<fieldset class="col">
<legend>Third legend</legend>
<p class="text">
<label for="label8">Field label 8</label>
<input type="text" id="label8" />
</p>
<p class="text">
<label for="label9">Field label 9</label>
<input type="text" id="label9" />
</p>
<p class="text">
<label for="label10">Field label 10</label>
<input type="text" id="label10" />
</p>
</fieldset>
<fieldset class="col">
<legend>Fourth legend</legend>
<p class="text">
<label for="label11">Field label 11</label>
<input type="text" id="label11" />
</p>
<p class="text">
<label for="label12">Field label 12</label>
<input type="text" id="label12" />
</p>
<p class="text">
<label for="label13">Field label 13</label>
<input type="text" id="label13" />
</p>
</fieldset>
</div>
CSS:
.col {
float: left;
width: 36%;
padding: 2%;
background: #EEE;
}
.col + .col {
margin-left: 10%;
}
.col:after {
content: "";
display: block;
clear: both;
}
fieldset,
.fieldset-like {
margin: 0;
padding: 0;
border: 1px solid darkgreen;
}
.group {
margin: 20px 10px; /* must come after .fieldset-like rule */
}
label {
font-weight: bold;
cursor: pointer;
}
.text { /* because .radio and .checkbox are SO different! */
clear: both;
}
.text label,
.textarea label {
display: inline-block;
width: 39%;
margin-right: 1%;
text-align: right;
background-color: lightgreen;
}
.text input,
.textarea textarea {
display: inline-block;
width: 55%;
border: 1px solid darkgreen;
padding: 4px;
}
.textarea {
width: auto;
padding: 2% 4% 2% 4%;
}
/* label and textarea: also see above */
.textarea label {
width: 14.04%; /* 39% of 36% Yeah I know... */
margin-right: 0.36%; /* 1% of 36% */
background-color: lightgreen;
vertical-align: top; /* otherwise label is at the the bottom of a very high neighbor */
}
.textarea textarea {
width: 74%;
}
a class on paragraph allows to style the label according to the nature of the form element (you can't style a preceding sibling - or a parent - according to an element that comes after it in the DOM, in 2012 and in CSS3 at least ;) ).
you can use selector attributes with modern browsers: input[type="text"] but it's longer to write in a Fiddle AND then you must consider text, password and select element in HTML 4.01 and in HTML5 add email, number, tel, etc That'll multiply the length of your selectors. Or you can use a class on a parent to distinguish and group form elements. Former is needed if you're writing a general reset stylesheet for thousands of colleagues, latter is more efficient if you're also the one writing the HTML code.
.group contains 2 .col, it doesn't matter if it's columns in a fieldset or fieldsets in a div.
calculation of a width into an element having a width means multiplication. Draw it on a sheet of paper and write down each width. It'll allow you to not forget about a single one ;)
padding in percentage doesn't seem to work for input. Not sure about that.
widths on select are easier and cross-browser if you add box-sizing:
select {
-moz-box-sizing: content-box; /* Firefox, meet padding ... */
box-sizing: content-box; /* IE8+ */
padding: 4px 6px; /* example */
}
From a UX standpoint form labels that sit to the left of the field have a lower rate of user completion. The reason for this is that users have to read the label, associate the label to the field and then move their eyes back to the left again after completing filling in of the field. This causes minor eye fatigue and mental distraction.
Forms that have the highest rate of completion is when the label is above the field. The second highest is when the label is within the field. This will also give your form a cleaner look and give the impression to the end user that, even though it might be long. It's not a daunting form to complete.