I have an issue and I can't seem to either find the answer here or solve it myself. The textboxes seem to have by default approx. 10px over and below the actual textbox. I've tried setting the margin and the padding to 0 but nothing the space remains.
I want that textbox to be right over the element that is below it, using margin to move it causes it to push the div below it lower so it doesn't really help. Any idea how I can get rid of that whitespace?
Markup:
<div class="span-8 last">
<label for="VoicenoteSearch"></label>
<input name="data[Voicenote][search]" type="text" class="input-text long" style="margin-top:10px;margin-left:-10px" placeholder="Search" id="VoicenoteSearch">
</div>
Relevant CSS:
label {
display: block;
}
input.input-text {
border-color: #b9b9b9;
border-width: 2px;
position: relative;
z-index: 2;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
margin-bottom: 8px;
padding: 5px;
}
.input-text.long {
width: 320px;
}
JSFiddle: http://jsfiddle.net/pyQ5T/
Even if I remove all the CSS those spaces are there, it seems it's part of the textbox by default
Try adding these CSS properties:
padding:0px;
margin:0px;
float: left;
Related
EDIT: I've added the relevant code below at the bottom of this question. As you'll see there, the button is wrapped within a div. Also, this problem only occurs in one browser, that being Firefox, and I'll be using a hack to target that browser only.
I have an input element of type submit (i.e., basically a submit button). The text displayed in this element, as defined in the element's value attribute, appears too low (i.e., too close to the bottom of the button instead of vertically centered). The button has a fixed height.
Naturally, I want to move the button's text, as defined in the value attribute, one or two pixels upwards.
I've tried a few things with the button's padding (top and bottom), but that didn't change anything. [Is that to be expected, BTW?] Therefore, I would like to use relative positioning to move the text upwards a bit.
The thing is, however, that I need to target the text itself, NOT the input/button element. And that's of course because the button itself should stay at its current location, I only want to move the TEXT displayed on the button.
Thus my question: Is there a way, in CSS, to target not the button but only its displayed text (as defined in the value attribute) ?
Of course, other solutions (preferably CSS only) are welcome as well.
Code:
HTML:
<form id="zoekform">
<input type="text" class="" id="search-text" name="search-text" placeholder="Search">
<div class="erom" id="erom2">
<input id="zoekknop" style="float: right" type="submit" method="GET" value="Search!" />
</div>
</form>
CSS:
#zoekform {
height: 29px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 9px;
}
.erom {
height: 100%;
display: inline-block;
box-sizing: border-box;
}
#erom2 {
border: solid 1px #452F5D;
width: 27%;
display: inline-block;
box-sizing: border-box;
}
#zoekknop {
float: right;
height: 100%;
color: white;
font-size: 19px;
box-sizing: border-box;
background-color: #446666;
color: white;
letter-spacing: 2px;
border: solid 1px white;
width: 100%;
}
And finally the part where I'm targeting Firefox only, and where I can't get the padding working (and to be sure, the "media query" (it's not really a media query) does work, and in any case I've also tried this without the media query, i.e. as part of the regular CSS):
#-moz-document url-prefix() {
#zoekknop {
padding-top: -1px !important;
padding-bottom: 9px !important; // I set it to 9px for now, so that I could clearly see if it worked
}
}
For some reason form elements are particular and quirky about font.
Assign a font to the <submit>'s parent, then use font: inherit on the <submit> button.
On the <submit> assign line-height of 1.4 to 2 (notice there's no unit like px or em.) I actually have the line-height assigned by inheriting the font from <form> 1.4.
Set width using the ex unit of measurement. One ex is as wide as ax character, making it a great way of gauging how much space you are using in relation to your text. I used 9ex for a 6 character word (i.e. Submit).
This ruleset may help you for Firefox:
input::-moz-focus-inner {
border: 0;
padding: 0;
/* Some users have said these last two are
unnecessary or should be -2px */
margin-top:0;
margin-bottom: 0;
}
Here's some changes I did to your button and search field:
#zoekknop {....
....
border: 2px double white;
line-height: 1.65;
vertical-align: baseline;
}
#search-text {
line-height: 1.75;
vertical-align: baseline;
padding: 4px 3px 0;
}
Review the Snippet below:
#form {
font: 400 16px/1.4'Verdana';
}
#form .sub {
font: inherit;
width: 9ex;
color: blue;
border-radius: 5px;
}
#form .sub:hover {
color: cyan;
background: #888;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#zoekform {
height: 29px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 9px;
font: 400 16px/1.4 'Verdana';
}
#zoekform #zoekknop {
color: white;
font-size: 18px;
box-sizing: border-box;
background-color: #446666;
color: white;
border: 2px double white;
line-height: 1.65;
vertical-align: baseline;
}
#search-text {
line-height: 1.75;
vertical-align: baseline;
padding: 4px 3px 0
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
input::-moz-focus-inner {
border: 0;
padding: 0;
margin-top: 0;
margin-bottom: 0;
}
<form id="form" name="form">
<input type="submit" class="sub" value="Submit" />
</form>
<form id="zoekform">
<input type="text" class="" id="search-text" name="search-text" placeholder="Search">
<input id="zoekknop" type="submit" method="GET" value="Search!" />
</form>
This should work
#buttonID{
width: 500px;
height: 500px;
padding-bottom: 100px;//pushes text up inside the button
}
Make sure you define the height, width, line-height, font-size, and padding of the button. Then you should be able to manipulate the padding and line-height to get the result you want. It sounds like the button may be inheriting a line height that is causing the issue.
Targeting the text itself isn't the way to go about this. Would be helpful to see the CSS and HTML of the button, and note which browser the issue appears in.
I have a textbox and when I enter the term "laptop" its not visible properly. The problem is in IE9, not with Chrome.
HTML
<input id="small_search_string_sub" name="search_string" type="text" class="newsearch_sub rounded " placeholder="Search..." maxlength="500">
Here is the CSS:-
.newsearch_sub {
padding: 3px 10px 3px 10px;
background-color: #FFF;
width: 220px;
height: 25px;
margin-top: 10px;
vertical-align: top;
}
It seems like you have no reset for the input default style, also the input has not format for the text on it, also the padding might be pushing down the text to far.
I tried this, and it seems to work well on IE9 for me, but the fact that I see another class (rounded) on the line of code that you send, makes me wonder if there is not something missing here, can you put a link to the code, even as a stand alone page, this way I can debug on ie9 on the proper code, and maybe give you a solution if this one does not work for you.
.newsearch_sub {
padding: 3px 10px 3px 10px;
background-color: #FFF;
width: 220px;
height: 25px;
margin-top: 10px;
vertical-align: top;
font:12px/24px Arial,Helvetica
}
My fiddle pretty much shows the problem. Trying to get the labels to be on the left side of each text box if anyone could help. http://jsfiddle.net/HC64Y/
<div id="boxalign2" class="boxalign2" >
<label>Hospital*:</label><input class="rounded2" required title="Hospital is required!" name="MainHospital" type="text" />
<label>Title*:</label><input class="rounded2" name="MainTitle" type="text"/>
<label>Department*:</label> <input class="rounded2" name="MainDept" type="text"/>
</div>
css
input.rounded2 {
border: 1px solid #ccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 2px 2px 3px #666;
-webkit-box-shadow: 2px 2px 3px #666;
box-shadow: 2px 2px 3px #666;
font-size: 20px;
padding: 4px 7px;
outline: 0;
-webkit-appearance: none;
float: left;
display: inline-block;
clear: left;
width: 150px;
text-align: right;
}
You are making your inputs inline-block, but you are also floating them to the left.
If you remove the float: left and add <br> after each input, you will get the correct behavior.
http://jsfiddle.net/A8es3/
To align the boxes, add a div wrapper around each label/input, make your label inline-block with a fixed width. There are other ways to do this as well, but this is one way.
http://jsfiddle.net/A8es3/1/
As stolli mentioned, you can also simply use the label element as the wrapper:
http://jsfiddle.net/A8es3/2/
You can give to your div .boxalign2 and label fixed widths.
View the demo http://jsfiddle.net/HC64Y/11/
.boxalign2 {
width:400px;
}
label {
text-align:right;
padding-right:20px;
display:inline-block;
min-width:150px;
}
To ammend Jeff B's answer to get your result, simply give the elements a width in your css
label {width: 100px} where '100' is whatever value looks best for your layout.
Also, remember that the primary purpose of labels (as opposed to just div's or span's for labeling) is that labels act as a secondary click target for the control they are associated with. Therefore, you can wrap your elements in the label tag (<label><input /></label>) or associate them by id (<label for="foo"><input id="foo"/>) and give the user much more to click, simply by clicking the label, they can toggle the control, focus the text input, whatever. A big boon in usability for touch devices.
<!DOCTYPE html>
<html>
<head>
<title>Centering a form</title>
</head>
<body>
<div class="form">
<label>Name</label>
<input type="text" name="name">
<label>Email</label>
<input type="text" name="email">
<label>Phone</label>
<input type="text" name="phone">
</div>
</body>
</html>
<style type="text/css">
.form {
margin: 0 auto;
width: 210px;
}
.form label{
display: inline-block;
text-align: right;
float: left;
}
.form input{
display: inline-block;
text-align: left;
float: right;
}
</style>
Demo here: https://jsfiddle.net/durtpwvx/
My problem is with the below html
<div class="editor-container">
<div class="editor-row curFocus">
<div class="editor-label">
<label for="FirstName">First Name</label>
</div>
<div class="editor-field">
<input class="text-box single-line valid" id="FirstName"
name="FirstName" type="text" value="Nancy" maxlength="20">
</div>
</div>
</div>
When the user selects the input field, I add class "curFocus" to the outer div via some javascript to highlight both label and the input field.
My css is -
.editor-container {
border: thin solid #444444;
display: table; width: 100%;
}
.editor-row {
width: 100%; display: table-row;
}
.editor-label {
padding-left: .4em; width: 40%;
}
.editor-label, .editor-field {
padding-right: .4em; padding-bottom: .2em; padding-top: .2em;
display: table-cell;
}
.curFocus {
border: 2px solid #05365b;
background-color: #d3e5f2;
margin: 3px; padding: 3px;
}
My problem is that while using debuggers in Chrome 12 and IE9, they both show the border settings being applied to the outer div. But, when viewing the form, neither browser display's the specified border. All other css settings work correctly. I also tried changing definition of ".curFocus" to ".curFocus div". But this applied the style to each of the nested div's also, but did display borders on all of the divs.
While I'm not a CSS expert, it is not obvious why this shouldn't work.
Edit
Here is jsfiddle link - http://jsfiddle.net/photo_tom/KmsF5/1/. While testing this it does work correctly in IE9 if in IE7 compatibly mode. Otherwise, it does not display correctly.
Sorry about not including link, still getting use to fact that jsfiddle even exists.
Well, I can tell you what's causing it, but I can't tell you why. Elements with display: table-row; can't have a border applied to them. You can apply the border to the table-cell children of the .curFocus element, but not the table-row itself.
Again, no idea why this silly rule exists, but you can fix your problem with some CSS:
.curFocus {
background-color: #d3e5f2;
margin: 3px; padding: 3px;
}
.curFocus>div {
border: 2px solid #05365b;
border-width: 2px 0px; /* top and bottom border for all the table-row's immediate children (table-cells) */
}
.curFocus>div:first-child {
border-width: 2px 0px 2px 2px; /* left border for the leftmost table-cell */
}
.curFocus>div:last-child {
border-width: 2px 2px 2px 0px; /* right border for the rightmost table-cell */
}
See http://jsfiddle.net/d772N/
I think your problem is your display type on the .editor-row. display: table-row; Remove that and the problem will go away. Plus I don't think that all browsers support display: table-row; very well.
You might need a higher CSS specificity, as it is ambiguous which CSS styles will apply with the current definitions.
Try div.curFocus rather than .curFocus div for the class definition to apply the style to the div with that class name rather than its div children.
I have an input box
<span class="arrowDate"><input type="text" value="<?php echo $inputValue; ?>" id="<?php echo $id; ?>" class="datePickBox" /></span>
What I want to achieve is to add via css and image with and arrow in the right hand corner of the input box. If I change properties to the image, the properties of the input box should remain the same. Basically the image should be a type of overlay for the input box, but do not know how to do this.
.datePickBox{
font-size: 0.9em;
border: 1px solid #DEDEDE;
width: 270px;
position:relative;
right:0px !important;
padding-right:20px;
}
.arrowDate{ background:url('../images/arrow.png') no-repeat right center; border:1px solid #DEDEDE; }
Give your <input> a transparent background so the background of the <span> can shine thru and remove the border, because the border comes from the <span> in your case;
.datePickBox {
background: none;
border: none;
}
But your text will be over the background image, if long enough, so you can additionaly add a right padding as large as the image is wide.
.datePickBox {
background: none;
border: none;
padding-right: 20px; /* bg image width */
}
Given the mark-up:
<span><input type="text" id="textInput" name="textInput" />→</span>
I used the CSS:
span {
display: block;
width: 150px;
height: 30px;
position: relative;
background-color: #ffa;
text-align: right;
overflow: hidden;
border-radius: 1em;
border: 1px solid #ccc;
line-height: 30px;
padding: 0 0.5em 0 0;
}
span > input {
position: absolute;
top: 0;
left: 0;
right: 2em;
bottom: 0;
background-color: transparent;
border-radius: 1em 0 0 1em;
border-width: 0;
border-right: none;
outline: none;
}
To give the following JS Fiddle demo.
It's worth noting that I explicitly chose to place the arrow alongside the input, instead of 'overlaying' it above the input. It's also possible to amend my answer from the a similar question to create a comparable layout with a submit button alongside the input.
Can't get the image to display within the input box, with overlay I mean floating above the input box
you won't be able to get it floating above the text with background-image.
One way to do this would be to place the image next to the input field, and using relative positioning to move it above it.
CSS:
.boximage { position: relative; left: -40px; z-index: 2 }
HTML:
<input type='text'><img class='boximage' src='image.gif'>
better use this
<span><input type='text' /><img src='datepicker.jpg' /></span>
change the css to meet your overlay.. remove the right border of the text box