<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; }
Related
Hello I want my tooltip to appears whenever input[submit] is disabled. Disabling input works very well it is disabled when inputs[text] are invalid but tooltips doesn't shows.
Here is my code:
<input type="submit"
form="loginData"
ng-disabled="loginData.login.$invalid || loginData.password.$invalid"
class="btn btn-primary btn-md"
ng-click="$ctrl.login()"
value="Zaloguj"
uib-tooltip="Wypełnij formularz!"
tooltip-placement="top"
tooltip-trigger="'mouseenter'"
tooltip-append-to-body="true"
tooltip-enable="loginData.login.$invalid || loginData.password.$invalid" />
tooltip-enable directive should make tooltip enabled when input login or password are invalid but it doesn't work, please quick help!
EDIT:
I was working with google chrome so I didn't realize that this solution actually works in others browsers (mozilla for sure). But still it doesn't work with newest google chrome so it is not satisfactory enough.
Summarizing the new question is how to walk around that issue in google chrome?
HTML elements with disabled attribute do not fire events.
But don't worry, you can use a simple div/span with uib-tooltip directive as wrapper of the disabled input/button.
In your case you want to show the tooltip only when is disabed, so try the following... (PLUNKER)
HTML
<span uib-tooltip="Demo tooltip"
tooltip-enable="isBtnDisabled"
ng-class="{'my-tooltip': isDisabled}">
<input type="submit" ng-disabled="isDisabled" class="btn btn-info" value="My btn">
</span>
CSS
.my-tooltip {
display: inline-block;
}
.my-tooltip input {
position: relative;
z-index: -1;
}
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 :-)
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 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.
My client would like to have a split button list, but instead of an image, have a checkbox. That way, the user can check/uncheck an item, or touch the right-arrow to get more info.
The problem is:
The default styles will set the width of the element to 100% of the
parent container.
Q: How can I incorporate a checkbox into a split button list?
This works fairly well:
<div class="ui-grid-a">
<div class="ui-block-a">
<input checked type="checkbox" name="CollID" id="CollID217" class="custom">
<label for="CollID217">xxx</label>
</div>
<div class="ui-block-b">
Details
</div>
</div>
And then style it with:
.ui-grid-a .ui-block-a { width: 85% }
.ui-grid-a .ui-block-b { width: 15%; }
.ui-grid-a .ui-block-b a {
float:right;
}