I can't find an easy way to add a clear (x) button to an input field in Onsen UI. Any help would be appreciated specifically for input type search.
Assuming you are using straight JS with the DOM, use this:
<input id="txtSearch" value="Clear Me">
<ons-button onclick="document.getElementById('txtSearch').value='';">Clear</ons-button>
Edit: Adding another down and dirty solution, using simple CSS for this:
<input id="txtSearch" value="Clear Me">
<ons-icon icon="ion-close" size="20px" fixed-width="true" style="margin-left:-25px" onclick="document.getElementById('txtSearch').value='';"></ons-icon>
I have found out that the input of type search, you need to enable the x clear button using CSS because it's disabled in the onsen-ui styling. To enable it, add this line to your css
.search-input::-webkit-search-cancel-button { display: inline-block; }
Related
How do I set uib-typeahed result to uppercase from HTML view only.
I don't care of any result from controller, but on the view it should be in uppercase.
Also, uppercase filter not working on it.
Here is attached plunker.
Help me out,
Thanks.
The answer provided by Ashish is good but if you want to make the UI consistent, you can refer this approach
<input type="text" ng-model="selected"
uib-typeahead="state.toUpperCase() for state in states | filter:$viewValue | limitTo:8"
class="form-control">
so that the selected value is also in Uppercase inside the input box
Please check this plunker
You need to use custom template for this using typeahead-template-url="customTemplate.html"
And add new custom template like this.
<a>
<span ng-bind-html="match.label |uppercase"></span>
</a>
You can just add a css in your case to make the results in the view uppercase
.typeahead-demo .dropdown-menu {
text-transform : uppercase;
}
Plunker: https://plnkr.co/edit/Ni719u1pNCOVMiMfLQeL?p=preview
Note: Have removed uppercase from your input element because that is not going to work.
I have an Angular Formly form inside an ng-repeat. I've got everything working as I would expect except for the reset button. For some reason clicking any reset button always resets the last form, not the one it's supposed to. Submitting and updateInitialValue() seem to work fine.
<div ng-repeat="model in vm.models">
Here is the form declaration inside the repeat:
<formly-form model="model" fields="vm.fields" options="vm.options[$index]" form="vm.form[$index]">
And here is the reset button.
<button type="button" class="btn btn-default" ng-click="vm.options[$index].resetModel()">Reset</button>
Here is the whole thing in a fiddle.
http://jsbin.com/feguvulumo/edit?html,js,output
Thanks in advance for any help you can give!
I figured this out with some help from #kentcdodds on the Formly gitter chat (https://gitter.im/formly-js/angular-formly)
He suggested that the issue was that the repeating forms are sharing the same field configuration.
To fix it, I implemented a function that was called by an ng-init inside the ng-repeat. It builds up an array of fields objects as it loops.
function addFields() {
vm.fields.push(new getFields());
}
I then changed the fields property on the <formly-form> like so
<formly-form model="model" fields="vm.fields[$index]" options="vm.options[$index]" form="vm.form[$index]">
Full solution
http://jsbin.com/yanopeyija/1/edit?html,js,output
I am also new to angular, but generally this could be achieved if we change the button type as reset :
<button type="reset" >
I have the following code,
<accordion-group ng-class={selected : object.property}></accordion-group>
<input type="button" ng-click="object.property=!object.property">
When I run the above code, on load of application, object.property is true and the css is applied. On click of button, css property is removed. On click of button again, css is not getting applied.
Note: This worked with the previous versions of angular and bootstrap. I recently got upgraded to angular1.4.1 and bootstrap 0.13.0. I suspect this is because of latest version update, but, could not find a valid documentation for me to conclude.
Thanks in advance.
<input type="button" ng-click="object.property = !object.property">
And I prefear ng-class like this:
ng-class="{'selected' : property}"
since on the left part of the : operator there will be surely a string!
And here is a PLNKR.
Would like to know the best way to preserve state between tabs. I use bootstrap tabs and angular ui-router. I've a google map in one of the tabs and don't want to reload the map when user selects that tab. Please advise.
Thanks
I think what you are looking for is discussed in this issue: https://github.com/angular-ui/ui-router/issues/63
They are mostly discussing iframes but I believe the same should hold for Google Maps. Unfortunately in the thread they decided that this isn't something that should be implemented in the core release. I haven't tried out the directive they provide (if I get a chance I'll let you know how it goes) but you may be able to get something working with that.
I have actually come across the exact problem you had. My solution was to use styled buttons as my tabs and ng-show for the map tab:
<div id="info-btns">
<button class="btn" ng-model="view" btn-radio="'info'">
Info
</button>
<button class="btn" ng-model="view" btn-radio="'map'" ng-click="loadMap()">
Map
</button>
</div>
<div class="content" ng-show="view != map">
<div ui-view="info"></div>
</div>
<div id="map-container" ng-show="view == 'map'">
<div id="map" class="content" sitemap>
</div>
</div>
ng-show simply uses display:none to hide the map and hence doesn't cause a refresh. You will need to trigger the map to load the first time it is not hidden otherwise it will render incorrectly, hence loadMap()
If I get a chance I'll set up a jsfiddle of this in practice.
I have a Drupal 7 site using ckeditor 4.2. I've created a basic page node and put a span inside an h2 heading in the body. I hard coded it in the html view. It looks fine but if I go back to edit the page, my has gotten stipped out of the html and also any style="" I've put into the html also. I've looked at the ckeditor config and text-formats. I've set the only formats allowed to be text and full html so I'm not using filtered at all. What gives? I've used the editor many times before but probably not this version.
If you are using the CKeditor module then there is an option in Advanced Options that is also mentioned in the module homepage where you should set:
config.allowedContent = true;
None of the above solutions worked for me. What I found was that CKEditor was removing empty <span> tags from the HTML. For example:
<div class="section-heading">
<span class="sep-holder-l"><span class="sep-line"></span></span>
<h4>Section Header</h4>
<span class="sep-holder-r"><span class="sep-line"></span></span>
</div>
Would yield:
<div class="section-heading">
<h4>Section Header</h4>
</div>
However, if I added a non-breaking space in the innermost <span>, CKEditor didn't edit the HTML:
<div class="section-heading">
<span class="sep-holder-l"><span class="sep-line"> </span></span>
<h4>Section Header</h4>
<span class="sep-holder-r"><span class="sep-line"> </span></span>
</div>
Hopefully that helps someone out there!
In Drupal 7 there's no automatic synchronization between CKEditor's filter (called the Advanced Content Filter) and Drupal's filter. As I understand you configured latter one, but not the first one. See config.extraAllowedContent.
CKEditor 4.+ will remove any empty tags it finds which are in CKEDITOR.dtd.$removeEmpty as part of the HTML parsing process.
See this answer for a hack to avoid it.