i have a question, how can i put a bootstrap progress bar into a form control? I'm trying to do a password strength indicator with a progress bar, but when i put the progressbar into the form control it always shows as full, even though the value of the bar is 0%;
Screenshot
Code(html):
<div class="input-group">
<span class="input-group-addon"><span class="fa fa-lock fa-fw"></span></span>
<input id="pass" type="password" name="password" data-toggle="tooltip" data-placement="top" class="form-control" placeholder="Password">
<div class="progress-bar form-control">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
</div>
</div>
It's quite simple: you don't put a .progress-bar inside a .form-control.
You need to pay more attention to Bootstrap markup. (Or to the CSS behind it.)
First of all, you shouldn't put anything else inside .input-groups, other than one single <input> with the class of .form-control and .input-group-addons before or after the input.
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">#</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
If you want to place a progress bar, again, you need to pay attention to the Bootstrap markup. You have wrap it in a .progress wrapper:
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
You could combine the two and keep them together by wrapping them in a .form-group. So your initial markup should be replaced by:
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><span class="fa fa-lock fa-fw"></span></span>
<input id="pass" type="password" name="password" data-toggle="tooltip" data-placement="top" class="form-control" placeholder="Password">
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
<span class="sr-only">Password security 0%</span>
</div>
</div>
</div>
Related
I have a problem with my div element wchich contains label, input and button for opening datepicker popup. Button wchich open this one is a little below the input. I'd like to have all elements in one line. I use bootstrap for that. Below is show my HTML code:
<div class="row">
<div class="col-md-3">
<p class="input-group">
<label for="usr">Date From:</label>
<input type="text" class="form-control" uib-datepicker-popup ng-model="dt1" is-open="datepickers.dt" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, 'dt')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="col-md-3">
<p class="input-group">
<label for="usr">Date To:</label>
<input type="text" class="form-control" uib-datepicker-popup ng-model="dt2" is-open="datepickers.dtSecond" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, 'dtSecond')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
Could someone help me with that? I would be greatful for helping
Best regards ;)
By making use of Bootstrap's .form-group wrapper you can achieve the results you desire:
<div class="form-group">
<label for="usr" class="control-label">Date From:</label>
<div class="input-group">
<input type="text" class="form-control" uib-datepicker-popup ng-model="dt1" is-open="datepickers.dt" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<div class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, 'dt')"><i class="glyphicon glyphicon-calendar"></i></button>
</div>
</div>
</div>
You can read more about .form-group and a variety of other form-related helper-classes on Bootstrap's documentation page: http://getbootstrap.com/css/#forms
I have a login page. Its fixed now, but I want to enable scroll when I focus on any of one text box. How to do it?
<ion-view>
<ion-content class="background">
<div class="loginscreen">
<div class="row">
<div class="col-80 col-offset-10">
<div class="appheader-frame">
<span>
<img src="img/clock.png" alt="clock" class="clockwidth"></img>
</span>
<h1 class="timesheettext">
<b>Timesheet Tracking</b>
</h1>
</div>
</div>
</div>
<div class="row">
<div class=" formpadding col-80 col-offset-10">
<form novalidate name="loginForm" ng-submit="doLogin(loginForm)">
<label class="item item-input labelusername">
<i class="icon placeholder-icon"><img src="img/user.png" alt="" style="width:20px;height:20px;"/></i>
<input name="UserName" type="text" ng-model="User.UserName" placeholder="Username or Email" ng-focus="hidefooter()" required>
</label>
<p ng-show="loginForm.UserName.$error.required && loginSubmitted" class="usernameerror">
Please provide username
</p>
<label class="item item-input labelpassword">
<i class="icon placeholder-icon"><img src="img/password.png" alt="" style="width:20px;height:20px;"/></i>
<input type="password" name="password" id="password" ng-model="User.Password" placeholder="Password" ng-focus="hidefooter()" required>
</label>
<p ng-show="loginForm.password.$error.required && loginSubmitted" class="usernameerror">
provide Password
</p>
<p ng-show="myflag">
wrong credentials
</p>
<button class="button button-block button-lightgreen" type="submit">
<p class="login">
<b>submit</b>
</p>
</button>
</form>
</div>
</div>
</div>
<div class="bar bar-footer bar-inherit myfooter hide-on-keyboard-open">
<div class="title">
<p id="footer" class="byxyz" ng-show=footerflag>By xyz Software Pvt Ltd</p>
</div>
</div>
</ion-content>
</ion-view>
Is that possible in ionic framework? Then how to do it? Please explain.And don't remove anything in the page and don't add anymore details to make it scroll.I simply want to enable scroll in it but the page should be same as it is right now
simply added overflow-scroll="false" in ion-content.
<ion-content class="background" overflow-scroll="false" >
//code
</ion-content>
<div class="form-inline">
<div class="form-group has-feedback">
<label for="id_first_name">First Name</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input class="form-control" id="id_first_name" name="first_name" type="text" />
</div>
</div>
<div class="form-group has-feedback">
<label for="id_last_name">Last Name</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input class="form-control" id="id_last_name" name="last_name" type="text" />
</div>
</div>
</div>
I get a output similar to this: http://i.stack.imgur.com/YKvOY.png
But I want the labels above the fields.
I googled and I see a lot of people have the same problem but exactly the opposite. They have the labels above the fields and want them in the same line. However I tried their code, still not working.
I've created this fiddle demonstrating this using what you provided. form-group should do the trick.
I need two horizontal checkboxes in one page:
<div data-role="content">
<div data-role="fieldcontain" data-controltype="checkboxes">
<fieldset data-role="controlgroup" data-type="horizontal" id="buddies">
<legend>Hobbies (separates by ',')</legend>
</fieldset>
</div>
<div id="language" data-role="fieldcontain" data-controltype="checkboxes">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Languages (ordered by native, second lang...)</legend>
<input id="eng" type="checkbox">
<label for="eng">English</label>
<input id="zho" type="checkbox">
<label for="zho">国语</label>
<input id="jpn" type="checkbox">
<label for="jpn">日本語</label>
</fieldset>
</div>
<div class="ui-grid-a">
<div class="ui-block-a">
<a data-role="button" id="revert">Revert</a>
</div>
<div class="ui-block-b">
<input value="Update" type="submit">
</div>
</div>
</div>
One image is more than a thousand words. As you see, two checkboxes' totally messed up:
Old fashion table tag works!!!
I want to put 2 forms in a well one next to other. I use twitter-boostrap.
This is my code
<div class="well">
<h3>
Title
</h3>
<form method="post" class="form-horizontal">
<div class="control-group">
<label class="control-label" for="select01">Label1: </label>
<select class="input-mini" id="select01">
(my options)
</select>
</div>
<div class="control-group">
<label class="control-label" for="input01">Label2: </label>
<input class="input-mini" id="input01">
</div>
<div class="control-group">
<label class="control-label" for="select02">Label3: </label>
<select class="input-mini" id="select02">
(myoptions)
</select>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
<form method="post" class="form-horizontal">
<div class="control-group">
<label class="control-label" for="input02">Label3: </label>
<input class="input-mini" id="input02">
</div>
<div class="control-group">
<label class="control-label" for="input03">Label4: </label>
<input class="input-mini" id="input03">
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
If I include the forms in divs and add a style with float:left, then my well brake and put my forms out of it. I tried span, divs, form inside a form, but I cannot find a way to put one form next to other without break the well.
Try wrapping your forms in a div to isolate that content from the well:
http://jsfiddle.net/SAdM8/6
<div class="well">
<div style="overflow: hidden;">
... forms ...
</div>
</div>
Like Billy Moat said, you could simply add the overflow property to the well. I prefer to keep Bootstrap elements in their natural state to avoid inadvertent breakage. Either works.