In the view I've browse file and check box currenlty the check Box is above the browse control and I want it to be in the left side of it,how should I change it?
<div class="form-group">
#Html.LabelFor(model => model.Cert, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#if (Model.Certificate !=null)
{
<input type="checkbox" checked="checked" disabled="disabled" />
}
else
{
<input type="checkbox" disabled="disabled" />
}
<input type="file" name=ficateFile />
</div>
</div>
Without seeing your full code and css this is a tricky thing to answer however perhaps you could try this?
input[type=checkbox], input[type=file] {
display: inline-block;
}
If that doesnt work you could allways split the checkbox and file upload into 2 columns eg
<div class="form-group">
<div class="col-md-2"></div> <!-- Label -->
<div class="col-md-2"></div> <!-- Checkbox -->
<div class="col-md-8"></div> <!-- File Upload -->
</div>
I cant see your css, but you should apply some css changes. See in element inspector where elements floating depends on parrent element and adjust float. You can apply custom css class if you dont wont to compromise your css.
<input style="display: inline" type="file" name=ficateFile /> should work. Also change the second div to span if you want all 3 elements on the same line.
Related
Is it impossible change choose file text of input file in Bootstrap 5 using CSS like Bootstrap 4?
And how can I add a margin to "No file chosen"?
Bootstrap 5 + some CSS
Compose Bootstrap's custom file input with custom label.
Hide default Choose file button with the ::file-selector-button pseudo-element. There are pseudo-elements ::-webkit-file-upload-button and ::-ms-browse for older versions of Chrome/Opera/Safari and Edge/IE respectively. But bootstrap.css uses ::file-selector-button and ::-webkit-file-upload-button only. So I propose to do the same.
Add some more CSS for the :hover effect and for the thin border between the label and the input field.
Tested in Chrome, Firefox and Edge.
https://codepen.io/glebkema/pen/VwMQWGE
.custom-file-button input[type=file] {
margin-left: -2px !important;
}
.custom-file-button input[type=file]::-webkit-file-upload-button {
display: none;
}
.custom-file-button input[type=file]::file-selector-button {
display: none;
}
.custom-file-button:hover label {
background-color: #dde0e3;
cursor: pointer;
}
<div class="container py-3">
<div class="input-group custom-file-button">
<label class="input-group-text" for="inputGroupFile">Your Custom Text</label>
<input type="file" class="form-control" id="inputGroupFile">
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css">
If the file input is placed inside the label element and then hidden the label itself will act as the file input when it is clicked. Adding the form-control class and the tabindex attribute (which specifies that the element can be focused) to the label will then style it like a generic Bootstrap input.
<div class="input-group">
<span class="input-group-text">Custom Add-on Text</span>
<label class="form-control" tabindex="0">Custom Input Text
<input type="file" class="invisible">
</label>
</div>
https://codepen.io/yetiface/pen/PoQqrda
This solution has its downsides, for example the label element will not automatically receive bootstrap styles specifically for input[type='file']. However it is such a simple method that I felt it worth posting for those who it can help.
I needed to change both texts so this method helped
$('#review-image').change(function(e) {
let fileName = (e.target.files.length > 0) ? e.target.files[0].name : 'choose_file_not';
$('#review-image-label').text(fileName);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container mt-3">
<div class="input-group custom-file-button">
<label class="input-group-text" for="review-image" role="button">choose_file</label>
<label for="review-image" class="form-control" id="review-image-label" role="button">choose_file_not</label>
<input type="file" class="d-none" id="review-image" name="images[]" multiple accept="image/*">
</div>
</div>
Bootstrap 5 beta no longer provides a custom file input like Bootstrap 4 that used pseudo elements to override the browser's file input defaults. Therefore you'd have to use JS or make your own psuedo element to hide the Choose file.. area of the input...
#formFile::before {
content: "Pick file";
position: absolute;
z-index: 2;
display: block;
background-color: #eee;
width: 80px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container min-vh-100 py-2">
<div class="row">
<div class="col">
<div class="mb-3">
<input class="form-control" type="file" id="formFile">
</div>
</div>
</div>
</div>
I created an input group with a label, the input, and then appended another label. This way you can style it however you want and put custom text as the input group text. You then hide the input element (display:none or width:0 or something)
Examples:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<p>Label before</p>
<div class='input-group'>
<label class='input-group-prepend'>
<div class='input-group-text form-control' for='file-input-thing'>Pick File</div>
</div>
<input type='file' id='file-input-thing' style='width:0;'>
<label id='file-input-label' class='form-control' for='file-input-thing'/>
</div>
<p>Label after</p>
<div class='input-group'>
<label id='file-input-label' class='form-control' for='file-input-thing'/>
<input type='file' id='file-input-thing' style='width:0;'>
<div class='input-group-append'>
<label class='input-group-text form-control' for='file-input-thing'>
</div>
</div>
You can then assign styling to labels as you see fit. By making both piece labels tied into the input element it allows you to click on either and choose a file.
Further you can add an ID to the blank label and update the value to the name of the file.
let inputElement = document.getElementById('file-input-thing');
let inputLabel= document.getElementById('file-input-label');
inputElement.addEventListener('change', function(e) {
let file = e.target.files[0];
inputLabel.innerHTML = file.name;
})
I'm new to all this so there's probably a better solution, but this worked for me.
This is how I have implemented it,
just copy-paste it to your code and you'll see the results
<Button onClick={() => document.getElementById('imageFileSelect').click()}>Choose Image</Button>
<input className="form-control d-none" id='imageFileSelect' type="file" onChange={imageSelected}></input>
I am working on a requirement where the input group contains two text-boxes separated by input-group-addon. The problem I am facing is I am not able to set the width of the text-boxes using bootstrap css. The first text-box should be wider than the second text-box.
JSFiddle: https://jsfiddle.net/Vimalan/5eqdkveb/3/
Current:
The textbox before and after delimiter are of same size.
Expected:
The textbox after delimiter should be small. I am more interested in a solution which uses bootstrap css and not custom css.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Approval Number</label>
<div class="col-xs-9">
<div class="input-group">
<input type="text" class="form-control input-sm" id="ApprovalNumberTextBox" />
<span class="input-group-addon">Delimiter</span>
<input type="text" class="form-control input-sm" id="ApprovalNumberDelimiterTextBox" />
</div>
</div>
</div>
</div>
I don't get why you are not able to set text-boxes width?!
You can simply add css rule to the input you want and set its width, like
<style>
#ApprovalNumberDelimiterTextBox {
width:40%;
}
</style>
and it is working Here or there is another problem I don't get?
How do you separate a <label> from its <input> in separate <div>s but still have them linked?
I have an input and a label, and they are in the same div, and the functionality works. If I move the input to a sibling div (sibling in the context of bootstrap), the toggle functionality doesn't work:
<div ng-repeat="uniqJokeType in uniqJokeTypes">
<div class="row">
<div class="col-md-7 col-md-offset-1">
<div class="type-filter-button" ng-class="jokeCssClasses(uniqJokeType)" ng-click="jokeTypeClick(uniqJokeType)">
<label ng-bind="uniqJokeType"></label>
<input type="checkbox" ng-model="uniqJokeType" class="js-switch" ui-switch checked />
</div>
</div>
<div class="col-md-3">
<!-- I want to move the <input> here, but it does not work when placed here -->
</div>
</div>
</div>
Also, is this more of an HTML context issue, or an angular (maybe scoping?) issue?
Just add a for attribute on the label and an id on your input :
<label ng-bind="uniqJokeType" for="myInput"></label>
<input type="checkbox" ng-model="uniqJokeType" class="js-switch" ui-switch checked id="myInput" />
I have this code:
<div class="well">
<form role="form" id="shop-order" method="post" action="">
<div class="row">
<div class="form-group">
<div class="col-md-3">
<div class="pull-right">
<label for="name">Label</label>
</div>
</div>
<div class="col-md-6">
<select class="form-control" name="clientId">
$options
</select>
</div>
</div>
</div>
// possibly other rows...
</div>
The result of this code is on this image:
I don't get how I can center label and input in a row. I want them on one line: middle of label opposite middle of input.
How I can do this? Or probably I my html is wrong and this can be achieved by correct html?
I am looking for bootstrap method, I understand, that it can be achieved by line-height. I will do it by line-height if I wouldn't find bootstrap solution. So I am looking for bootstrap solution.
JSFiddle demo
Bootstrap provides a Horizontal Forms style that seems like what you're looking for: http://getbootstrap.com/css/#forms-horizontal
Working Fiddle: http://jsfiddle.net/Nv9Q5/1/
Code:
<div class="well">
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">ФИО Клиента</label>
<div class="col-sm-10 col-md-10">
<select class="form-control" name="clientId">
<option>one</option>
</select>
</div>
</div>
</form>
</div>
Set the css line-height of the label to match the height of the input. You'll have to play around to find the right value.
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
Input elements are already inline level element. If you add text-align:center to the parent div it will automatically float to the center.
EDITS
If you want to center it vertically, you need to add one more div wrapping the input box
<div class="vertically_center">
<input type="text">
</div>
CSS
.vertically_center {
display: table-cell;
height: 200px;
vertical-align: center;
}
I'm using Bootstrap for the first time, and am having a lot of trouble aligning this form-horizontal to the left.
The list items are horizontal, as they should be, but I want the control-labels (the Bootstrap class for form labels) to all be at the same position floated left.
The form is contained in a div with a span of 7, as my site is two columns -- 7 and 4 columns.
Below is my HTML. If you look under "Horizontal Forms" on this page http://accounts.tao.tw.shuttle.com/examples_bootstrap/basecss/forms, you'll see that the labels are left aligned, but not absolutely left-aligned so that the beginning of the labels are at the same position vertically.
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputSaving">What are you saving for?</label>
<div class="controls">
<input class="span4" type="text" id="inputSaving" placeholder="e.g. Swimming Lessons, Birthday Party, College Fund, etc.">
</div>
</div>
<div class="control-group">
<label class="control-label" for="description">Add a short description</label>
<div class="controls">
<textarea class="span4" rows="4" placeholder="Describe in your own words the saving goal for this piggybank"></textarea>
</div>
</div>
<div class="control-group">
<label class="control-label" for="categoryselect">Choose a Category</label>
<div class="controls">
<select class="span4">
<!-- Add some CSS and JS to make a placeholder value-->
<option value="Kittens">Kittens</option>
<option value="Keyboard Cat">Keyboard Cat</option>
<option value="Twitter Bird">Twitter Bird</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="goal">Your Saving Goal</label>
<div class="controls">
<input type="text" class="span4" id="goal">
</div>
</div>
<button class="btn btn-large btn-primary" type="button">Submit</button>
</form>
Just my two cents. If you are using Bootstrap 3 then I would just add an extra style into your own site's stylesheet which controls the text-left style of the control-label.
If you were to add text-left to the label, by default there is another style which overrides this .form-horizontal .control-label. So if you add:
.form-horizontal .control-label.text-left{
text-align: left;
}
Then the built in text-left style is applied to the label correctly.
If you are saying that your problem is how to left align the form labels, see if this helps:
http://jsfiddle.net/panchroma/8gYPQ/
Try changing the text-align left / right in the CSS
.form-horizontal .control-label{
/* text-align:right; */
text-align:left;
background-color:#ffa;
}
Instead of altering the original bootstrap css class create a new css file that will override the default style.
Make sure you include the new css file after including the bootstrap.css file.
In the new css file do
.form-horizontal .control-label{
text-align:left !important;
}
"pull-left" is what you need, it looks like you are using Bootstrap 2, I am not sure if that is available, consider bootstrap 3, unless ofcourse it is a huge rework! ... for Bootstrap 3 but you need to make sure you have 12 columns in each row as well, otherwise you will have issues.
Just add style="text-align: left" to your label.
text-align:left; did not work for me but by adding display:flex; I was able to get the label to the left.
I was having the exact same problem. I found the issue within bootstrap.min.css. You need to change the label:
label {display:inline-block;} to label {display:block;}