Having a difficult time forcing this icon to be at the right of the input rather than dropping below. Have changed col number, put in div, etc.. But nothing. Here is how it looks now:
My code for this is (sample doesn't show closing form tag):
<form class="pptReg" role="form" name="pptReg" novalidate>
<h1 style="padding-top: 60px; color: #ab2328;">Participant Information</h1>
<div class="form-group col-md-3 naviaInp" style="padding-top: 30px;">
<label for="empCode">Employer Code</label>
<input type="text" name="empCode" class="form-control" id="empCode" data-ng-model="pptregistration.coCode" ng-required="true" maxlength="3" autofocus ng-blur="getEmpIdType(true);">
<a class="questionIcon" href="#"><i class="fa fa-question-circle col-md-2 fa-2x" style="float: right;"></i></a>
<div ng-show="(pptReg.$submitted || pptReg.empCode.$touched) && pptReg.empCode.$error.required">
<p class="claimError"><i class="fa fa-exclamation-circle"></i><span>This is a required field.</span></p>
</div>
<div ng-show="(pptReg.$submitted || pptReg.empCode.$touched) && empIdType == ''">
<p class="claimError"><i class="fa fa-exclamation-circle"></i><span>The Employer Code is invalid.</span></p>
</div>
</div>
It is simply a font awesome icon I am trying to add to the right of the input there. Am using Bootstrap 3 for layout.
Ideas or suggestions (I have come through many in my own head!)?
Thanks much.
First you need to restrict the width of the input so that there's enough space next to it for the icon. Then you need to set the input and icon to display:inline-block; also, remove the col-md-2 class from the icon as it is unnecessary. Finally, add vertical-align:middle; to the icon so that it's vertically aligned with the input.
HTML:
<form class="pptReg" role="form" name="pptReg" novalidate="">
<h1 style="padding-top: 60px; color: #ab2328;">Participant Information</h1>
<div class="form-group col-md-3 naviaInp" style="padding-top: 30px;">
<label for="empCode">Employer Code</label>
<input type="text" name="empCode" class="form-control" id="empCode" data-ng-model="pptregistration.coCode" ng-required="true" maxlength="3" autofocus="" ng-blur="getEmpIdType(true);">
<a class="questionIcon" href="#"><i class="fa fa-question-circle col-md-2 fa-2x"></i></a>
<div ng-show="(pptReg.$submitted || pptReg.empCode.$touched) && pptReg.empCode.$error.required">
<p class="claimError"><i class="fa fa-exclamation-circle"></i><span>This is a required field.</span></p>
</div>
<div ng-show="(pptReg.$submitted || pptReg.empCode.$touched) && empIdType == ''">
<p class="claimError"><i class="fa fa-exclamation-circle"></i><span>The Employer Code is invalid.</span></p>
</div>
</div>
</form>
CSS:
.form-control {
display:inline-block;
width:90%;
}
a.questionIcon {
display:inline-block;
vertical-align:middle;
}
Bootply
Add display: inline; as follow to question mark:
<a class="questionIcon" href="#"><i class="fa fa-question-circle col-md-2 fa-2x" style="float: right; display:inline;"></i></a>
The class .form-control makes the empCode input as a block element. You'll need to add styling to the input to allow for other elements to reside on the same line as it (ie float:left; display:inline-block;).
Related
I am using primeNG and i have made an inputgroup with it. This input field should be moved to the center and i know that i should use text-align: center on the envelopping container for this. However when i do this the inputgroup still won't move to the right, i really don't know what is causing this. This is my code:
css
.middle {
text-align: center;
}
html
<div class="middle ui-inputgroup">
<input type="text" size="5" pInputText placeholder="Value">
<span class="ui-inputgroup-addon"><code>cm</code></span>
</div>
The ui-inputgroup is a native class of primeNG, more info here: https://www.primefaces.org/primeng/#/inputgroup
Can anyone tell what is going on?
EDIT: Your code is causing the button below the input to float next to the input instead of centering the button. This is your code implemented plus the html code of the button:
<div class="ui-g-12 ui-md-4 test">
<div class="middle ui-inputgroup">
<input type="text" size="5" pInputText placeholder="Value">
<span class="ui-inputgroup-addon"><code>cm</code></span>
</div>
</div>
<button mat-raised-button id="newFilter" (click)="showDialog()">Add new filter</button>
</div>
it looks like this:
text-align of middle is already center,
<div class="ui-g-12 ui-md-4 test">
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon">
<i class="fa fa-user"></i>
</span>
<input pinputtext="" placeholder="Username"
type="text" class="ui-inputtext ui-corner-all ui-state-default ui-widget">
</div>
</div>
style:
.ui-g-12.ui-md-4.test {
margin: 0 auto;
}
input.ui-inputtext.ui-corner-all.ui-state-default.ui-widget {
text-align: center;
}
update:
<div class="ui-g-12 ui-md-6 test" style="margin: 0 auto;">
<div class="middle ui-inputgroup" style="display: inline-flex;">
<input type="text" size="5" pinputtext="" placeholder="Value">
<span class="ui-inputgroup-addon"><code>cm</code></span>
</div>
<button id="newFilter">Add new filter</button>
</div>
I am creating a login, and want to add a container to another container. One container is light blue and the other one is dark blue. This is a screen shot of what it currently looks like
I want to be able to have the dark blue container the full width of the other container, and the height to be bigger than what it currently is. This is the structure of the html below:
<div class="container">
<a href="../index.html">
<img id="logologin" src="../img/logo1.png" alt="logo"/>
</a>
<div class="card card-container">
<?php if(isset($smsg)){ ?><div class="alert alert-success" role="alert"> <?php echo $smsg; ?> </div><?php } ?>
<?php if(isset($fmsg)){ ?><div class="alert alert-danger" role="alert"> <?php echo $fmsg; ?> </div><?php } ?>
<p id="profile-name" class="profile-name-card"></p>
<form class="form-signin" method="POST">
<span id="reauth-email" class="reauth-email"></span>
<label> <input type="text" name="username" id="username" class="form-control" placeholder="Username"></label>
<label><input type="password" name="password" id="password" class="form-control" placeholder="Password" required></label>
<div id="remember" class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block btn-signin" type="submit" name="submit">Sign in</button>
<div class="link"> <a href="register4.php"> Forgot Password?
</a></div>
</form><!-- /form -->
<div class="forgot-password">
Don't have an account? <a href="register4.php"> Create an account
</a>
</div><!-- /forgot-password -->
</div><!-- /card-container -->
</div><!-- /container -->
This is the css I have for the dark blue container I am trying to build
.forgot-password {
color: #848585;
font-size:14px;
background-color: #5967b9;
}
Thanks for any help in advance - js fiddle containing all code https://jsfiddle.net/68t0t1jt/
You can bypass the card-container padding, that is the class with padding that is making impossible to inside elements to have the full width with this:
.card-container{
padding: 0 !important;
}
then you can add the padding or margin to the form element, to make it's contents back to the center:
<form class="form-signin" method="POST" style="padding: 40px 40px;">
and then you use this forgot-password class:
.forgot-password {
color: #848585;
font-size:14px;
background-color: #5967b9;
width: 100%;
//height: 75px --if you want to change height, just uncomment
}
very basic fiddle: https://jsfiddle.net/6L84ycr4/
Hope it helps you
Here is the updated fiddle : jsfiddle.net/68t0t1jt/1
As described in the comments, you just have to remove the padding from .card-container.card and reapply it to .form-signin
You Can Try:
<div class="container" style="height: inherit;" >
or height:100%
I have two rows in a well, each containing a label and a datepicker. I'm telling the labels to stack whenever the form isn't in col-lg-X mode (so, xs, sm, md modes), and to go inline when in col-lg-X mode. And that works, and works great.
Except.
When it stacks at any media size larger than XS (mobile) mode, the labels are right aligned, even though they're stacked. This winds up looking goofy.
The Code:
<div class="row">
<div class="form-group">
<label class="col-xs-12 col-lg-5 control-label"><required-Marker></required-Marker> Start Date:</label>
<div class="col-xs-12 col-lg-7">
<div class="input-group input-group-sm">
<input type="text" id="startDate" name="startDate"
max="0" min="-732" dateformat="mm/dd/yy"
ng-model="vm.startDate"
readonly required jqdatepicker
changeMonth="true" changeYear="true"
style="background-color: white; cursor: default"
class="form-control" />
<label for="startDate" class="input-group-addon clickable" id="btnStartDateIcon">
<i class="fa fa-fw fa-calendar"></i>
</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="col-xs-12 col-lg-5 control-label"><required-Marker></required-Marker> End Date:</label>
<div class="col-xs-12 col-lg-7">
<div class="input-group input-group-sm">
<input type="text" id="endDate" name="endDate"
max="0" min="-732" dateformat="mm/dd/yy"
ng-model="vm.endDate"
readonly required jqdatepicker
changeMonth="true" changeYear="true"
style="background-color: white; cursor: default"
class="form-control" />
<label for="endDate" class="input-group-addon clickable" id="btnEndDateIcon">
<i class="fa fa-fw fa-calendar"></i>
</label>
</div>
</div>
</div>
</div>
Examples of good and bad:
Large Screen Width (good!):
Mobile Screen Width (great!):
Medium Screen Width (like iPad in Landscape, 1024 wide) (BAD!):
So, what I need to know is: How can I control WHEN the control-label does the switcheroo from right align to left align? CAN I even control that? And control it responsively. (I was thinking something like 'control-label-lg' with right-align, and 'control-label-md' and below with left-align.)
I think you have to write some css to override the default bootstrap css in your custom css file for responsive. Try to use your parent class.
#media (max-width: 1024px) {
.your-parent-class .form-horizontal .control-label {
text-align: left;
}
}
So my validation is working the way it should with the exception of the buttons. I want them grayed out with opacity until all is valid and not sure if I have the ng-class set correctly and/or the ng-disabled set correctly or both.
The issue here is more per functionality. I have some fields that show when other fields dropdowns are selected to a particular item. For instance, "Age" is only shown is a particular option is selected whereas with all the other options, it does not show. I show my HTML and then my CSS below.
Yes, is a lengthy form, but hoping you all can help!
My form:
<form class="addClaim" name="claimForm" novalidate ng-submit="saveClaim(claimInfo)" data-ng-model="claimInfo">
<div class="form-group col-md-6 naviaInp">
<label for="beneSelect">Select your benefit</label>
<select class="form-control" name="beneSelect" id="beneSelect" ng-model="benefit" ng-options="item.descr for item in claim" required>
<option value="">Please select a benefit....</option>
</select>
<input type="hidden" ng-model="claimInfo.benefitId" ng-change="{{ claimInfo.benefitId = benefit.id }}"/>
</div>
<div ng-show="claimForm.beneSelect.$dirty && claimForm.beneSelect.$error.required" class="errorContainer">
<p class="claimError"><i class="fa fa-exclamation-circle"></i><span>this is a required field</span></p>
</div>
<div class="form-group col-md-8 naviaInp" ng-show="benefit.askSecIns == true" >
<label for="secInc">Do you have secondary insurance</label>
<div>
<label class="radio-inline"><input type="radio" name="optradioSecIns" data-ng-model="claimInfo.isSecIns" value="true">yes</label>
<label class="radio-inline"><input type="radio" name="optradioSecIns" data-ng-model="claimInfo.isSecIns" value="false">no</label>
</div>
</div>
<div class="checkbox form-group col-md-8 naviaInp" ng-show="benefit.askResidual == true">
<p>If you have a Health Care FSA, any residual amount not covered by the HRA will automatically be entered into the FSA. If you do not wish to have the residual amount entered into your Health Care FSA, please indicate </p>
<label><input type="checkbox" name="residualAmount" data-ng-value="true" ng-model="claimInfo.isNoResId">
<p>No, please do not enter residual amounts into my Health Care FSA</p>
</label>
</div>
<div class="form-group col-md-6 naviaInp" ng-show="benefit.expenseTypes != null">
<label for="beneTypeSelect">Select type of service</label>
<select class="form-control" name="expenseType" id="beneServiceSelect" ng-model="expense" ng-options="item.descr for item in benefit.expenseTypes" required>
<option value="">Please select a service....</option>
</select>
<input type="hidden" ng-model="claimInfo.expenseTypeId" ng-change="{{ claimInfo.expenseTypeId = expense.id }}" />
</div>
<div ng-show="claimForm.expenseType.$dirty && claimForm.expenseType.$error.required" class="errorContainer">
<p class="claimError"><i class="fa fa-exclamation-circle"></i><span>this is a required field</span></p>
</div>
<div class="form-group naviaInp">
<label for="start">Date of Service</label>
<div>
<input type="text" class="form-control" name="startDate" id="start" placeholder="--/--/----" data-ng-model="claimInfo.fromDate" style="width: 200px;" required>
<span style="padding-left: 20px; padding-right: 20px;">To</span>
<input type="text" class="form-control" id="end" placeholder="--/--/---- (optional)" data-ng-model="claimInfo.toDate" style="width: 200px;">
</div>
</div>
<div ng-show="claimForm.startDate.$dirty && claimForm.startDate.$error.required" class="errorContainer">
<p class="claimError"><i class="fa fa-exclamation-circle"></i><span>this is a required field</span></p>
</div>
<div class="form-group col-md-6 naviaInp">
<label for="providerName">Provider Name</label>
<input type="text" name="providerName" class="form-control " id="providerName" ng-maxlength="100" data-ng-model="claimInfo.provider" required>
</div>
<div ng-show="claimForm.providerName.$dirty && claimForm.providerName.$error.required" style="clear: both; margin-top: 8px;">
<p class="claimError" style="color: #ab2328;"><i class="fa fa-exclamation-circle"></i><span style="padding-left: 10px; font-size: 14px; margin-bottom:: 25px;">this is a required field</span></p>
</div>
<div ng-show="claimForm.providerName.$dirty && claimForm.providerName.$error.maxlength" class="errorContainer" style="clear: both; margin-top: 8px;">
<p class="claimError" style="color: #ab2328;"><i class="fa fa-exclamation-circle"></i><span style="padding-left: 10px; font-size: 14px; margin-bottom:: 25px;">must be less than 100 characters</span></p>
</div>
<div class="form-group col-md-6 naviaInp" ng-model="claimInfo.depId" ng-show="benefit.dependents != null">
<label for="beneTypeSelect">Select dependant</label>
<select class="form-control" name="depSelect" id="beneDepSelect" ng-model="dependent" ng-options="item.name for item in benefit.dependents" required>
<option value="">Please select a dependant....</option>
</select>
<input type="hidden" ng-model="claimInfo.depId" ng-change="{{ claimInfo.depId = dependent.id }}" required />
</div>
<div ng-show="claimForm.depSelect.$dirty && claimForm.depSelect.$error.required" class="errorContainer">
<p class="claimError"><i class="fa fa-exclamation-circle"></i><span>this is a required field</span></p>
</div>
<div class="form-group col-md-6 naviaInp" name="forWhom" ng-show="benefit.dependents == null">
<label for="forWhom">For Whom</label>
<input type="text" class="form-control" id="forWhom" ng-maxlength="100" data-ng-model="claimInfo.who" required >
</div>
<div ng-show="claimForm.forWhom.$dirty && claimForm.forWhom.$error.required" class="errorContainer">
<p class="claimError"><i class="fa fa-exclamation-circle"></i><span>this is a required field</span></p>
</div>
<div ng-show="claimForm.forWhom.$dirty && claimForm.forWhom.$error.maxlength" class="errorContainer">
<p class="claimError"><i class="fa fa-exclamation-circle"></i><span>a maximum of 100 characters are allowed</span></p>
</div>
<div class="form-group col-md-4 naviaInp" name="age" ng-show="benefit.benefCode == 'DCFSA'">
<label for="age">Age</label>
<input type="text" class="form-control" id="age" data-ng-model="claimInfo.age" ng-maxlength="50" required>
</div>
<div ng-show="claimForm.age.$dirty && claimForm.age.$error.required" class="errorContainer">
<p class="claimError"><i class="fa fa-exclamation-circle"></i><span>this is a required field</span></p>
</div>
<div ng-show="claimForm.age.$dirty && claimForm.age.$error.maxlength" class="errorContainer">
<p class="claimError"><i class="fa fa-exclamation-circle"></i><span>a maximum of 50 characters are allowed</span></p>
</div>
<div class="form-group col-md-4 naviaInp">
<label for="claimAmount">Amount</label>
<input type="number" name="amount" class="form-control" id="claimAmount" data-ng-model="claimInfo.amount" required ng-pattern="/^\d{1,4}(\.\d{0,2})?$/">
</div>
<div ng-show="claimForm.amount.$dirty && claimForm.amount.$error.required" class="errorContainer">
<p class="claimError"><i class="fa fa-exclamation-circle"></i><span>this is a required field</span></p>
</div>
<div ng-show="claimForm.amount.$dirty && claimForm.amount.$error.pattern" class="errorContainer">
<p class="claimError"><i class="fa fa-exclamation-circle"></i><span>the amount must be between $0 and $10,000</span></p>
</div>
<div class="form-group col-md-8 naviaInp">
<label for="claimComment">Comments</label>
<textarea class="form-control" name="comment" rows="5" id="claimComment" placeholder="optional" ng-maxlength="500" data-ng-model="claimInfo.comments">
</textarea>
</div>
<div ng-show="claimForm.comment.$dirty && claimForm.comment.$error.maxlength" class="errorContainer">
<p class="claimError"><i class="fa fa-exclamation-circle"></i><span>a maximum of 500 characters are allowed</span></p>
</div>
<div class="fileArea col-md-8 naviaInp">
<div>
<p>Drag and drop or upload your documentation. Remember, we cannot review your claim without at least one piece of proper documentation for each claimed expense listed above. Be sure your documentation shows the date of service, type of service, and cost of service.</p>
</div>
<div ngf-drop ngf-select ng-model="files" class="drop-box"
ngf-drag-over-class="'dragover'" ngf-multiple="true" ngf-allow-dir="true"
accept="image/*,application/pdf"
ngf-pattern="'image/*,application/pdf'"><p>Drag and drop your documents here or click to search for your documents and upload</p></div>
<div ngf-no-file-drop><p>File Drag/Drop is not supported for this browser</p></div>
<div>
<p>Files:</p>
</div>
<div>
<ul>
<li ng-repeat="f in files" style="font:smaller">{{f.name}} {{f.$error}} {{f.$errorParam}} <a class="deleteHandle" ng-click="deleteFile($index)">×</a> </li>
</ul>
</div>
</div>
<div style="padding-bottom: 150px; clear: both;">
<div class="checkbox col-md-8">
<label><input type="checkbox" value="" ng-model="checked"><p>By checking this box, you agree to Navia's <a class="naviaLink" data-toggle = "modal" data-target = "#tcModal" >Terms and Conditions</a>.</p></label>
</div>
<div class="form-group" style="clear: both;">
<input type="button" class="naviaBtn naviaBlue" ng-show="editMode == true" ng-click="updateClaim(claimInfo)" value="+ update claim" ng-disabled="claimForm.$invalid" ng-class="{'disabled-class': claimForm.$invalid}">
<input type="button" class="naviaBtn naviaBlue" ng-show="editMode == false" ng-click="saveClaim()" value="+ add another claim" ng-disabled="claimForm.$invalid" ng-class="{'disabled-class': claimForm.$invalid}">
<input type="button" class="naviaBtn naviaBlue" ng-disabled="!checked && claimForm.$invalid" ng-show="editMode == false" ng-class="{'disabled-class': !checked}" ng-click="saveAllClaims()" value="submit claim(s)">
</div>
<div>
<input type="button" class="naviaBtn naviaRed" ng-click="cancel()" value="cancel">
</div>
<div data-ng-hide="message == ''" data-ng-class="(savedSuccessfully) ? 'alert alert-success' : 'alert alert-danger'">
{{message}}
</div>
</div>
</form>
I did abbreviate code as much as I thought I could but still show what I am doing.
And my CSS:
.disabled-class {
background-color: #999999;
opacity: .30;
}
.disabled-class:hover {
background-color: #999999;
opacity: .30;
}
input.ng-invalid.ng-dirty {
border: 1px solid red;
}
.errorContainer {
clear: both;
margin-top: 8px;
}
.claimError {
color: #ab2328;
}
.claimError > span {
padding-left: 10px;
font-size: 14px;
margin-bottom:: 25px;
}
.disabled {
background-color: #999999;
opacity: .30;
}
.disabled:hover {
background-color: #999999;
opacity: .30;
}
What should happen here is that the buttons are grayed and disabled until all required fields have input and that the input is within the parameters set.
The angular form has both validity and invalidity properties.
Actually, all angular form elements do, they are nestable and invalidity bubbles up. If an element is invalid, automatically all the ancestors up to the form itself have $invalid == true.
You can call the form by its name in the $scope and the properties are $valid, respectively $invalid.
Here's the relevant code for your form:
<form name="claimForm">
// your form logic here
<button type="submit" ng-disabled="claimForm.$invalid" />
</form>
UPDATE: If your form doesn't behave the way you want, you should debug it:
divide your form into fieldsets, according to the logic of your form
when each of your fieldset are valid, your form is valid
test each fieldset sepparately and add some divs to display the $valid or $invalid value of each fieldset until you sort it out
I also think you are adding an unnecessary level of complexity to your problem by using inline conditional logic at html level. I'd keep it in the controller, where it's a lot easier to follow and structure.
Whenever something doesn't behave the way you expect it to, console.log(it).
One more thing: once dirty, an element will stay $dirty regardless of being or not disabled, unless you call $setPristine() on it. So you should probably try to avoid using $dirty in yoru logic, it might produce unncecessary confusion.
Most times, value.length and/or $valid are enough to make forms work.
I have a Dropdown in my TopBar, built with the Twitter Bootstrap CSS framework.
I have 3 problems with it that I can't find any solution to:
The text and password input fields are far too big, how can I adjust them? Making the dropdown box bigger would be OK too.
The labels for the fields are too dark, how can I lighten them up a bit?
The Dropdown is closing when I click into one of the fields. I have to reopen it and then I can type until clicking in the next field. The values are preserved even when the dropdown is closed. How can I make it stay open?
Here is a screenshot of problems 1 and 2:
Also here is the HTML for the TopBar as it is now.
<div class='topbar-wrapper'>
<div class='topbar'>
<div class='topbar-inner'>
<div class='container'>
<h3>
Webworld
</h3>
<ul class='nav'>
<li>FILLER...</li>
</ul>
<ul class='nav secondary-nav'>
<li class='dropdown' data-dropdown='dropdown'>
Login
<div class='dropdown-menu' id='signin-dropdown'>
<form accept-charset="UTF-8" action="/sessions" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="4L/A2ZMYkhTD3IiNDMTuB/fhPRvyCNGEsaZocUUpw40=" /></div>
<fieldset class='textbox'>
<label id='js-username'>
<span>Username</span>
<input autocomplete="on" id="username" name="username" type="text" />
</label>
<label id='password'>
<span>Passwort</span>
<input id="userpassword" name="userpassword" type="password" />
</label>
</fieldset>
<fieldset class='subchk'>
<input name="commit" type="submit" value="Log In" />
</fieldset>
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
There hidden input is needed by rails and autogenerated.
I've already tried to copy the implementation of the login form that twitter uses, but when I tried that, the TopBar is about 250px in height and the content of the dropdown is open, not closeable.
I have no custom CSS or JavaScript so far, except for the top-padding of 40px in the body as suggested by the bootstrap docs.
Can someone help me with this?
Try adding the code below somewhere in your javascript. It should stop it from happening.
$('.dropdown-menu').find('form').click(function (e) {
e.stopPropagation();
});
(Twitter Bootstrap 2.x)
You may want to move the contents of style="" to your stylesheets...
If user entered wrong password:
add class open to li class="dropdown open"
and class error to fieldset class="control-group error"
<ul class="nav pull-right">
<li class="dropdown">
Login <b class="caret"></b>
<div class="dropdown-menu">
<form action="" id="form_login" style="margin: 0; padding: 3px 15px" accept-charset="utf-8" method="post">
<fieldset class="control-group">
<label for="form_email" class="control-label">Email address</label>
<div class="controls">
<div class="input-prepend" style="white-space: nowrap">
<span class="add-on"><i class="icon-envelope"></i></span>
<input type="email" name="email" id="form_email" autocomplete="on" class="span2">
</div>
</div>
</fieldset>
<fieldset class="control-group">
<label for="form_password" class="control-label">Password</label>
<div class="controls">
<div class="input-prepend" style="white-space: nowrap">
<span class="add-on"><i class="icon-lock"></i></span>
<input type="password" name="password" id="form_password" class="span2">
</div>
</div>
</fieldset>
<label class="checkbox">
<input type="checkbox" name="remember" value="true"> Remember me
</label>
<p class="navbar-text">
<button type="submit" class="btn btn-primary">Login</button>
</p>
</form>
</div>
</li>
</ul>
You don't need any extra css or javascript to make this look nice (with TB2.x)
In case you don't want to stop propagation of your events, or that solution didn't work for you, you can add this code somewhere near initialization of bootstrap-dropdown:
$('html').off('click.dropdown.data-api');
$('html').on('click.dropdown.data-api', function(e) {
if(!$(e.target).parents().is('.dropdown-menu form')) {
$('.dropdown').removeClass('open');
}
});
For your third question - In your bootstrap-dropdown.js comment source code row
$('html').on('click.dropdown.data-api', clearMenus)
and write there this:
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.hasClass("dropdown-menu") &&
!$clicked.parents().hasClass("dropdown-menu")){
clearMenus();
}
});
https://github.com/twitter/bootstrap/blob/master/bootstrap.css#L1559
max-width is set to 220px, remove the attribute and it will stretch itself.
Its looks like a CSS based problem u are facing.
I fixed it with the following styles:
#signin-dropdown {
padding-left: 5px;
padding-right: 5px;
padding-top: 1em;
}
#signin-dropdown form {
margin:0px;
}
#signin-dropdown form .textbox {
margin-bottom:0em;
padding-top:0em;
}
#signin-dropdown form .subchk {
margin-bottom: 5px;
padding-top: 8px;
}
#username, #password, #userpassword {
color: #404040;
float: left;
font-size: 13px;
line-height: 18px;
padding-top: 0px;
text-align: left !important;
width: 140px;
}
About your questions 1 and 2.
Have you tried setting the length of the input? You can do this by setting the "size" attribute of the input tag. You can read more here
Did you try changing the style of the label? For example:
<span style="color:#FFFFFF">Username </span>
you just add your content in <form></form> tag
like this:
<div class="dropdown dropdown-scroll" id="selectedClient">
<button class="btn btn-block btn-lg btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
انتخاب <span class="caret"></span>
</button>
<div class="dropdown-menu " role="menu" aria-labelledby="dropdownMenu1">
<button type="button" class="close">×</button>
<form>
<ul>
<li role="presentation">
<input id="searchSubClientInput" type="text" class="form-control" placeholder="جستجو بر اساس نام خانوادگی" ng-model="query">
</li>
</ul>
</form>
<ul class="select-list scrollable-menu">
<li class="dropdown-header">خودم</li>
</ul>
</div>
</div>