I'm having a problem with my form. The browse button in the file input can't be seen as a whole. Here is the screenshot:
And my code:
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-image fa-fw"></i> Photo List </h3>
</div>
<div class="panel-body">
<form action="upload-photo.php" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="file">Upload Photo</label>
<input class="form-control" type="file" id="file" name="files[]" multiple="multiple" accept="image/*" />
<p class="help-block">Example block-level help text here.</p>
</div>
<button type="submit" name="uploadp_btn" class="btn btn-primary">Upload!</button>
</form> <hr />
</div>
</div>
Am I missing something? Thank you.
Add the following CSS to your style sheet:
.form-control{
height: auto;
}
http://www.bootply.com/NMVB2TeaK2
Tested that one in Chrome and Firefox, seems to be working!
I think you need to use class name 'filestyle' instead of 'form-control'
<input class="filestyle" type="file" id="file" name="files[]"
multiple="multiple" accept="image/*" />
Related
I'm facing a problem I don't really know how to deal with.
I'm working on BootStrap 3 and i'm trying to make some inline forms because it is more user-friendly than a full vertical form (I don't want to scroll for ever)
I find some way to inline the normal inputs, but when it comes to the input with icons (font awesome), I can figure how to inline them, but they inline side to side without any space between them.
Also, I don't figure out how to change their width as I would do with normal input (col-sm-4 for example).
I would like the "Email" and "Telephone" to be scaped and to change their width
Please have a look at my code and the following image explaining it:
http://www.bootply.com/T8w3oRE3Sn
You were missing few things in the form group so I have wrapped things up. Hope it will help you :)
Below is the working snippet:
.myform .form-inline .input-group .input-group-addon{ width:20px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row myform">
<div class="col-xs-12">
<form name="myform" role="form" novalidate>
<div class="form-inline ">
<div class="form-group col-xs-6">
<div class="input-group col-xs-12">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input type="email" class="form-control" placeholder="Email de l'interlocuteur">
</div>
</div>
<div class="form-group col-xs-6">
<div class="input-group col-xs-12">
<span class="input-group-addon"><i class="fa fa-phone"></i></span>
<input type="email" class="form-control" placeholder="Téléphone de l'interlocuteur">
</div>
</div>
</div>
</form>
</div>
</div>
Try this
IF you see it in large screen it will be inline.
You have to use form-inline class to make form inline.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<form class="form-inline">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
You just need to deal with good understanding of bootstrap grid system
<div class="form-group row">
<label for="inputEmail3" class="col-sm-1 control-label">Interlocuteur</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="inputEmail3">
</div>
<label for="inputEmail5" class="col-sm-1 control-label">Poste</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="inputEmail5" placeholder="DeInterlocuteur">
</div>
I cannot seem to make the search button and input box be aligned on the same line...currently the textbox is above the search button...any tips?
<!-- Search Bar -->
<div class="headline headline-md"><h2>Search</h2></div>
<div class="input-group margin-bottom-40">
<form method="get" action="#Url.ArticulateSearchUrl(Model)">
<input type="text" name="term" class="form-control" placeholder="Search">
<span class="input-group-btn"><button type="submit" class="btn-u"><i class="fa fa-search"></i></button></span>
</form>
</div>
<!-- End Search Bar -->
The problem is that the <div>s the <h2> and the <form> are display:block and fill the width of their container
You can convert your HTML to
<div class="headline headline-md"><h2>Search</h2></div>
<form method="get" action="#Url.ArticulateSearchUrl(Model)">
<input type="text" name="term" class="form-control" placeholder="Search">
<span class="input-group-btn"><button type="submit" class="btn-u"><i class="fa fa-search"></i></button></span>
</form>
and add this CSS
.headline-md,h2,form{
display:inline-block;
}
.headline-md{
width:80px;
margin-right:15px;
}
I added !important to force the new CSS rules. I added a code snippet to demonstrate the code.
.headline-md,h2,form{
display:inline-block !important;
}
.headline-md{
width:80px !important;
margin-right:15px !important;
}
<div class="headline headline-md"><h2>Search</h2></div>
<form method="get" action="#Url.ArticulateSearchUrl(Model)">
<input type="text" name="term" class="form-control" placeholder="Search">
<span class="input-group-btn"><button type="submit" class="btn-u"><i class="fa fa-search"></i></button></span>
</form>
I figured it out. This did the trick:
<!-- Search Bar -->
<div class="headline headline-md"><h2>Search</h2></div>
<div class="input-group margin-bottom-40">
<form class="input-group" method="get" action="#Url.ArticulateSearchUrl(Model)">
<div class="input-group-btn">
<input type="text" name="term" class="form-control" placeholder="Search">
<span><button type="submit" class="btn-u"><i class="fa fa-search"></i></button></span>
</div>
</form>
</div>
<!-- End Search Bar -->
I am trying to get the Bootstrap datepicker working under a tab and it seems like some issues with it using with ng-required attribute. It is not updating the model value. Seems like a bug but not sure. If you take out ng-required attribute everything would work just fine.
Any help would be helpful.
plunker: http://plnkr.co/edit/NFcm0Bpu0y45LsrzVtpr?p=preview
$scope.data = {
opened: false,
record:
{
"Date of Birth": "2005-10-29T00:00:00"
}
<form name="mainForm" novalidate>
<div class="container" ng-form="subForm">
<tabset>
<tab>
<div class="row">
<div class="col-sm-3">
<div class="form-group" ng-class="{'has-error': subForm['test'].$invalid}">
<label class="control-label">Date of Birth</label>
<p class="input-group">
<input type="text" name="test" class="form-control" datepicker-popup="dd-MMM-yyyy" ng-model="data.record['Date of Birth']" is-open="data.opened" datepicker-options="dateOptions" close-text="Close" ng-required="true" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-disabled="false" ng-click="openDate($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</div>
</tab>
</tabset>
</div>
</form>
It is working with Angular 1.2.16. The problem is when using with Angualar 1.3.0. Logged an issue with Angualr-ui.
I have some bootstrap 3.0 based markup that produces an inline form like this:
The code for this is:
<div class="container">
<form class="form-inline" role="form" id="gh_save">
<div class="form-group">
<input type="text" placeholder="Github username" class="form-control" id="gh_user">
</div>
<div class="form-group">
<div class="col-lg-6">
<input type="text" placeholder="API Key" class="form-control" id="gh_apikey">
</div>
</div>
<button type="submit" class="btn btn-success"> Save </button>
</form>
I am trying to increase the width of the second box (API Key) to be twice what it is now, but no matter what I change the width of the div holding the second input is changing the width. Can someone show me how this done?
when I manually set the width of the second INPUT, I get this:
<form class="form-horizontal">
<div class="form-group">
<div class="col-xs-4">
<input type="text" placeholder="Github username" class="form-control" id="gh_user"/>
</div>
<div class="col-xs-6">
<input type="text" placeholder="API Key" class="form-control" id="gh_apikey" />
</div>
<div class="col-xs-2">
<button type="submit" class="btn btn-success"> Save </button>
</div>
</div>
</form>
DEMO
PS : close input tags as <input class="" />
Final edit here, I guess external bootstrap 3.1.1 was not getting included thus you got the result in 3 different lines, take a look at this
Final Demo
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container">
<form class="form-inline" role="form" id="gh_save">
<div class="form-group">
<div class="col-xs-4">
<input type="text" placeholder="Github username" class="form-control" id="gh_user"/>
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<input type="text" placeholder="API Key" class="form-control" id="gh_apikey"/>
</div>
</div>
<div class="form-group">
<div class="col-xs-2">
<button type="submit" class="btn btn-success"> Save </button>
</div>
</div>
</form>
</div>
You should be able to target your ID within your css and set your desired width like so:
#gh_apikey{width:400px;}
completely frustrated here with something that is probably so simple. I have a form and want the Zip and Zip+4 fields to be on the same line. For some reason nothing is lining up the way I've done it. I've spent the last 6 hours searching the web and trying various things (this latest was from this site) and nothing works. Can someone help me please? Thanks!
Here is my code:
<form>
<div style="float:left;">
<label for "StrAddress">Street Address *</label>
<input name="StrAddress" type="text" style="width:200px" id="StrAddress" />
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "StrSecondaryAddress">Suite, P.O. Box, Apt, Lot</label>
<input name="StrSecondaryAddress" type="text" style="width:200px" id="StrSecondaryAddress" />
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "StrCity">City *</label>
<input name="StrCity" type="text" class="autosuggestinput" style="width:200px" id="StrCity" />
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "subject">State</label>
<input type="text" class="input_text" name="subject" id="subject"/>
</div>
<div style="clear:both;"> </div>
<div style="display: inline;;">
<label for "IntZip5">Zip *</label>
<input name="IntZip5" type="text" style="width:100px" id="IntZip5" />
<label for "IntZip4">Zip+4</label>
<input type="text" name="IntZip4" id="IntZip4" style="width:50px">
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "IntAmount">Taxable Amount</label>
<input type="text" name="IntAmount" id="IntAmount" style="width:150px">
</div>
<div style="clear:both;"> </div>
<input type="button" class="button" value="Submit Form" />
</form>
Would this do the job for you? Please test it on multiple browsers
because it's only tested on FF 3.6, IE 7+
While the structure police are sure to pull me over for this, it is my considered opinion that using a table is the single most reliable way to line up elements in all browsers. Set the vertical-align:top and do what you need to do.
You can do something along this lines:
<html>
<head>
<style type="text/css">
* { padding: 0; margin: 0;} /* do not use universal selector this is just for example */
label {
width: 300px !important;/* added important to override your inline styles*/
display: block !important;
text-align: right !important;
float: left;
}
</style>
</head>
<body>
<form>
<div style="float:left;">
<label for "StrAddress">Street Address *</label>
<input name="StrAddress" type="text" style="width:200px" id="StrAddress" />
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "StrSecondaryAddress">Suite, P.O. Box, Apt, Lot</label>
<input name="StrSecondaryAddress" type="text" style="width:200px" id="StrSecondaryAddress" />
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "StrCity">City *</label>
<input name="StrCity" type="text" class="autosuggestinput" style="width:200px" id="StrCity" />
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "subject">State</label>
<input type="text" class="input_text" name="subject" id="subject"/>
</div>
<div style="clear:both;"> </div>
<div style="display: inline;;">
<label for "IntZip5">Zip *</label>
<input name="IntZip5" type="text" style="width:100px" id="IntZip5" />
<label for "IntZip4">Zip+4</label>
<input type="text" name="IntZip4" id="IntZip4" style="width:50px">
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "IntAmount">Taxable Amount</label>
<input type="text" name="IntAmount" id="IntAmount" style="width:150px">
</div>
<div style="clear:both;"> </div>
<input type="button" class="button" value="Submit Form" />
</form>
</body>
</html>
The code you posted shows zip and zip+4 on the same line for me in Firefox, Chrome, and IE. Can you post a screen shot of how you see it differently and how you want it to look?