** How to bring browse button inside text-box?
I have tried many solutions but I could not find.
Thanks-in-advance**
I had the same problem as you, if I understand it correctly.
You may want to use a javascript function to do so, or check the Mickael McGrady's solution :
http://www.quirksmode.org/dom/inputfile.html
Indeed, the display of your button/text-box depends on the version of your browser, so you may want to implement a relative button. On my website I did it in javascript which is more elegant, but if you prefer in html only :
<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<input />
<img src="search.gif" />
</div>
</div>
and css :
div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<input />
<img src="search.gif" />
</div>
</div>
(everything is detailled on the website since it's a well-known issue). Hope it helps.
Related
I'm using bootstrap 4 input-group and appending or pretending my inputs with add-ons as labels.
For the inputs its looking good. Now I need a multi-line add-on or label for text area.
I'm looking for best possible solution in Bootstrap or CSS.
Here is the code I'm trying.
<style>
.h-unset {
height: unset !important;
}
.multiline-label {
display: inline-block;
word-wrap: break-word;
word-break: break-word;
width: 100%;
}
</style>
<div class="input-group input-group-sm mb-3 row mx-0">
<div class="input-group-prepend col-md-3 px-0">
<label for="naastVastgoedbeleg-ging"
class="input-group-text w-100 rounded-0 multiline-label h-unset"
id="label-naastVastgoedbeleg-ging">
<strong>Werkzaamheden naast vastgoedbeleg-ging (bijv. loondienst of onderneming)</strong>
</label>
</div>
<textarea id="naastVastgoedbeleg-ging"
class="form-control rounded-0 col-md-9 h-unset"
aria-label="naastVastgoedbeleg-ging"
aria-describedby="label-naastVastgoedbeleg-ging">
</textarea>
</div>
Thankx for helping Happy Coding!
It worked by using this css
.multiline-label strong {
white-space: pre-wrap;
}
I'm using ng2-file-upload (single upload example) and I want to use: ng2FileSelect with a button or a div instead of a file input. How can I do this?
I want this to do something like this:
<button ng2FileSelect [uploader]="uploader">Choose file</button>
Instead of:
<input type="file" ng2FileSelect [uploader]="uploader" />
If does not exist a clean way using ng2-file-upload, do you know an alternative?
One possible solution is to leverage Angular 2's template variables, and to assign a template variable to the input element; once done, you can directly invoke methods defined on that input from another element, such as a button.
I did the following in one of my applications; it works on IE11, Firefox, and Chrome:
<button (click)="fileInput.click()" class="btn btn-default">Upload</button>
<span style="visibility: hidden; position: absolute; overflow: hidden; width: 0px; height:0px;border:none;margin:0; padding:0">
<input type="file" #fileInput ng2FileSelect [uploader]="uploader" />
</span>
So as you can see, the button is simply calling the #fileInput's click event within its own click event.
Note that I'm burying the input within a span, and then hiding the span from view via a bunch of styles, such that only the button is visible. Also note that applying these styles to the input element directly seemed to cause problems in IE11.
Yon can wrap input[file] element with label element and hide it. See this answer and this example
Here's the code.
HTML:
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Custom Upload
</label>
<input id="file-upload" type="file"/>
CSS:
input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
In a simple way, you can do it with label, you just have to hide the input.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<label class="btn custom-input-btn">
<input type="file" name="photo" style="display:none" accept="*" multiple>
<i class="fa fa-cloud-upload"></i> Upload Files
</label>
<input type="submit" class="form-control">
I want to add the form-control class only when the screensize is xs. Right now form-control gets added in all screensizes. How can I make it so that form-control class only gets added when screen size is xs?
You could use two different inputs like so:
<input type="submit" class="form-control hidden-lg hidden-md hidden-sm">
<input type="submit" class="hidden-xs">
This will hide the form-control when its anything but xs.
You can use #media
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
For example, to do hide sidebar id tagged div when size screen is less than 768:
#media (here is some true value...)
#media (max-width: 768px) {
#sidebar {
display: none;
}
}
jQuery is another way to do this by adding/removing the class based on the window width. See Docs.
*See working example at Full Screen, then re-size to view the change.
function checkWidth(init) {
if ($(window).width() < 480) {
$('input').addClass('form-control');
} else {
if (!init) {
$('input').removeClass('form-control');
}
}
}
$(document).ready(function() {
checkWidth(true);
$(window).resize(function() {
checkWidth(false);
});
});
body,
html {
padding-top: 40px;
padding-bottom: 40px;
}
#loginForm {
max-width: 500px;
padding: 15px;
margin: 0 auto;
background: #ddd;
}
#media (max-width: 480px) {
#loginForm {
background-color: red;
color: white;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form id="loginForm">
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" placeholder="Email address" />
</div>
<div class="form-group">
<label for="pw">Password</label>
<input type="password" id="pw" name="pw" placeholder="Password" />
</div>
<div class="form-group">
<input type="submit">
</div>
</form>
</div>
<!-- /container -->
Responsive text alignment has been added in Bootstrap V4:
https://v4-alpha.getbootstrap.com/utilities/typography/#text-alignment
For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
Copied.
You should use both .xs and .form-control classes together as below:
.form-control.xs {/*Write your declerations.*/}
I have some problem guys.
I have to delete the content of my with .html() jquery function. All worked fine, but the footer of my iphone phonegap app go to upper. But when I comment or erase the content of my directly in my html code, all is ok, the footer of my app stay in his place. Please help me.
Here is my code snippets:
<script id="div_mainheader" type="text/html">
<div id="check_place">
<div id="idcheckin" style="width: 210px; position: relative;" align="left" class="mystatus2 clickable" onclick='showPartnersNearYouPopUp();'>
<div id="leave" style="top: 81px;"><img src="graphics/picker.png" style="margin-left: 5px; margin-top: 5px; margin-bottom: -1px;">
CHECK A PLACE ...
</div>
</div>
<div id="idbtleave" style="position: absolute; top: 81px; left: 270px;">
<button id="btleave" class="checkout-button" type="button">{{Localize.quit}}</button>
</div>
</div>
</script>
And this is the function that I call to erase the content of my :
$('#check_place').html('');
I've also tried document.getElementById('check_place').innerrHTML = ''; but it's the same thing with .html()
Please help me. Thanks a lot.
Use
$('#check_place').empty();
How do achieve the following:
┌────────────────────parent────────────────────┐
│ label [text-box ] [button] │
│ paragraph │
└──────────────────────────────────────────────┘
label is aligned to the left
button is aligned to the right
text-box occupies all remaining width within parent
paragraph is aligned to the left, must be left-aligned with label too
Both label and button should obey font properties defined elsewhere as maximum as possible. parent is center-aligned within window, and, naturally, can have arbitrary width.
Please advise.
Updated [Oct 2016]: Flexbox version...
form {
display: flex;
}
form input[type="text"] {
flex: 1;
}
<form>
<label>Name</label>
<input type="text" />
<button>Submit</button>
</form>
<p>Lorem ipsum...</p>
Original answer [Apr 2011]: Table-less CSS version (of table behavior)...
<div id="parent">
<div id="inner">
<label>Name</label>
<span><input id="text" type="text" /></span>
<input id="submit" type="button" value="Submit" />
</div>
<p>some paragraph text</p>
</div>
CSS...
#inner {
display: table;
width: 100%;
}
label {
display: table-cell;
}
span {
display: table-cell;
width: 100%;
padding: 0px 10px;
}
#text {
width: 100%;
}
#submit {
display: table-cell;
}
Demo: http://jsfiddle.net/wdm954/626B2/4/
I don't like first answer with the "table-less" version that actually uses table-cell. Nor the second answer that uses actual tables. Nor third answer that uses hardcoded widths. Here is solution using flex. It is by far simplest:
#parent {
display: flex;
}
input {
flex: 1;
}
<div id="parent">
<label>Name</label>
<input type="text" />
<button>Button</button>
</div>
<div>paragraph</div>
Use tables. :D I know people tend to hate tables, but they will work in this situation...
<div id="parent">
<table style="width:100%">
<tr>
<td>label</td>
<td style="width:100%">
<input type="text" style="width:100%">
</td>
<td>
<button>clickme</button>
</td>
</tr>
</table>
</div>
The only way I know how to achieve this or similar, is to have the "text-box" as a block element that would automatically fill the entire width of the parent, then apply padding to the left and right equal to the total width of the containers on the left and right. Then make the "label" and "button" elements have their position set as relative and float them to where they need to be (float: left, float: right).
Something like,
HTML:
<div id="parent">
<div id="label">label</div>
<div id="button">button</div>
<div id="text-box">
text<br />
text<br />
text<br />
text<br />
text
</div>
</div>
CSS:
div#label
{
position: relative;
float: left;
width: 200px;
background: #F00;
}
div#button
{
position: relative;
float: right;
width: 120px;
background: #0F0;
}
div#text-box
{
padding-left: 200px;
padding-right: 120px;
background: #00F;
}
If the button and label elements don't need to have a set width, all elements could just have their width as a percentage value (all adding up to 100%).
Don't forget, you can use calc(). Let's assume total of width used by label and button is 100px (including margin), then the width is:
.text-box {
width: calc(100% - 100px);
}
If you think it doesn't support a lot of browser, well you are wrong indeed. It supports a lot now. Time has changed
It works without flex and tables if assign float: right and put the button (or several buttons in reverse order) before the input box.
Then place the label with float: left, give the input box 100% width and wrap it inside a span with display: block and overflow: hidden.
No magic involved:
<div style="width:100%">
<button style="float:right">clickme 2</button>
<button style="float:right">clickme 1</button>
<label style="float:left">label</label>
<span style="display:block;overflow:hidden">
<input type="text" style="width:100%"/>
</span>
</div>
The basic idea that all right side buttons are specified before the input box in the reverse order.