When I use Boostrap to create a date input field that has a limited width
<input type="date" id="my_date" name="my_date" class="form-control" style="width:80px">
the value (or the placeholder) are covered by the control icons when the field is focused; fine. But when the field is not focused, the place where the control icons are placed if focused takes white space.
Is there a workaround so that the field shows full content if not focused?
Try this code. When you hover the buttons are displayed. If the text is still hidden, try to make a smaller font, or less padding.
CSS
#my_date::-webkit-inner-spin-button {
-webkit-appearance: none;
display: none;
}
#my_date:hover::-webkit-inner-spin-button {
display: block;
}
Related
I am creating a form in Bootstrap 3. Would like to have the input fields and label surrounding them to appear smaller than what bootstrap provides by default.
In order to do so, I have created a couple of css classes
.input-field {
height: 20px
}
.label-size {
font-size: 10px;
line-height: 1.2;
}
however, this has messed up the alignment for checkboxes. The label for each checkbox does not appear properly aligned with the checkbox and also the label for the field ( tag) appears mis aligned.
Here is the fiddle - https://jsfiddle.net/yyky0ms1/1/
How can I correct this?
If you want to make your labels smaller, simply surround the text with the small tag.
<small><label class="col-xs-4 label-size">checkboxes</label></small>
You can also use it within the label tag.
<label><input type="checkbox" id="chk1"><small> chk1</small></label>
Example http://dabblet.com/gist/5859946
If you have a long placeholder, the input by default does not display wide enough to show all the placeholder text.
e.g.
<input placeholder="Please enter your name, address and shoe size">
Without setting a fixed width, and preferably no javascript, can you set the input to show all the placeholder text?
This can be done only via javascript by setting the size = placeholder length:
input.setAttribute('size',input.getAttribute('placeholder').length);
Here is a code that dose that for all the inputs:
http://jsfiddle.net/KU5kN/
Just in case someone wants to use this with jQuery, that code would be below. Also, if the placeholder attribute doesn't exist in the accepted answer, you'll get errors, which is taken care of as well in the jQuery example below.
$("input[placeholder]").each(function () {
$(this).attr('size', $(this).attr('placeholder').length);
});
I went with Avner Solomon's solution, as proposed in the comments of one of the above sections.
You need a div element wrapping an input and another div element that contains your label:
<div class="input-container">
<!-- this element is hidden from display and screen readers. -->
<div class="input-hidden-label"
aria-hidden="true">
Your placeholder text
</div>
<input class="input"
type="text"
placeholder="Your placeholder text"/>
</div>
Assuming the font styles for the input-hidden-label and the input are the same, you will see a line of text alongside the input. The text will be the same length as the input, give or take a few pixels.
You can then apply these styles:
.input-container {
display: inline-block;
margin-bottom: 2em;
}
.input {
display: inline;
width: 100%;
font-size: 16px;
font-family: Times;
}
.input-hidden-label {
height: 0;
visibility: hidden;
}
This hides the label by giving it height: 0, and removing visibility. But, the width remains. The div that contains the input and the label matches the width of its longest child. If you then set the input to width: 100%, it will match the parent width, which already matches the placeholder.
See this fiddle.
Caveats
This idea is not very accessible, nor is this solution. You should include a label for the input, and not rely on the placeholder itself as a label.
A workaround i thought of:
Make a span element with the same text as placeholder.
Measure width of the span element.
Set input to the width of the span element.
hide span element. display none will not work, use other method.
http://jsfiddle.net/Timar/cwLp3rbo/
var input = document.getElementById('input-1');
// measure width of same text as placeholder
var placeholder = document.getElementById('input-1-placeholder');
input.style.width = placeholder.offsetWidth + "px"
I have a dynamically generated form that displays fine in all browsers that I have tested except IE6 & 7. I have headings that should be able to be placed either above or to the side of the form inputs. For radio buttons and check boxes I want the control to the left of the label, for all other inputs I want the control to the right. The HTML should be the same for both, only the CSS should change.
() Radio 1 () Radio 2
[] Checkbox 1 [] Checkbox 2
Text |____________|
etc.
or
Radio 1 Radio 2
() ()
Checkbox 1 Checkbox 2
[] []
Text
|____________|
etc.
So far I've got
<span class="control">
<label for="a1" class="forbutton">A1</label>
<input type="checkbox" id="a1" class="form-input-checkbox" name="a" value="1"/>
</span>
or something similar for each input. The CSS is
.forbutton {
margin-bottom: 0.20em;
float: right;
}
.control {
display: inline-block;
vertical-align: text-top;
position: relative;
}
/* Only if you want labels above inputs */
.form-input-checkbox,
.form-input-radio {
display: block;
clear: both;
}
In IE6 & 7 the <span>s end up being 100% width instead of taking the width of their content (as with the other browsers, including IE8). How can I fix this easily? If I give the span a width it does fix it, however, I don't know how wide it should be since the labels are dynamically generated.
Goals:
Valid HTML
Valid CSS
Labels before inputs in HTML code
Same HTML code for labels above and labels to the side
Any solution that achieves the same outcome will be gratefully accepted!
I would recommend getting rid of "display:inline-block" on that span. IE7 and earlier versions do not understand it.
Additionally, the other styles that you have on that element, in this example, don't really warrant the use of inline-block. Span is inline by default, I would just leave it that way.
I'm trying to reproduce the input box behavior of stackoverflow where they place span text over an input box. It looks like the text is actually inside the input box, but is actually just a finely positioned span. They hide the span when the user types text into the field. To see the behavior in action, press "Ask Question" and then look at the "Title" input box. The text says: "what's your programming question? be specific".
I'm creating this for an ecommerce checkout page, so there will be multiple input boxes of different widths and positions.
As a CSS newbie, is there a way to create input boxes and then somehow attach a span to the left and vertical center of a input field? I suppose I could go through and position each one individually, so I'm hoping a class could be developed that would automatically attach a span to a previously defined input box. Does anyone have an elegant way to do this without custom positioning each one?
I just did this with a jQuery plugin.
I used JavaScript to automate this, but the same rules apply.
If you look closely, its not the span that is positioned. There's another hidden input.
<input type="text" tabindex="100" class="actual-edit-overlay" value="" style=" background-color: white; color: black; opacity: 1; width: 610px; height: 15px; " disabled="">
<input id="title" name="title" type="text" maxlength="300" tabindex="100" class="ask-title-field edit-field-overlayed" value="" style="z-index: 1; position: relative; opacity: 0.3; ">
<span class="edit-field-overlay">what's your programming question? be specific.</span>
If you inspect with firebug and set turn off the display:none;, you will see clearly the one textbox, another textbox and a span.
I'm using submit controls in my web page
<input type="submit" name="BtnSearch" value="Search" id="btnSearch" title="Search" />
Even when I turn off CSS I get a big gap before the start and after the end of the text of my button. My buttons are also bigger than I want. Is there a way to style buttons in IE6 and 7 to make them more compact?
Set overflow to visible:
input {
overflow: visible;
}
And then set the padding to whatever you want it to be.
Most of the browser-specific styling is done with the border--set border-width to 0 if you want a plain square button.
You could try to style like so:
input [type="submit"] {
padding: 0;
border: 0;
}
or simply add a class to your button and add style rules for that class.