I am currently editing my login page and I found that my bootstrap icon is not align as username.It supposed to be center but now it is slightly up in the username box field. how to edit to be center.
Secondly, how to set if the first time reload to the page, the icon not displayed until I start to type username.
<h3 class="form-title">Login to your account</h3>
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
</div>
<div class="form-group has-feedback" ng-class="loginForm.username.$valid ? 'has-success' : 'has-error';">
<label class="control-label" for="username">Username</label>
<input type="text" class="form-control" id="username" name="username"
ng-model="input.username" required>
<span class="glyphicon form-control-feedback"
ng-class="loginForm.username.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
</div>
my login page
for (I am currently editing my login page and I found that my bootstrap icon is not align as username.It supposed to be center but now it is slightly up in the username box field. how to edit to be center.)
you can set it just by padding-top or padding-bottom
for (Secondly, how to set if the first time reload to the page, the icon not displayed until I start to type username.)
you have to add JavaScript for Input on focus add css opacity 1. and by default add css opacity 0. refer below code.
CSS - .your-container-class .glyphicon { opacity: 0;}
JS - $("#username").focusin(function() {
$("#username").siblings(".glyphicon").css( "opacity", "1" );
});
You can use css to adjust element alignments (in this case the icons) by adjusting it's margin using:
.your-container-class .glyphicon {
margin-top: 15px;
}
Be sure to wrap your form to a div with a class or id to avoid all glyphicon being styled throughout your application :-)
Related
I have been using the timepicker and trying to customize the popup for which I might need to add a class to the popup . I tried using "popupClassName" but i don't see that class name getting added to the popup.
Kindly let me know how can i add a class to the timepicker popup .
It does work as documented. See https://codepen.io/JesperWe/pen/RVOwOV which adds a class and some CSS to give the popup a red shadow.
<TimePicker defaultValue={moment()} popupClassName="foobar"/>
result:
<div class="ant-time-picker-panel foobar ant-time-picker-panel-column-3 ant-time-picker-panel-placement-bottomLeft"
style="left: 24px; top: 63.7778px;">
<div class="ant-time-picker-panel-inner">
<div class="ant-time-picker-panel-input-wrap">
<input class="ant-time-picker-panel-input" value="02:32:41" placeholder="Select time"><a
class="ant-time-picker-panel-clear-btn" role="button" title="clear"></a>
</div>
<div class="ant-time-picker-panel-combobox">
<div class="ant-time-picker-panel-select">
<ul>...</ul>
</div>
<div class="ant-time-picker-panel-select">
<ul>...</ul>
</div>
</div>
</div>
</div>
I've been tinkering around a bit with AngularJS and the Ionic framework. Now I would like to display 12 buttons inside a popup. I have this all working, but I would like the buttons to switch appearance when they got pressed.
html
<label>
<p>Fill in catergory name</p>
<input type="text" placeholder="Rent">
</label>
<br />
<br />
<div class="row">
<div class="col col-25"><button class="button button-outline" id="button12in" ng-class="button12 ? 'button12in' : 'button12inpress'" ng-click="button12 = !button12">
</div>
</div>
As you can see I've been trying with button 12.
app.js
$scope.button12 = false;
css
#button12in {background-color: #51FF00;}
#button12inpress{border-style: solid; border-color: black; border-width: 4px;background-color: #51FF00;}
So the idea is that clicking on the button will change the state of $scope.button12. The result of this would be that via the ng-class the button will change style! but for some reason, this is not possible. It picks up the changed state of button12 but the ng-class isn't working in all kinds of syntax I've tried
I think it should be
ng-class="{'class': trueOrFalse}"
To apply different classes when different expressions evaluate to true:
<div ng-class="{class1 : expression1, class2 : expression2}">
Hello World!
</div>
To apply multiple classes when an expression holds true:
<!-- notice expression1 used twice -->
<div ng-class="{class1 : expression1, class2 : expression1}">
Hello World!
</div>
or quite simply:
<div ng-class="{'class1 class2' : expression1}">
Hello World!
</div>
Notice the single quotes surrounding css classes.
or check this Adding multiple class using ng-class
Don't use your flag directly on $scope , but rather try setting the flag on an object on $scope
Example
Use $scope.flagContainer.button12 instead of $scope.button12
$scope.flagContainer = {
button12 : false
}
Now change it view accordingly
I want to hide only clear button from datepicker directive in angular js.
Currently there are three buttons at the bottom of the angular js datePicker directive(Today, clear and Close), Is there any way to make visibility of these buttons configurable, such that i can hide one of the buttons out of it.
The Date picker which i am using is using ui-bootstrap library.
Currently there is now way to hide individual buttons in the datepicker button bar via options on the directive. You can override the template and remove the clear button, but that is a global patch and doesn't offer hiding/showing based on a condition. You could create a class that targets the button you want to hide as this plunk
.datepicker-noclear [ng-click="select(null)"] {
display: none;
}
demonstrates although that is a fragile workaround.
I would suggest submitting a feature request to add the option of which buttons are available in the button bar.
Easy, replace the template:
<script type="text/ng-template" id="template/datepicker/popup.html">
<ul class="dropdown-menu" ng-if="isOpen" style="display: block" ng-style="{top: position.top+'px', left: position.left+'px'}" ng-keydown="keydown($event)" ng-click="$event.stopPropagation()">
<li ng-transclude></li>
<li ng-if="showButtonBar" style="padding:10px 9px 2px">
<span class="btn-group pull-left">
<button type="button" class="btn btn-sm btn-info" ng-click="select('today')" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
</span>
<button type="button" class="btn btn-sm btn-success pull-right" ng-click="close()">{{ getText('close') }}</button>
</li>
</ul>
</script>
You hack with css. It worked for me.
.ui-datepicker .btn-group .btn-danger.btn{
display: none;
}
Further to Rob J's solution, if we add a ng-class={"require": "vm.required"} to the parent div of the datepicker input, or simply add a class called require to the div. Then use the magic css to hide or show the clear button depending on the value of vm.required:
.require button[ng-click^="select(null)"] {
display: none;
}
if you want to remove the clear button, it means that the field is required, and as I do not agree with forcing things (like creating a div parent and typing classes), then just set the element for which you active the datepicker as required
[uib-datepicker-popup][required] + [uib-datepicker-popup-wrap] button[ng-click*="select(null"] {
display: none;
}
<input type="text" ng-model="datePicker.date" uib-datepicker-popup="dd MMM yyyy" readonly is-open="datePicker.opened" ng-click="datePicker.opened = true" required />
You can do this css trick to hide the clear button :
.uib-button-bar > .btn-group > .btn-danger {
display: none !important;
}
You can hide it by adding to style.css this :
.uib-clear {
display: none;
}
I am creating a form where the user can configure a recurring event, so there are a large number of controls. At the top is a checkbox to enable/disable the schedule.
How can I disable, but not hide, the entire section based on the checkbox? If it is checked, the user should be able to make modifications to the schedule. If it is not checked, no changes should be allowed.
I'm fairly certain I can use the ng-disabled directive on each control, but I'd like to set some attribute/class on the entire container, rather than on each individual control.
I am using Bootstrap 3, so if there is a class that would provide this functionality, that would be an acceptable solution as well.
Here is the relevant section of the HTML:
<input type="checkbox" ng-model="status" title="Enable/Disable Schedule" /> <b>Schedule the task to run:</b>
<div class="row"> <!-- need a way to disable this row based on the checkbox -->
<span>Every <input type="number" ng-model="interval" />
<select ng-model="frequency"
ng-options="freq as freq.name for freq in frequencies"></select>
</span>
<div>
On these days:
</div>
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button"
class="btn"
ng-model="day.value"
ng-repeat="day in days">{{day.name}}</button>
</div>
</div>
I have tried:
<div class="row" ng-disabled="!status">
It didn't work, and based on the docs, it doesn't look like it is even supposed to, as its intended use is for disabling form controls. I also tried without the !, just to validate that it wouldn't work either.
OK, I found a technique that works for my purposes...
<div class="row" ng-class="{disabled: !status}"> <!-- added ng-class here -->
and
.disabled {
z-index: 1000;
background-color: lightgrey;
opacity: 0.6;
pointer-events: none;
}
This prevents clicks on the page and gives a nice visual indication of the section being "disabled".
It does not prevent me from tabbing through the controls, but it works OK for my purposes.
<form id="user-login" method="post" action="/SignIn">
<div>
<div id="edit-name-wrapper" class="form-item">
<label for="emailAddress">Email Address: <span title="This field is required." class="form-required">*</span></label>
<%=Html.TextBox("emailAddress", null, new { #class="form-text required", tabindex = 1, size = 60, maxlength = 60 }) %>
<%=Html.ValidationMessage("emailAddress") %>
<div class="clear"></div>
</div>
<div id="edit-pass-wrapper" class="form-item">
<label for="password">Password: <span title="This field is required." class="form-required">*</span></label>
<%=Html.Password("password", null, new { #class="form-text required", tabindex = 2, size = 60, maxlength = 60 }) %>
<%=Html.ValidationMessage("password") %>
<div class="clear"></div>
</div>
<input type="image" src="/content/images/submit-B-btn.png" class="form-submit" tabindex="3" id="edit-submit" value="Log in" name="submit">
<a class="forgot-password-link" href="/ForgottenPassword"><strong>Forgotten your password? >> </strong></a>
</div> </form>
...renders the two-field form exactly as expected in IE8 (plus chrome,ff...). In particular you can click in either input box and the focus goes to it. In IE7 however, this is not the case - mouse clicking within either input field does nothing.
Does anyone know how to get the input focus to work for IE7/6..?
UPDATE - this is definately a CSS issue, as when I turned off CSS from Developer Tools, it worked in IE7. So the Q now is, how do I change the code to target different .css files (i.e. a specific one for IE6/7, & another for everything else)?
There is no reason why input focus would not work in itself. A plausible reason would be that you have placed an element on top of the field, so that you can't reach it by clicking.
You can set a background color on elements that you suspect might cover the field, to see exactly how large they really are in different browsers.
In my case, removing the following CSS solved the problem:
.clear { clear: both; }
.clearLeft { clear: left; }
.clearRight { clear: right; }
.clear,
.clearLeft,
.clearRight
{ height: 0; }