I am trying to make a file upload styling with bootstrap. Following code works good but the problem is that the label Choose file stick with a downline of the input field. How can I make Choose file in the middle of an input field? To get a better idea check picture bellow-
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
<label class="custom-file-label" for="inputGroupFile01">Choose file</label>
</div>
</div>
If you are using Bootstrap 3 try Switching to Bootstrap 4 it works fine.
The CDN link you can include
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
Or you might have used any CSS in the parent class of input field try checking that
Same code you provided gives correct output (i have included above link)
Related
I am building a user form that using form-group and row. I wanted to see what options you guys are using when you want the user to understand that this is an or? The two questions are not require but they just need to under one of the question
<div class="form-group row">
<label for="enteredLink">Enter Link</label>
<input class="form-control" data-val="true" id="txtLink" name="enteredLink" type="text" value="">
</div>
<div class="form-group row">
<label for="enteredFile">Upload File</label>
<input class="form-control" id="txtFile" name="enteredFile" type="text" value="">
</div>
Perhaps something like this could work. There are two inputs for files and text. This makes it obvious that the user needs to pick one or the other.
//optional display uploaded file into text input
function displayUpload() {
var file = document.getElementById("txtFile").value;
document.getElementById("txtLink").value = file;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group mt-5 px-5">
<input class="form-control" data-val="true" id="txtLink" name="enteredLink" type="text" value="" placeholder='Enter link'>
<div class="input-group-append">
<button class="btn btn-secondary rounded-right" type="button" onclick="document.getElementById('txtFile').click();">Or Choose file</button>
<div class="custom-file" hidden>
<input class="form-control" onchange='displayUpload();' id="txtFile" name="enteredFile" type="file" value="">
</div>
</div>
</div>
And as a final note, I noticed that you named your IDs txtFile and txtLink if you would like to limit your file input you could also add accept=".txt" so the user could only upload .txt files.
This may seem a bit simplistic, but have you considered a simple bit of text saying 'or'
<div class="container">
<div class="form-group row">
<label for="enteredLink">Enter Link</label>
<input class="form-control" data-val="true" id="txtLink" name="enteredLink" type="text" value="">
</div>
<div class="row"><p>or</p></div>
<div class="form-group row">
<label for="enteredFile">Upload File</label>
<input class="form-control" id="txtFile" name="enteredFile" type="file" value="">
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
It's not quite the same, but this is what the Gov.UK Design system does for radio button groups that are mutually exclusive - https://design-system.service.gov.uk/components/radios/#radio-items-with-a-text-divider
Edit - To highlight alternative used by SO
When posting this question I realised StackOverflow themselves do something similar to what you want. They essentially use an all in one box with clear calls to action to either drag and drop, browse or paste a link in
Clicking 'paste' sticks the text box on screen for users to paste their link in
It'll slightly depend on who your audience is and how tech savvy they are, and also what people mostly will do as to what option is best.
I am trying to do a manual rendering of Django forms and it generates the code below, is there a way to get rid of the texts that do not have any HTML tags, a good example is the texts "Currently: " and "Change:" it is really difficult to style with CSS.
<div class="row align-center mb-0 text-center">
<div class="col-md-12">
<div class="fuzone mb-2">
<div class="fu-text">
<span><i class="mdi mdi-image-area"></i> Click here or drop files to upload</span>
</div>
Currently:
realtor/download.jpeg
<input type="checkbox" name="image-clear" id="image-clear_id">
<label for="image-clear_id">Clear</label><br>
Change:
<input type="file" name="image" accept="image/*" class="clearablefileinput form-control-file" id="id_image">
</div>
</div>
You are safe to highlight 'Currently:' and 'Change:' and delete them without affecting your code. :)
On the other hand, if you'd like to style them, you can wrap them in divs and assign them css styling by referencing their class names.
Imagine divs like physical boxes that hold content. Very rarely should anything not be in a div.
I want to use 6 input file in one page, in a vue template
I want that user could upload six files in six different inputs. each input is like this:
<div class="form-group">
<label class="form__label font-size--15 font-w--400">
{{$t("تصویر جلو کارت ملی")}}
</label>
<div class="input-group mb-3">
<div class="custom-file ">
<input id="melliCardFront" type="file" class="custom-file-input" #change="processMelliCardFront($event)" />
<label class="custom-file-label" for="melliCardFront">انتخاب فایل</label>
</div>
</div>
<div class="file-listing">
{{ mellicard_front.name }}
<span class="remove-file" v-show="mellicard_front" v-on:click="removeMelliCardFront()">حذف</span>
</div>
</div>
but when I use this, the input files Are arranged from above of page. when I take the opacity of input file to 1, the page is like this
my problem is that when I click on top of the page, it opens an input file. or in some browsers, it opens instead of other input.how can I fix this problem?
Looking the w3Schools Bootstrap's Input Groups examples there are Input Groups Labels that seems that wrap the input box
(here).
Is there any way to do this for checkbox too?
EDIT
The labels have to be inside that grey box attached to the input box (textbox in example case, checkbox in the case i want)
They don't wrap the input field since the closing tag comes right after the opening tag, but you can use label on a checkbox as well as described here in the offical bootsrap docs for forms:
Is it something like this you had in mind?
<div class="container mt-3">
<h2>Checkbox Group Labels</h2>
<form>
<label class="form-check-label" for="exampleCheck1">Check me out</label>
<div class="input-group mb-3">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
</div>
</div>
</form>
</div>
I am trying to update to BootStrap 4 from BootStrap 3 on my localhost.
And I got this result which is from bootstrap 3
Here is a code which I use to link
<link rel="stylesheet" href="css/bootstrap.min.css">
And code for this inline form is here
<form class="form-inline">
<div class="form-group">
<label for="staticEmail2" class="sr-only">Email</label>
<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email#example.com">
</div>
<div class="form-group mx-sm-3">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Confirm identity</button>
</form>
But when I put a test file outside from the project folder and link to same CSS file then at that time it gives me result
Which is expected result
Please help me to solve this problem.
You need to clear your browser cache. If your problem persists, you need to check whether there is any other CSS changing your styles. If there is no such CSS, you need to check whether there is some Javascript overriding your styles. Switch off Javascript in your browser temporally and if the design is better this way, then after you switch Javascript back on, debug your JS code and see when is it changing your styles.