I created a button to upload a file with an icon in order to mask the input text box and have just one button. The problem is that my button takes all the width of the div. I would like the two button are side by side. But, when I modify the .btn-file, the select dialog is broken and so, It doesn't appears.
This is the div :
<div id="mydiv">
A text <br>
An other text
<form id="test">
<span class="btn btn-block btn-file">
<i class="glyphicon glyphicon-export"></i>
<input type="file" name="file" id="exampleInputFile" file-model="customer.file" on-file-change="Submit">
</span>
</form>
<span class="glyphicon glyphicon-envelope"></span>
</div>
This it the CSS :
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
font-size: 100px;
text-align: left;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
cursor: inherit;
display: block;
}
Can you help me to align the two buttons and reduce the size of the upload button ? Thanks.
You just need to make inline to the span that contains file upload button.
I modified your demo here - https://plnkr.co/edit/cYpho3SPeRV4NqqGOuHw?p=preview
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
font-size: 100px;
text-align: left;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
cursor: inherit;
display: block;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div id="mydiv">
A text <br>
An other text
<form id="test">
<span class="btn btn-block btn-file" style="display:inline">
<i class="glyphicon glyphicon-export"></i>
<input type="file" name="file" id="exampleInputFile" file-model="customer.file" on-file-change="Submit">
</span>
<span class="glyphicon glyphicon-envelope"></span>
</form>
</div>
</body>
</html>
You've got the class btn-block on the outer span -- which is making it display in block mode, hence why it's taking up all the width available. Remove that class if you don't want this behaviour.
Related
I have tried 3 different examples of INLINE forms without success. At this point I can only suspect it's something in the CSS file but I can't figure it out. Every attempt has resulted in the same UI as depicted in the image below.
I trying to get the four elements of the form at the top to display inline with placeholders but no labels and be able to assign individual widths for each input.
I'm in the process of expanding my limited experience with CSS and JS so please be explicit.
<html>
<head>
<META charset="utf-8">
<META NAME="viewport" content="width=device-width, initial-scale=1">
<TITLE>OldSchool Lister</TITLE>
<META NAME="Author" CONTENT="Griffin Web Design ®">
<META NAME="Copyright" CONTENT="© 2021 Griffin Web Design">
<META NAME="Description" CONTENT="Old School Lister (Grocery List et al)">
<META NAME="KeyWords" CONTENT="OldSchool, Old School, Lists, Lister, Grocery, Groceries">
<META NAME="Location" CONTENT="http://dangriffin.info/lister/">
<META NAME="Created" CONTENT="07/01/2022">
<LINK rel="icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" rel="noopener" target="_blank" href="grocery.css">
</head>
<BODY BACKGROUND="LegalPad.gif">
<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>
<TR>
<TD WIDTH="75" VALIGN="top">
<IMG SRC="OldSchoolIcon.png" WIDTH="50" HEIGHT="50" ALT="">
</TD>
<TD>
<IMG SRC="OldSchoolBanner.gif" WIDTH="280" HEIGHT="52" ALT=""><BR>
</TD>
</TR>
</TABLE>
<BR>
<main>
<form role="form">
<div class="row">
<div class="form-group col-xs-4">
<input type="text" class="form-control" id="item-input" placeholder="Item">
</div>
<div class="form-group col-xs-2">
<input type="number" class="form-control" id="quantity-input" placeholder="Qty">
</div>
<div class="form-group col-xs-2">
<input type="number" class="form-control" id="uom-input" placeholder="UoM">
</div>
<div class="form-group col-xs-1">
<button type="button" class="btn btn-success btn-add">+</button>
</div>
</form>
<div id="lists">
<ul id="shopping-list"></ul>
<p class="list__label">Cart <span class="quantity" id="bought-num"></span></p>
<ul id="bought-list"></ul>
</div>
</main>
<div class="push"></div>
</div>
<!-- jQuery -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js'></script>
<!-- Lodash JS - MIN finds the minimum value of an array -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js'></script>
<!-- Backbone JS - Listens for changes and renders UL -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js'></script>
<!-- Bootstrap CSS formatting library v3.3.7 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- All of the standard js for this app -->
<SCRIPT SRC="./grocery.js"></SCRIPT>
</body>
</html>
form {
width : inherit;
}
label {
display : inline;
line-height : 1.5em;
}
input { /* All input boxes */
width : inherit;
padding : .25em;
}
.delete,
button {
color : white;
background-color : #FF0000;
}
button { /* ADD button */
border : 5;
padding : .25em;
width : inherit;
margin : 0.75em 0;
}
#bought-list li:before, #shopping-list li:before {
content : "";
display : inline;
background-size : 100%;
height : 0.9em;
width : 1em;
margin-right : 0.3em;
}
.row > div {
display: inline-block;
}
#shopping-list li:before {
background-image: url("./checkmark2.svg");
}
#bought-list li:before {
background-image: url("./checkmark.svg");
}
ul {
list-style: none;
margin: 0 auto;
padding: 0;
}
li {
color: #004A55;
padding: 0.25em;
margin: 0em 0;
position: relative;
transition: background-color 0.2s;
}
.quantity {
color: #004A55; /* All numbers */
}
.quantity:before { /* All numbers */
content: "(";
}
.quantity:after { /* All numbers */
content: ")";
}
.delete {
float: right;
padding: inherit;
position: absolute;
right: 0;
top: 0;
}
.delete:after {
clear: both;
}
#bought-list li {
background-color: #F6F6F6;
}
#bought-list li .quantity {
color: #666666;
}
.list__label {
border-bottom: 2px solid #ff0303;
font-size: 1em;
color: #004A55;
padding: 0;
}
There is also a .js file I can post if you feel it necessary.
Original post output
Output after suggested changes
As mentioned in the comments you need to use display: inline-block
Since I don't see the css for "form-group col-xs-4" and others I added the display to all the divs in the .row class.
form {
width : inherit;
}
label {
display : inline;
line-height : 1.5em;
}
input { /* All input boxes */
width : inherit;
padding : .25em;
}
.delete,
button {
color : white;
background-color : #FF0000;
}
button { /* ADD button */
border : 5;
padding : .25em;
width : inherit;
margin : 0.75em 0;
}
#bought-list li:before,
#shopping-list li:before {
content : "";
display : inline-block;
background-size : 100%;
height : 0.9em;
width : 1em;
margin-right : 0.3em;
}
.row > div {
display: inline-block;
}
<form role="form" class="form-inline">
<div class="row">
<div class="form-group col-xs-4">
<label>Item</label>
<input type="text" class="form-control" id="item-input" placeholder="Item">
</div>
<div class="form-group col-xs-2">
<label>Qty</label>
<input type="number" class="form-control" id="quantity-input" placeholder="Qty">
</div>
<div class="form-group col-xs-2">
<label>UoM</label>
<input type="number" class="form-control" id="uom-input" placeholder="UoM">
</div>
<div class="form-group col-xs-1">
<button type="button" class="btn btn-success btn-add">+</button>
</div>
</form>
I want to hide the browse button for users to upload a file. How do I do it?
.fa-cloud-upload {
position: absolute;
top: 5%;
}
<label class="file_upload">
<input type="file" name="uploads" accept="image/*, video/*"/><i class="fa fa-cloud-upload" aria-hidden="true" style="font-size: 85px;"></i>
</label>
You can just hide the input and use label to open the file see the example bellow:
<label for="myInputFile">
<img src="https://cdn1.iconfinder.com/data/icons/hawcons/32/699329-icon-57-document-download-128.png">
<input type="file" name="myInputFile" id="myInputFile" style="display:none;" />
</label>
You can just hide the input and trigger it when user clicks the icon:
Click the image to select file
<br>
<img src="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-9/256/open-file-icon.png" width="50" height="50" onclick="document.getElementById('mycustomid').click();" style="cursor: pointer;">
<input type="file" id="mycustomid" style="visibility: hidden;" />
Simpy add display: none; to hide the input element.
input {
display: none;
}
Just hide your file input field.
label input[ type="file" ] {
display: none;
}
<label>
<input type="file" />
<span>Icon</span>
</label>
Hide the input with display:none
.fa-cloud-upload {
position: absolute;
top: 5%;
}
.file_upload input[type="file"]{display:none}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<label class="file_upload">
<input type="file" name="uploads" accept="image/*, video/*"/>
<i class="fa fa-cloud-upload" aria-hidden="true" style="font-size: 25px;"></i>
</label>
You can do something like this. Your Font-Awesome icon should appears where you try it in your environnement. :
.file_upload {
position: relative;
overflow: hidden;
display: inline-block;
}
.btn {
border: 0px solid gray;
color: blue;
background-color: white;
padding: 8px 20px;
border-radius: 8px;
font-size: 20px;
font-weight: bold;
}
.file_upload input[type=file] {
font-size: 100px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
<div class="file_upload">
<button class="btn"><i class="fa fa-cloud-upload" aria-hidden="true" style="font-size: 15px;">X</i></button>
<input type="file" name="uploads" accept="image/*, video/*"/>
</div>
.fa-cloud-upload {
position: absolute;
top: 5%;
}
<label class="file_upload">
<input type="file" name="uploads" accept="image/*, video/*"/><i class="fa fa-cloud-upload" aria-hidden="true" style="font-size: 85px;"></i>
</label>
Hi I just want to ask what's wrong with my program. Im doing this program where I have to choose a file. But the button is an image and I would like to add a tooltip that this image is for selecting a file. This block of codes is perfectly working in chrome. But when I run it in IE11 the title "Select File"is not showing in IE11. I didn't know that IE has a lot of restriction. Unlike in chrome.
.image-upload>input {
visibility: hidden;
width: 0px;
height: 0px;
margin: -10%;
}
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 250px;
img {
width: 90px;
height: 50px;
}
.caption {
display: block;
color: white;
}
div.space {
margin-top: -15px;
}
<div class="image-upload">
<label for="file-input">
<p align="left"><font face="Arial" color="black" size = "5"><b>   Select File    </b><span style="cursor:pointer" alt="Select File" title="Select File">
<img src="http://icons.veryicon.com/ico/Folder/Black%20glamour/Files.ico" style="pointer-events: none" id="img" title="Select File"/></span></font></p></label>
</label>
<input id="file-input" type="file" name="file" onchange="onFileSelected(event)" onclick=getName() required>
</div>
You need to remove the inline style of pointer-events:none from the image tag if you want to be able to hover it.
By setting it to none, it means your mouse can't interact with the element and therefore it cannot hover it to show the title.
Try this:
<img src="http://icons.veryicon.com/ico/Folder/Black%20glamour/Files.ico" id="img" title="Select File"/>
Example fiddle showing with and without pointer events
More information about pointer events
Also please note the following errors with your code:
the font tag is obsolete and should not be used - use css instead
  should have a semi colon after it:
there is an extra end label and I don't think you are allowed p tags inside - use a validator to check your code
<div class="image-upload">
<p align="left"><label for="file-input"><b> Select File </b>
</label></p>
<span style="cursor:pointer; display:inline-block;" alt="Select File" title="Select File"><label for="file-input"><img src="http://icons.veryicon.com/ico/Folder/Black%20glamour/Files.ico" id="img" title="Select File"/>
</label></span>
<input id="file-input" type="file" name="file" onchange="onFileSelected(event)" onclick=getName() required>
</div>
you could add another span ( for example ), give it position absolute, and on hover on the image, show it .
you can also you javascript ( jquery ) to show it in the same position your cursor is, but that's a bit more complicated.
See below if this is what you want
.title {
transition: 0.3s ease-out;
opacity: 0;
position: absolute;
top: 50%;
left: 0%;
transform: translateY(-50%);
font-size: 15px;
background: #fff;
}
.wrapper {
display: inline-block;
position: relative;
}
.wrapper:hover .title {
opacity: 1;
}
<div class="image-upload">
<label for="file-input">
<p align="left"><font face="Arial" color="black" size="5"><b>   Select File    </b> <span class="wrapper" style="cursor:pointer" alt="Select File" title="Select File">
<span class="title">Select File</span>
<img src="http://icons.veryicon.com/ico/Folder/Black%20glamour/Files.ico" style="pointer-events: none" id="img" title="Select File"/></span></font></p>
</label>
</label>
<input id="file-input" type="file" name="file" onchange="onFileSelected(event)" onclick=getName() required>
</div>
I have an input[type=text] element and another div for selected elements in my form.
I need to create my own custom tag plugin container and my problem is in css style and layout for the tag container and appearance for it.
This is my actual stage (very poor): http://jsfiddle.net/db8upk61/1/
I want something like it:
challenges
how to simulate an input border between these elements?
how to remove border from input element like the example above?
how to mantain tags in the same line as input?
There are a lot of plugins that makes that, but, as you need to do.
You can create a container simulating an input and inside this container you can put the real input with border white, I made an example, take a look:
http://jsfiddle.net/93n2af0e/
CSS code:
.input-select-tag{
background-color: #FFFFFF;
boder: 1px solid #F1F1F1;
height: 36px;
width: 450px;
}
.selected-tags{
padding: 2px;
}
.button{
float: left;
padding: 5px;
margin-left: 2px;
}
.input{
float: left;
border: #FFFFFF;
margin-left: 2px;
padding: 5px;
}
.clear{
clear: both;
}
HTML:
<form class='form-horizontal well'>
<div class='control-group'>
<div class='input-select-tag'>
<div class='selected-tags'>
<span class='alert button alert-info'>tag1 <a href="javascript:;" title='remove' >x</a></span>
<span class='alert button alert-info'>tag2 <a href="javascript:;" title='remove' >x</a></span>
</div>
<input type='text' name='selectTags' class='input' size="40"/>
<div class='clear'></div>
</div>
</div>
</form>
Hope it helps.
var i = 7;
$("input").focus(function(e) {
// set cursor position
if (!this.value.length) {
this.value = $.map(Array(i * $(".alert").length), function() {
return " "
}).join(" ")
}
}).change(function(e) {
// append new "tag"
$(".alert").first().clone().text(function(i, text) {
return text.replace(/tag1/, e.target.value)
}).appendTo($(".alert").parent());
$(this).val("").focus()
}).closest("form").submit(function(e) {
e.preventDefault()
})
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<form class='form-horizontal well'>
<div class='control-group'>
<div class='selected-tags'> <span class='alert alert-info'>tag1 <a href="javascript:;" title='remove' >x</a></span> <span class='alert alert-info'>tag2 <a href="javascript:;" title='remove' >x</a></span>
</div>
<label>Tags</label>
<br>
<input type='text' name='selectTags' />
</div>
</form>
<style>
.control-group {
position: relative;
}
.alert {
position: relative;
top: 47px;
font-size: 12px;
padding: 2px;
margin: 2px;
}
input {
white-space: pre;
width: 100%;
}
</style>
jsfiddle http://jsfiddle.net/db8upk61/2/
What I'm trying to do is place a static piece of text at the end of a input field. Not a placeholder, the idea is to have something like "#gmail.com" at the end of an input element field using HTML and CSS. My question is how could this be accomplished? I got the idea from the bootstrap validation states icons.
For example the input field would look like..
I hope this makes sense.. If you have any questions feel free to ask.
This text should stay static as the user types, which is what seperates it from a input field.
Here's some code that I have:
<form id="loginForm">
<fieldset>
<legend>Login</legend>
<div class="form-group">
<input id="usernameField" class="loginField form-control" name="username" type="text" placeholder="john.doe" required>
</div>
<br>
<div class="form-group">
<input id="passwordField" class="loginField form-control" name="password" type="password" placeholder="password" required>
</div>
<br>
<span class="visible-lg">
<button class="btn btn-danger loginBtn"><i class="fa fa-signin"></i> Login <i class="fa fa-spinner icon-spin icon-white loginSpinner"></i></button>
</span>
<span class="hidden-lg">
<button class="btn btn-danger loginBtn btn-large"><i class="fa fa-signin"></i> Login <i class="fa fa-spinner icon-spin icon-white loginSpinner"></i></button>
</span>
<br>
</fieldset>
</form>
My css:
.loginSpinner{
display: none !important;
}
#badLogin{
display: none;
}
#badRequest{
display: none;
}
#createAccountForm{
display: none;
}
.createSpinner{
display: none !important;
}
#forgotPassword{
display: none;
color: red;
}
#usernameField:before{
content:"#gmail.com";
background-color:yellow;
color:red;
font-weight:bold;
}
JSFiddle: http://jsfiddle.net/UMBRd/
Here's some stuff to get you going, essentially you'll need to wrap the input in a div and adjust it's width to be the same as the input's (I did this by floating the div, but there are other ways). This will give you a coordinate system to place a pseudo-element in with your desired text.
HTML
<div class="input-container">
<input type="text"/>
</div>
CSS
.input-container {
position: relative;
float: left;
}
.input-container:after {
position: absolute;
right: 0;
top: 0;
content: '#gmail.com';
}
See this fiddle.
Note, the pure CSS way with pseudo-elements won't work as discussed in this post.
The only thing I can think of would be to use absolute and relative positioning to overlay the input on top of the span. It's not perfect and I had to play around with the line-height a bit, but this might be enough to get you started:
HTML
<div>
<span>#gmail.com</span>
<input type="text" />
</div>
CSS
div {
position: relative;
}
span {
display: inline-block;
width: 200px;
position: relative;
line-height:95px;
text-align:right;
}
input {
position: absolute;
left: 10px;
top: 35px;
background-color: transparent;
width:200px;
height: 20px;
}
http://jsfiddle.net/pemep/