I am trying to display a label above a custom file input field and another label inside it with bootstrap 4. I tried the following, but the label 1 is not shown.
<label class="w-100">label 1
<input type="file" class="custom-file-input">
<label class="custom-file-label">label 2</label>
</label>
When I label a normal input field this way, label 3 is shown as expected.
<label class="w-100">label 3
<input type="text" class="form-control">
</label>
Does anybody know why label 1 is not shown and what I should do to display label 1 and label 2? Many thanks in advance.
What actually does work is this:
<label for="some-id" class="w-100">label 1</label>
<div class="custom-file" style="margin-top:-1.5em" id="some-id">
<input type="file" class="custom-file-input">
<label class="custom-file-label">label 2</label>
</div>
but the negative margin seems to be a bad solution. Without it, the label is displayed to high.
Just run this:
$(".custom-file-input").on("change", function() {
var fileName = $(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</form>
If you need to support multiple file selection (using the multiple attribute) here is the code for that.
$('.custom-file-input').on('change', function () {
let fileName = Array.from(this.files).map(x => x.name).join(', ')
$(this).siblings('.custom-file-label').addClass("selected").html(fileName);
});
I just write a basic bootstrap 4 custom file label code, I hope it'll help you out. Thanks
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<label class="w-100">label 1
<div class="custom-file">
<input type="file" class="custom-file-input">
<label class="custom-file-label">label 2</label>
</div>
</label>
Related
I'd like to make bootstrap checkboxes that look like bootstrap badges, while retaining the checkbox functionality. I thought maybe I could simply style the checkbox label as a badge, but it didn't work.
<head>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'></script>
</head>
<div class='form-check m-1' style='display:inline-block;'>
<input id='".$tagDAT[1]."' name='".$tagDAT[1]."' type='checkbox' class='form-check-input form-check-inline'>
<label class='tag form-check-label text-capitalize' for='".$tagDAT[1]."'>
<span class='badge badge-secondary'>".$tagDAT[1]."</span></label>
</div>
This code is being echoed from PHP. The checkboxes look like regular checkboxes. It's ignoring the 'badge' code. I thought maybe since it was being echoed via ajax, the bootstrap in the html page wasn't affecting the echoed code. That's why i added the 'head' tag with the bootstrap. Still didn't work.
Anybody have ideas? Or a better way of getting the same result?
Move the checkbox inside the label
Remove the nested <span>
Apply .badge .badge-secondary directly to the <label>
Apply .form-check-inline to the wrapper not the input
Click anywhere on the .badge to check/uncheck the box.
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>
<div class='form-check form-check-inline m-1'>
<label class='tag form-check-label text-capitalize badge badge-secondary' for='myTag'>
<input id='myTag' name='myTag' type='checkbox' class='form-check-input'>myTag
</label>
</div>
Bootstrap 5 has got Toggle Buttons
<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Single toggle</label>
<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
<label class="btn btn-primary" for="btn-check-2">Checked</label>
Just like what you see in the picture, the default section is the default view that I have in a form. The appended view will get displayed based on the ajax request.
I'm trying to make the radio button to be able to reflect with each other when either from default or appended view get selected. Example like when I select Yes from Default then the Appended View also will auto update to Yes. Then from Appended View to select No it will reflect the Default to No as well.
Please check on this link for my code and do testing
https://codepen.io/terrer-sandman/pen/WNwbPMv?editors=1010
Try with this:
function autoSelect(id, value) {
$('input[type=radio][data-id='+id+'][value='+value+']').click();
}
$('.can_claim_default').on('change', function(){
autoSelect($(this).data('id'), $(this).val());
})
$('#receipt-inline-view').on('change', 'input[name="can_claim"]', function(){
autoSelect($(this).data('id'), $(this).val());
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div style="padding: 15px;">
<!-- You can remove the "50002" from names and classes if you want -->
<p>Default</p>
<div>
<label class="radio-inline">
<input type="radio" class="can_claim_default" name="can_claim_50002" data-id="50002" checked="" value="0">No Status
</label>
<label class="radio-inline">
<input type="radio" class="can_claim_default" name="can_claim_50002" data-id="50002" value="1">Yes
</label>
<label class="radio-inline">
<input type="radio" class="can_claim_default" name="can_claim_50002" data-id="50002" value="2">No
</label>
</div>
<br /><br />
<p>Appended View</p>
<div id="receipt-inline-view">
<label class="radio-inline">
<input type="radio" class="can_claim_50002" name="can_claim" data-id="50002" checked="" value="0">No Status
</label>
<label class="radio-inline">
<input type="radio" class="can_claim_50002" name="can_claim" data-id="50002" value="1">Yes
</label>
<label class="radio-inline">
<input type="radio" class="can_claim_50002" name="can_claim" data-id="50002" value="2">No
</label>
</div>
</div>
I use the codes same as the bootstrap3 sample as below:
<div class="checkbox">
<label>
<input ng-model="user.rememberMe" type="checkbox"> Remember Me
</label>
</div>
and got the style like:
not like its style in bootstrap sample
Bootstrap adds no special styles to a checkbox. We can easily verify this with a live example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
</form>
You probably found a theme, fork or non-official example that adds special styles to the checkbox.
I am trying to combine input-group-addon with radio elements. Example code is below.
http://www.bootply.com/1M34c3sy29
But the radio image is not centered for Price radio section.
Is it possible to center the image for the Price section? Or do you recommend another solution for such kind of presentation.
Bootstrap is adding some styling that will not allow the vertical align to function as you need. The elements are absolutely positioned. I'd try positioning the radio button another way, using the top css property:
.input-group { display:inline-block;}
#inlineradio2{ top: 13px; }
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<div class="col-lg-12">
<div class="radio">
<label>
<input id="inlineradio1" name="sampleinlineradio" value="option1" type="radio">
Automatic. Price will be set by the system!</label>
</div>
<div class="radio">
<label>
<input id="inlineradio2" name="sampleinlineradio" value="option2" type="radio">
<div class="input-group">
<span class="input-group-addon">Price</span>
<input type="text" class="form-control" placeholder="" id="price-box" aria-describedby="Price">
</div><!-- /input-group -->
</label>
</div>
</div>
</div>
</fieldset>
</form>
I've also changed the name of the HTML id attribute on the radio button in question as the id should be unique.
dear i have 2 text and 2 checkbox:
<input type="checkbox" id="class1">
<input type="checkbox" id="class2">
<div id="hidden">
<input type="text" id="valclass1">
<input type="text" id="valclass2">
</div>
i want if i checked at "class1" then click show button "valclass1" can show. but if not checked, it hidden.how do i do that?
I would do it like this:
<script type="javascript/text" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="javascript/text">
$(function()
{
$('#ShowButton').click(function()
{
if($('#class1').is(':checked')) $('#valclass1').show();
if($('#class2').is(':checked')) $('#valclass2').show();
});
});
</script>
<input type="checkbox" id="class1">
<input type="checkbox" id="class2">
<input type="button" id="ShowButton" />
<input type="text" id="valclass1" style="display: none">
<input type="text" id="valclass2" style="display: none">
It would work, but probably doesn't answer your question. You need to learn more about JavaScript to be able to roll your own solution.
Check out W3C's JavaScript tutorial