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>
Related
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;
}
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've built an edit page with field-label divs and field-editor divs as per usual ASP.Net MVC, resulting in the following HTML:
<div class="editor-label">
<label for="Code">Project Code</label>
</div>
<div class="editor-field">
<input id="Code" name="Code" type="text" value="" />
</div>
The above pair of divs would be repeated for as many editable fields there are on my form. By default these just display one below the other on the page. What I'd like to achieve is to use CSS to display the page in a table layout. So my CSS is something like this:
.field-label, .field-editor{
display: table-cell;
}
This just displays them all in cells next to each other, wrapping at the end of the browser window. How could I force a new row after each field-editor div (or before each field-label div) without adding additional markup to the view? I understand that this would be simple by adding additional markup to the view, like a new div to which I assign display: table-row. But I'd have to add this markup between each set of label/editor combination, and that just feels like a violation of the DRY principle. So I'd like to do this without needing to do this additional markup.
Given the above HTML, the following CSS will work:
.editor-label, .editor-field {
display: inline-block;
width: 48%;
}
.editor-label {
text-align: right;
}
This will allow the elements to share the same line, and take an assigned width (in this case relative to the width of the parent element). The text-align declaration is simply to place the text of the label visually close to the input element.
JS fiddle demo.
You could, of course, achieve the same result using different widths and without wrapping the the label and input elements needlessly in divs.
With a slightly more tidied-up version:
label, input {
display: inline-block;
}
label {
text-align: right;
width: 20%;
}
input {
width: 30%;
margin-right: 30%;
}
JS Fiddle demo.
The margin-right is declared simply so that the cumulative width of the label, the input and its margin-right leaves insufficient space for the next label to occupy the same line.
I am creating an MVC 1.0 form to use in multiple views. I have some elements that need to be shown on the same line, and I have done this by setting the display to "display: inline" for the style. I have also added the margin-left setting to the CSS in order to force the gap between the inline elements but this doesn't appear to be being set.
My CSS has:
fieldset label.inline
{
display: inline;
margin-left: 2em;
}
The view code is:
<fieldset>
<legend>Details</legend>
<p>
<label for="StartTime">Start Time:</label>
<%= Html.TextBox("StartTime", Model.StartTime.ToShortTimeString())%>
<label for="NextDay" class="inline">Next Day?</label>
<%= Html.CheckBox("NextDay") %>
<%= Html.ValidationMessage("StartTime", "*")%>
</p>
</fieldset>
Setting the size in the "margin-left" style has no impact on the space between the StartTime control and the NextDay label. How can I create this gap between the elements?
Use display: inline-block;
What browser are you testing in?
If you're using Firefox, use the Firebug extension. Use the pointer tool to select one of your elements, and then use the Layout tab to look at the box model. That will show you the padding, border and margins that are being applied. If you post the HTML being generated and the box model properties that are being calculated you might get better answers.
The "margin" style works different for inline elements. You can use the "inline-block" display-mode:
fieldset label.inline { display: inline-block; margin-left: 2em; }