I am using Angular 1.2.16 and testing with IE 11.
In my app, in settings.html, I have the following section:
<section class='scrollable'>
<section class='hbox stretch'>
<aside class="aside-md bg-white b-r" data-ng-controller='RecipientsCtrl'>
<div data-ng-if='inputMode' data-ng-include="'partials/recipient-form.html'"/>
</section>
</section>
where 'scrollable' class is defined as:
.scrollable {
overflow-x: hidden;
overflow-y: auto;
}
and recipient.form:
<div class="panel-body">
<form name='rform' ng-submit='addRecipient(rform)' novalidate='novalidate' role="form">
<label>Recipient's Name</label>
<input type="text" class="form-control" ng-model='recipient.name' name="name" placeholder="Enter name" required='', data-mongoose-error=''/>
....
<button type="submit" class="btn btn-sm btn-success">Add</button>
</form>
</div>
A button click puts the controller in 'inputMode'. This works fine with Chrome, Safari and Firefox. In IE, when you click the button to get into the 'inputMode' it seems like nothing happens, but when you resize the window a bit you see the form.
The following makes it work in IE:
Remove the 'scrollable' class from the section (not an option as I need that)
Display the form directly without the 'inputMode' condition (not an option)
I tried ng-show as well at no avail.
Any ideas?
Thanks.
Changing the css seems to have fixed it:
.scrollable {
overflow-x: hidden;
overflow-y: auto;
min-height: 100%;
}
Related
I have a Kendo dropdown on a react page as follows
<div className="col-lg-4 col-md-4 col-sm-4 col-xs-4 form-group">
<Label>CDN Code</Label>
<DropDownList
id="cdnCode-dropdown"
name="cdnCodeDD"
value={props.CdnCodeTxt}
onChange={handleChange}
data={componentState.cdnCodeList}
textField="text"
dataItemKey="id"
defaultItem={Constants.DefaultItem}
/>
</div>
and I have this react test code
test('renders cdncode dropdown', () => {
render(<ComponentDetailsContent />);
const element = screen.getByRole("listbox", {
name: "cdnCodeDD",
});
expect(element).toBeInTheDocument();
});
But when I run this test I get this error
TestingLibraryElementError: Unable to find an accessible element with the role "listbox" and name "cdnSicCodeDD"
It then goes on to list all the accessible roles and the name is blank for all of them.
Name "":
<span
aria-activedescendant="option-01abe0e8-1cc2-4ca2-ac35-d2a04f7dda62--1"
aria-expanded="false"
aria-haspopup="true"
aria-owns="0f6115c2-49f9-4430-bb2e-09841d34807b"
class="k-dropdown-wrap k-state-default"
id="cdnCode-dropdown"
role="listbox"
tabindex="0"
/>
Why is that even though my dropdown clearly has a name? I have also tried with "/cdncode/i" and I get the same error. I can't install Testing Playground plugin at work otherwise I would be able to tell the correct query for testing. Any alternatives that don't require chrome plugins?
Also, if I list out all the listboxes using GetAllByRoles I get the following array which contains the dropdown with the correct name?
[...
<select aria-hidden="true" name="cdnCodeDD" style="opacity: 0; width: 1px; border: 0px; z-index: -1; position: absolute; left: 50%;" tabindex="-1"><option value="[object Object]" /></select></span>]
As I saw in the documentation, Font Awesome has a way of put an icon in an input placeholder, doing something like this:
<Input placeholder=' Search' />
This is what I get:
No matter what code I put after &#x, it always renders the same icon.
I'm working with ReactJS and Reactstrap library. Any suggestion? Thanks a lot (sorry 4 my english)
You can't do it this way, because the font family of the input field is using an English font. Font Awesome uses it's own font file.
One way to implement this would be to use a positioned <i> element:
<div class="container">
<label><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<i class="fa fa-user fa-lg"></i>
</div>
.container {
position: relative;
}
.container i {
position: absolute;
left: 15px;
top: 40px;
color: gray;
}
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 am new to css transitions and i want to add sliding effect for my buttons "option1" and "option2" when i click on "view more". These buttons should appear from behind view more.
I am currently using ng-if to hide and show two of my buttons
<div class="bottom-right">
<button class="btn button1" ng-click="showAll()">view more</button>
<button ng-if="viewmore" class="btn button1">option1</button>
<button ng-if="viewmore" class="btn button1">option2</button>
</div>
how can i do that?
here is my plunker http://plnkr.co/edit/HA7RzM3FPXlEb5g7Jh4r?p=preview
i'd recommend using ngAnimate to achieve that effect.
Since angular 1.2.* came out approximately 2 years ago,
here's a great article that explains how to achieve exactly what you need with this version:
http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html#animating-nginclude-ngview-and-ngif
I think this is a really good example from the AngularJS documentation.
<div ng-init="checked=true">
<label>
<input type="checkbox" ng-model="checked" style="float:left; margin-right:10px;"> Is Visible...
</label>
<div class="check-element sample-show-hide" ng-show="checked" style="clear:both;">
Visible...
</div>
</div>
.sample-show-hide {
padding:10px;
border:1px solid black;
background:white;
}
.sample-show-hide {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
}
.sample-show-hide.ng-hide {
opacity:0;
}
I hope it will help you.
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;
}