I am trying to show 'ticks' with HTML range sliders. Like this:
While the HTML range directive allows for ticks with "step" and "datalist", Safari does not honor it while Chrome does. I am building an ionic/Angular app, so this means it does not work for iOS devices.
There are some 3rd party sliders like angular-awesome-slider that do support a form of ticks, but they have other issues which make them less usable for my need.
So my requirement is this: Given an HTML range slider, how do I go about adding an overlay on top that displays "|" marks at specific places on top of the slider?
(Note that the positioning of the "|" needs to take into account the display width of the slider)
I've set up a codepen here:
http://codepen.io/pliablepixels/pen/EjdpVB?editors=101
(SO insists if I insert a codepen link, I need to also insert code, so here is the code for the input)
<input type=range ng-model="myRange" min=0 max=20 step = 1 list="vals">
<datalist id="vals">
<option>2</option>
<option>6</option>
<option>8</option>
</data-list>
with an input range. As you see it shows ticks on Chrome but not on Safari. Can someone be so kind as to help me get started with my objective?
This is way late :-) But are you sure (I don't have an installed Safari to check) that it wouldn't help if your <datalist id="vals"> tag matched your </data-list> tag?
I'm frankly surprised that it works for Chrome! Though it definitely breaks if you change the opening tag to <data-list>
Related
I am using angularJs to bind a list of employees into a mult-select tag. Below is my code:
<select class="form-control" ng-model="event.attendees"
ng-options="c.Email as c.FullName for c in employees" id="eEmployees" multiple style="height:315px !important; -webkit-appearance:listbox !important;">
</select>
The result displayed correctly in Chrome and Firefox, but in IE it shows a list of {{c.FullName}}, instead of the real names. I tried to right-click to view the source in IE (and also IE inspector, F12), but in the source, the employee names display correctly.
Have anyone here ever ran into this issue before? I really have no sense why this happened. I placed my multiple select tag in a modal-dialog, does that matter?
I figured it out by added $scope.$apply() after angular service pulled the list data. It needs a little delay before binding it. But I still don't know why this situation only happened in IE though.
I am building a mobile website that displays a grid-list of products.
In order to implement the grid list I am making use of md-grid-list directive of angular material.
This is the part of my code that implements the above functionality:
<div id="products-row" infinite-scroll="fetchNextPage(nextCategory,1)" infinite-scroll-disabled="busy">
<md-grid-list md-cols-gt-md="3" md-cols-md="2" md-cols-sm="1" md-gutter="5px" md-row-height="2:1">
<md-grid-tile ng-repeat="p in productsOfCurrentCat">
<product data="p" id="product-item"></product>
</md-grid-tile>
<div ng-show="busy">Loading more products....</div>
</md-grid-list>
</div>
This works quite well on larger screen size. When I view the webpage on a smaller screen size using the toggle device mode of Google Chrome, I get the following error:
md-grid-list: md-cols attribute was not found, or contained a non-numeric value
And, it infinitely sends requests to the node server.
I tried to google it out, but not enough help is available. Any help on this forum would be appreciated.
Well, the error tells you that you are missing md-cols for the breakpoint that fits your chosen device.
If you look at the layout breakpoint introduction here and the grid-list demo here, you will find out, that you are missing the md-cols-xs="1" attribute. sm is not the smallest breakpoint.
What are the controls that I can put inside a "md-input-container" with angular material design?
The reason why I ask this is because of this sample for example:
<md-input-container>
<input flex="" flex min="0" max="20" type="number" ng-model="testNumber">
</md-input-container>
Why I look at the "Spinner" aka slider samples:
https://material.angularjs.org/latest/demo/slider
Nowhere is the md-input-container used. But only when I wrap a input of type number with a md-input-container the look of the spinner seems right as a material component.
Looking at the API of the md-input-container:
https://material.angularjs.org/latest/api/directive/mdInputContainer
They mention only "Input" and "TextArea"
Well Input can be of any type...
When I look now back again to the spinner/slider samples all of them do NOT use a md-input-container.
So something is wrong or undocumented here.
md-input-container has to be a parent container for any type of input (text, number, date, etc) in order to get that material look and feel.
However, if you do not need these material-styled placeholders, labels and validation, you can still use input which is not nested in the container. That was the case in the Sliders example.
md-input-container supports only:
input
textarea
Only 1 input can be in each md-input-container or an exception will be thrown.
The md-slider demos and docs have all been updated to use md-input-container.
Many input types like email, week, number, month, password, search, tel, text, and time are supported by md-input-container.
The following types may not have ideal behavior:
checkbox - md-checkbox preferred
image - ng-click on img preferred
radio - md-radio-button in a md-radio-group preferred
file - placeholder alignment is off in Chrome
submit - md-button preferred
reset - md-button preferred
range - md-slider preferred
Please make sure to use the angular-aria module if you are using inputs in your project. It will automatically make your app more accessible and compliant to standards related to accessibility.
I have a custom directive (to exposecertain fields), and inside that I have another directive (the drop down box for the field). It's working well on Chrome, but on IE9 it appears the ng-show and ng-if is failing to evaluate. It appears not to even enter the function I defined (I put console.log inside the isAllowed function and it appears in Chrome but not in IE9).
<div>
<select id="" class="form-control" ng-model="measure" name="{{name}}">
<option ng-if="isAllowed(name, 1)" value="1">Kilowatt Hours</option>
<option ng-if="isAllowed(name, 2)" value="2">mmBTU</option>
<option ng-if="isAllowed(name, 3)" value="3">Therms</option>
<option ng-if="isAllowed(name, 4)" value="4">Decatherms</option>
</select>
</div>
I have tried ng-show instead of ng-if and it behaves the same in IE9. It appears the replace: true I put on my first directive is not honoured in IE9:
Whereas in Chrome this is replaced as expected with surrounding DIV elements and my custom directives cannot be seen anywhere, which is good.
Has anyone had experience of this before? Is it something to do with having a directive inside of a directive? Seems like IE9 does the first one OK then stops.
(I wish I could drop IE9 but it's an internal app and they're still on IE9 everywhere, so I've got to make it work somehow).
PS: The aim here is to only show the options that are relevant to the given field. In this case Electricity can be measured in kWh and mmBTUs but not in Therms and Decatherms. Inside the isAllowed function is supposed to be some switch logic. It works fine in Chrome, just not IE9, so I might need another method as a workaround.
PPS: Angular 1.3.2. IE9 - Browser Mode: IE9, Document Mode: IE9 Standards.
Figured it out. Isolated scope. Somehow Chrome was dealing with it OK, but IE9 was not.
In my app I have the fields I want to show to my user defined in a Partials module, but the drop-down lists is something I want to use in multiple places and they may change, so I defined them in a directive called BusinessRulesDirectives.
All I needed to do was drop in the BusinessRulesDirectives as a dependency to my Partials module and it works across both Chrome and IE9.
angular.module( 'ActualsPartials', [
'BusinessRulesDirectives'
] )
For some reason Chrome was able to run fine with this, but IE9 did not like it:
angular.module( 'ActualsPartials', [] )
Also, no errors were being output. I just happened to double-check for isolated scope as a wild guess.
Would be interested to know why Chrome was OK but IE9 was not.
IE9 isn't playing nice with my select boxes. When you click on one to change the value in Chrome it works as intended. In IE9 it's removing the default selection from every select box on the page. What the heck is happening here?
I had to do a jsfiddle this time becuase plunker doesn't seem to link IE9 either.
http://jsfiddle.net/sonicparke/nEDfY/
Here's one section of the code I'm using for the select boxes. There's a working example in the fiddle.
<select ng-model="initialOption1" ng-options="drafter.name for drafter in drafterItems"><option value="">Initial Option</option></select>
<select ng-model="initialOption2" ng-options="drafter.name for drafter in drafterItems"><option value="">Initial Option</option></select>
<select ng-model="initialOption3" ng-options="drafter.name for drafter in drafterItems"><option value="">Initial Option</option></select>
I'm not exactly sure what the cause is, but you can make it work by not using the initial option in the markup. Instead set a default in your ngOptions object and set the model values to that.
http://jsfiddle.net/Z2gkg/
$scope.initialOption1 = $scope.drafterItems[0];
$scope.initialOption2 = $scope.drafterItems[0];
$scope.initialOption3 = $scope.drafterItems[0];
I would love to know the underlying cause, but it is likely related to the ng-grid library you are including.