I am attempting to utilize the bootstrap "form-control" class on a checkbox within a label tag so that clicking the text also checks the textbox.
Here is the JSFiddle: https://jsfiddle.net/vpm13m2b/
The HTML for the control is:
<div class="form-group">
<div>
Attempt #1
<span class="red">*</span>
</div>
<label>
<input type="checkbox" class="form-control" /> Yes
</label>
</div>
<div class="form-group">
<div>
Attempt #2
<span class="red">*</span>
</div>
<label class="checkbox-inline">
<input type="checkbox" class="form-control" /> Yes
</label>
</div>
With attempt 1, the "Yes" text is pushed to a separate line. With attempt 2, the checkbox and underlying controls are pulled the width of the page, which also pushes the "Yes" text to the second line. The screenshot of this is below:
Here's what I am trying to do:
The styled checkbox is displayed next to the "Yes"
Selecting the text also selects the checkbox
Keep the solution clean (trying to avoid dealing with float:left or jquery click events on the text to check the checkbox)
It just seems that there has to be a vanilla way to do this. All the bootstrap docs just show standard checkboxes - nothing with the form-control class styling the checkbox for their nice inline examples.
Remove the class="form-control" from your checkboxes. As the bootstrap docs state:
All textual <input>, <textarea>, and <select> elements with
.form-control are set to width: 100%; by default.
jsFiddle example
The .form-control class has about a dozen properties being set that you most likely don't want or need.
Here's what I came up with to fix my issue. I need to retain the .form-control class on the checkbox element so that the checkbox control is styled by the bootstrap theme. My busines requirement is to use the themed, not default browser, checkbox.
See working JSFiddle here: https://jsfiddle.net/vpm13m2b/3/
input[type=checkbox].form-control {
width: 25px;
height: 25px;
display: inline-block;
vertical-align: -8px;
}
The css above was added into my site's stylesheet so that the form-control checkboxes retain the style, and I don't have to change the existing code that has a label containing the checkbox and caption to the right of the checkbox vertically centered.
This works with my original attempt (#1) on the html below:
<div class="form-group">
<div>
Attempt #1
<span class="red">*</span>
</div>
<label>
<input type="checkbox" class="form-control" /> Yes
</label>
</div>
The resulting output matches what I'm looking for in the original question:
Related
What exactly determines how the input is focused on a <label>? In principle, wrapping a radio <input> in a <label> ensures that you can click anywhere on the label text to select the radio button:
<label>
<input name="foo" type="radio">Fubar
</label>
However, this doesn't work if the label text is more complex. The code below is FireBug output for two radio buttons, where one of them has a Bootstrap popover when hovering over the text.
The second button (Bar) is manually-entered HTML, which works as expected (clicking on 'Bar' selects the radio).
The first button (Foo) has no label text in the original HTML, and everything in the <a ...>Foo</a> is inserted by JavaScript, to give a popover with a title and some text. The problem is that this radio button can only be selected by clicking on the button itself, and not by clicking on the text. The class override-link just turns off link styling (default colour and pointer, no decoration).
Any idea how to expand the focus area for the first button to the entire 'Foo' text?
<div class="radio">
<label id="FooLabel">
<input id="pg29Radio0" name="pg29Radio" value="0" checked="checked" type="radio">
<a class="override-link" title="" rel="popover" data-toggle="popover"
data-content="<div style='font-weight:normal'>
Foo popover body text</div>"
href="#" data-original-title="<div style='font-weight:bold; white-space:nowrap'>
Foo popover title text</div>">
Foo
</a>
</label>
</div>
<div class="radio">
<label id="BarLabel">
<input id="pg29Radio1" name="pg29Radio" value="1" type="radio">
Bar
</label>
</div>
EDIT
jsfiddle showing the problem. This shows two radio buttons, with a Bootstrap popover when hovering over the 'Foo' text. You can select the 'Bar' radio by clicking on the 'Bar' text, but you can't do this for 'Foo'.
The <label> element should actually wrap only the text (and not the input) and you should use the for="id" in the label (to let the browser know that this label is the the element with the id="id".
The problem that you have is that the <a> element "takes over" the click from the label element. You can use the pointer-events css property on the label a to prevent that a to take over it:
label a {
pointer-events: none;
}
<div class="radio">
<input id="pg29Radio0" name="pg29Radio" value="0" checked="checked" type="radio" />
<label for="pg29Radio0" id="FooLabel">
<a class="override-link" title="" rel="popover" data-toggle="popover"
data-content="<div style='font-weight:normal'>
Foo popover body text</div>"
href="#" data-original-title="<div style='font-weight:bold; white-space:nowrap'>
Foo popover title text</div>" onclick="this.parent.click();">
Foo
</a>
</label>
</div>
<div class="radio">
<input id="pg29Radio1" name="pg29Radio" value="1" type="radio" />
<label for="pg29Radio1" id="BarLabel">
Bar
</label>
</div>
Note that if you expect the click on the a to open some modal/run some javascript code - this will prevent it.
update
Since you already use javascript you can use this:
onclick="this.parentElement.click()"
On the anchor.
Here is a jsfiddle, based on the one in your comment:
https://jsfiddle.net/2pumb4yy/2/
I'm trying to create an input form on a web page, and I want all of the input elements to be lined up along a certain column. My idea was to use absolute positioning to just shift all of the input elements over to a specific point on the page. It's working fine, except for one problem: the input elements are overlapping with each other a little bit, vertically.
Here's a MVCE:
<!DOCTYPE html>
<html><head>
<style>
span.right_align {
display: inline;
position: absolute;
left: 80px;
}
div.form_container {
position: relative;
}
</style>
<title>World's Best GUI</title></head>
<body type="text/css" style="background-color: #F7D879; font-family: Georgia, serif">
<div class="form_container">
<form name="guiForm" method="post" action="return false;">
Input 1: <span class="right_align"><input type="text"></span><br>
Input 2: <span class="right_align"><select autocomplete="off">
<option value="yes">Yes</option>
<option value="no">No</option></select></span><br>
Input 3: <span class="right_align"><input type="text" size="50"></span><br>
Input 4: <span class="right_align"><input type="text"></span>
</form>
</div>
</body>
</html>
As far as I can tell, the problem is because the font is smaller than the size of the input box, but it's the size of the font that determines where a new line "begins". If you comment out or remove everything in the right_align class, they stop overlapping (but they also stop lining up so nicely).
I'll also note that the reason I went for the span-class solution is because I need to 1) have some lines dynamically disappear and reappear, depending on the current state of a drop-down, and 2) dynamically create new input items that will also line themselves up nicely. This seemed like a solution that would interfere very little with the current workings of my web page.
Is there a simple way to fix this? Should I be creating these columns in an entirely different way? I'm open to totally new ideas as well.
EDIT: someone suggested I create a jsfiddle, so I did: http://jsfiddle.net/uy9comxk/
EDIT 2: there will be lines where I have multiple inputs that have to appear beside each other on the same line (for date inputs). I didn't include them because it would have increased the MCVE size by a lot.
In your css, use a line-height and it will work:
div.form_container {
position: relative;
line-height: 25px;
}
With a fiddle
Since you're using a form, you should use the label tag and set the width of each - ideally a little longer than than width of the inputs' names to account for longer ones. Using the label for the inputs will also fix the overlapping issue of the inputs.
CSS:
label {
display: inline-block;
width: 80px;
}
input {
margin-left:10px;
}
HTML:
<form name="guiForm" method="post" action="return false;">
<label for="input1">Input 1:</label> <input name="input1" type="text"><br>
<label for="input2">Input 2:</label> <input name="input2" type="text"><br>
<label for="input3">Input 3:</label> <input name="input3" type="text"><br>
<label for="input4">Input 4:</label> <input name="input4" type="text"><br>
<label for="input5">Input 5:</label> <input name="input5" type="text"><br>
</form>
http://jsfiddle.net/ub3bw1rv/
I am trying to show and hide a text field based on whether or not the user clicks a radio button. Is this possible? According to the docs, collapsible content needs a header.
Here is my code with no collapsible content:
<fieldset data-role="controlgroup" data-mini="true">
<input type="radio" name="radio-mini" id="radio-mini-1" value="choice-1" />
<label for="radio-mini-1">No</label>
<input type="radio" name="radio-mini" id="radio-mini-2" value="choice-2" />
<label for="radio-mini-2">Yes</label>
</fieldset>
<label for="textarea-a">Textarea:</label>
<textarea name="textarea" id="textarea-a">
</textarea>
I would like the textarea to be shown if the radio button labeled "Yes" is clicked. Any ideas?
Well, if the radio and the textarea are siblings (and you're using, and happy to be compatible with up-to-date browsers) you could use CSS:
label[for=textarea-a],
#textarea-a {
display: none;
}
#radio-mini-2:checked ~ label[for=textarea-a],
#radio-mini-2:checked ~ #textarea-a {
display: block;
}
JS Fiddle demo.
In the above I removed your radio elements from the fieldset (as the textarea, and its label have to be siblings for this approach to work).
If I have a html form like the following:
<form name="statusForm" action="post.php" method="post" enctype="multipart/form-data">
Test:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
TestTestTest:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
TestTestTestTestTestTest:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
TestTestTestTestTestTestTestTestTestTestTest:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
<input name="Submit" value="submit" type="submit">
</form>
Is it possible to align the checkboxes so they are in union, without using a table or css but pure html? Otherwise, which css should be used?
Yup. Surround each label with a <label> tag:
<label for="checkboxes1">Test:</label>
<input id="checkboxes1" name="checkboxes[]" value="Test" type="checkbox">
Then give the label a width:
label {
display: inline-block; /* try "block" instead if this fails in IE */
min-width: 5em;
}
That should pad out the text boxes nicely. As an added bonus, clicking on the label should now place the browser focus into the textbox.
The article Applying CSS to forms has some examples of syling labels to cause inputs to the right to line up along a vertical edge.
That said, it is a convention in user interface design to place labels to the right or radio buttons and checkboxes. If you follow that convention, then they will line up by themselves (since all the checkboxes will share a width).
You could just put your labels and inputs in an unorderded list. In order to get the alignment, the text would have to go on the right of the input/
<ul>
<li>
<label><input /> Some Text</label>
</li>
</ul>
or
<ul>
<li>
<input /><label for="">Some Text</label>
</li>
</ul>
Rich
The simplest way would simply be to align them all to the right. I'm not sure if the "align" attribute works on the form element but you could try that, or wrap your code in a div or p element with align="right").
CSS is a better solution. Put a class on the form then use the CSS rule text-align: right; or simply add style="text-align: right" to the form element directly.
I don't see why you want to do that.
It doesn't meet your no css instruction, but you could use inline styles if you really just want no external css.
Perhaps you could use
CSS (and to a lesser extent- tables) are tools you are looking for.
Edit: Another way you could do this is with ghost pixel images. images that are a 1x1 alpha transparent png and you use the height and width attributes in to tell it how much you want to space. You'd might need some inline css to make sure things clear correctly.
Checkboxes in HTML forms don't have implicit labels with them. Adding an explicit label (some text) next to it doesn't toggle the checkbox.
How do I make a checkbox toggle from clicking on the text label as well?
If you correctly markup your HTML code, there is no need for javascript. The following code will allow the user to click on the label text to tick the checkbox.
<label for="surname">Surname</label>
<input type="checkbox" name="surname" id="surname" />
The for attribute on the label element links to the id attribute on the input element and the browser does the rest.
This has been testing to work in:
IE6
IE7
Firefox
Set the CSS display property for the label to be a block element and use that instead of your div - it keeps the semantic meaning of a label while allowing whatever styling you like.
For example:
label {
width: 100px;
height: 100px;
display: block;
background-color: #e0e0ff;
}
<label for="test">
A ticky box! <input type="checkbox" id="test" />
</label>
Ronnie,
If you wanted to enclose the label text and checkbox inside a wrapper element, you could do the following:
<label for="surname">
Surname
<input type="checkbox" name="surname" id="surname" />
</label>
As indicated by #Gatekiller and others, the correct solution is the <label> tag.
Click-in-the-text is nice, but there is another reason to use the <label> tag: accessibility. The tools that visually-impaired people use to access the web need the <label>s to read-out the meaning of checkboxes and radio buttons. Without <label>s, they have to guess based on surrounding text, and they often get it wrong or have to give up.
It is very frustrating to be faced with a form that reads "Please select your shipping method, radio-button1, radio-button2, radio-button3".
Note that web accessibility is a complex topic; <label>s are a necessary step but they are not enough to guarantee accessibility or compliance with government regulations where it applies.
You can wrap your checkbox in the label:
<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
<input type="checkbox" name="surname">
</label>
You need to just wrap the checkbox in label tag just like this
<label style="height: 10px; width: 150px; display: block; ">
[Checkbox Label Here] <input type="checkbox"/>
</label>
FIDDLE
or you can also use the for attribute of label and id of your checkbox like below
<label for="other">Other Details</label>
<input type="checkbox" id="other" />
FIDDLE
this should work:
<script>
function checkbox () {
var check = document.getElementById("myCheck").checked;
var box = document.getElementById("myCheck")
if (check == true) {
box.checked = false;
}
else if (check == false) {
box.checked = true;
}
}
</script>
<input type="checkbox"><p id="myCheck" onClick="checkbox();">checkbox</p>
if it doesnt, pleae corect me!
Wrapping with the label still doesn't allow clicking 'anywhere in the box' - still just on the text!
This does the job for me:
<div onclick="dob.checked=!dob.checked" class="checkbox"><input onclick="checked=!checked" id="dob" type="checkbox"/>Date of birth entry must be completed</div>
but unfortunately has lots of javascript that is effectively toggling twice.