I am using Materialize as a front-end framework for my project.
I have used their auto-complete input field for this purpose and I am providing the data for that auto complete input field through JSON. It is working fine but now I want to add another autocomplete input-field like that and I am using jquery's append method for that.
I am getting the structure for the input field but unfortunately the dropdown isn't showing up. When i inspected the elements in the browser, I saw that the dropdown for the dynamically generated input field is not showing up. Below is the code for the input field.
HTML and CSS
<div class="row">
<div class="col s4 offset-s4">
<a class="btn grey darken-3 squared left" id="add">add</a>
</div>
</div>
<div class="row" id="dynamic">
<div class="col s2 offset-s2">
<input type="text" id="autocomplete-input" class="autocomplete input-item" name="item">
</div>
</div>
JAVASCRIPT
<script>
$(document).ready(function(){
var i = 1;
$("#add").click(function(){
i++;
$('#dynamic').append('<div class="col s2"><input type="text" id="autocomplete-input" class="autocomplete input-item" name="item"></div>');
});
});
Any help would be appreciated.
Related
I am using this datepicker lib https://github.com/720kb/angular-datepicker for my project, In my project I am trying to put the datepicker visible to the user and under that I put some text. But I have an error the datepicker hides my text.
<div class="row">
<div class="col s6">
<div class="fecha_input margen_top2" id="id_datepicker_text">
<datepicker date-format="yyyy-MM-dd" datepicker-show="true" datepicker-append-to="id_datepicker_text">
<input ng-model="data.fecha_actual" type="text" class="form-control" ng-change="todas_citas_func()"/>
</datepicker>
</div>
This is some text to show some data | here is hidden :(
</div>
<div class="col s6">
<ul>
<li>a</li>
<li>b</li>
</ul>
</div>
</div>
the documentation says that I should use this properties
datepicker-show="true" datepicker-append-to="id_datepicker_text"
But I do not know what is my error
What do I want? I want my some text appears under the datepicker
Because I was unable to enter text in a Select widget, I am using an Autocomplete Input widget. My question is how only to accept options that the autocomplete list suggest?
HTML
<div class="row">
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">textsms</i>
<input type="text" id="SimpleInput" class="autocomplete validate" required>
<label for="SimpleInput">AutocompleteSimple</label>
</div>
</div>
</div>
</div>
</div> <!-- CLOSE CONTAINER -->
Javascript
var instances = M.Autocomplete.init(elems,
{data:
{"Apple": null,
"Microsoft": null,
"Google": null},
minLength: 0});
Expectation
I expect this Autocomplete widget only to accept inputs which are in the option and possibly if feasible add additional self-made input options. In other cases, the widget should be red, like in the case when no input is added. In other words, these inputs should be considered invalid.
Actual result
It accepts all kind of inputs.
The code which I use can also be seen in CodePen
i am using iCheck in an angular application, i have a basic checkbox when checked shows an image. this works perfectly with ng-show, however when i set the value to true within my controller it doesn't return checked when page is loaded.
Controller
$scope.basicIntake = {};
$scope.basicIntake.insurance_cover = true;
html
<div class="row">
<div class="form-group col-lg-6">
<div class="col-lg-12">
<label>
<input icheck type="checkbox" ng-model="basicIntake.insurance_cover">
click to see image
</label>
</div>
</div>
<div class="form-group col-lg-6">
<div class="col-lg-12">
<img ng-src="http://i.imgur.com/vkW3Lhe.jpg" class="img-responsive img-thumbnail" ng-show="basicIntake.insurance_cover">
</div>
</div>
</div>
This is because your template is not bound to any controller with directive ng-controller.
Your properties are not created till you make any event. like : click.
See this attached fiddle and try to connect.
try to remove ng-controller from top Div to get your problem.
Further: there is no need to have ng-checked, when you already have ng-model
Change:
<input icheck type="checkbox" ng-model="basicIntake.insurance_cover">
to:
<input icheck type="checkbox" ng-checked="basicIntake.insurance_cover" ng-model="basicIntake.insurance_cover" ng-click="checkAll()">
And it will work.
(Miguel Lattuada also suggested it in a comment to your question)
I'm using the excellent jQuery color picker from http://colpick.com/plugin
It works correctly under "normal" circumstances but doesn't show the picker when the input parent element is found within a Bootstrap 3 modal.
This works:
<div class="container">
<div class="row">
<div class="col-md-6">
<input type="text" id="colorPick1" class="colorPick"/>
</div>
</div>
</div>
But the same thing inside a Bootstrap modal fails to show the picker:
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<input type="text" id="colorPick2" class="colorPick"/>
</div>
</div>
</div>
Is there a way to use this color picker within a Bootstrap modal?
Thanks
The problem is z-index just add this line in your css class it works good..
.colpick {
z-index: 9999;
}
Jsfiddle DEMO
I have a form that uses tabindex to logically traverse through the input fields in the form. However, within my form there is a jQWidgets grid that also applies tabindex to its elements. As my input fields are nested within div's, the tabindex order is being messed up so instead of traversing in the correct order, when using the Tab button, the focus jumps about the page.
Can anybody see of a way, either using HTML or Javascript (jQuery), to prevent this from occuring?
I have tried nesting the grid further down the DOM but this had no affect...
The structure of the HTML must remain the same for all of the input fields
You can see this here: http://jsfiddle.net/TN7xL/1/
Or alternatively, here is a sample of my code (I have stripped out all irrelevant id's and classes):
<form>
<div class="row">
<div class="column">
<div>
<label for="foo">Foo</label>
<div>
<input type="text" id="foo" name="foo" tabindex="1" />
</div>
</div>
<div>
<label for="bar">Bar</label>
<div>
<input type="text" id="bar" name="bar" tabindex="2" />
</div>
</div>
</div>
<div class="column">
<div>
<label for="name">Name</label>
<div>
<input type="text" id="name" name="name" tabindex="3" />
</div>
</div>
<div>
<label for="surname">Surname</label>
<div>
<input type="text" id="surname" name="surname" tabindex="4" />
</div>
</div>
</div>
</div>
<!-- THERE ARE MORE ROWS AND COLUMNS IN MY FULL SCRIPT -->
<div id="grid" class="row">
<!-- THE FOLLOWING IS AUTOMATICALLY GENERATED BY JQWIDGETS -->
<div tabindex="0">
<div tabindex="1">GRID HERE</div>
</div>
<!-- THE ABOVE IS AUTOMATICALLY GENERATED BY JQWIDGETS -->
</div>
<div class="row">
<div class="column">
<div>
<label for="field">Another Field</label>
<div>
<input type="text" id="field" name="field" tabindex="5" />
</div>
</div>
</div>
</div>
</form>
My aim is to effectively ignore the tabindex's that are set by the jQWidgets grid, but I cannot see a way to do this...
Just because you don't know what jqWidget tabindex is set, I use this strategy:
1- I give my tabindex order to every input that I introduce,
2- I give them a "tabindex" class,
3- I remove every tabindex that is not what I have introduced after every jqWidget initialization.
<html>
<input type="text" class="tabindex" tabindex="2" />
<div id="split"> ... </div>
<script>
$("#split").jqxSplitter(settings);
// Delete every tabindex introduced by jqWidgets
$("[tabindex]:not(.tabindex)").removeProp("tabindex").removeAttr("tabindex");
This solution works pretty well with almost every jqWidget component.
In grid or in every loop situation you can use knockout with data-bind "attr: {class 'tabindex', tabindex: $index}"
Known Bug:
If you have a Navigation Bar, tab jumps from it to address bar.
my 2 cents
N
You may remove the auto-generated tabindex by using the jQuery's removeAttr method. http://api.jquery.com/removeAttr/
After looking into this, it is clear that the only solution is to get rid of the tabindex's on any elements within the grid. I therefore implemented the following code to select any element within the grid (when it is initiated) that has a tabindex set, and then I remove it.
ready: function(){
// Remove any tabindex's set by the grid
$('#grid [tabindex]').removeAttr('tabindex');
}
$(document).ready(function(){
$('input').removeAttr("tabindex");
});