-
token-input Drop Down Overlapping issue in Popup
about 9 years ago
-
about 7 years ago
hi thanks for your great answer... solved my problem.... -
about 9 years ago
"Token-input" plugin has an issue with it. That is the drop down <div> which is added dynamically to the body it do not work properly if the input box on which tokenInput is bind to is in the popup. As the drop down is created some where outside the popup and hence it do not work properly.
However to make it work, please follow the following steps. This a quick fix which I created to overcome it.
1st Step:- Adding another property under default setting in jquery.tokeninput.js file.
2nd Step:- Adding the following code in the jquery.tokeninput.js file at the mentioned place. This will check if the divId property is null. If divId property is null it will work as default otherwise the new drop down will be created at the specific div mentioned.
- // The list to store the dropdown items in
- if (settings.divId !== null) {
- var dropdown = $("<div>")
- .addClass($(input).data("settings").classes.dropdown)
- .appendTo($( "#"+settings.divId ))
- .hide();
- } else {
- var dropdown = $("<div>")
- .addClass($(input).data("settings").classes.dropdown)
- .appendTo("body")
- .hide();
- }
// The list to store the dropdown items in if (settings.divId !== null) { var dropdown = $("<div>") .addClass($(input).data("settings").classes.dropdown) .appendTo($( "#"+settings.divId )) .hide(); } else { var dropdown = $("<div>") .addClass($(input).data("settings").classes.dropdown) .appendTo("body") .hide(); }
- function show_dropdown() {
- if (settings.divId !== null) {
- dropdown.css({
- // position: "absolute",
- // top: token_list.offset().top + token_list.outerHeight(true),
- // left: token_list.offset().left,
- // width: token_list.width(),
- // 'z-index': $(input).data("settings").zindex
- }).show();
- } else {
- dropdown.css({
- position: "absolute",
- top: token_list.offset().top + token_list.outerHeight(true),
- left: token_list.offset().left,
- width: token_list.width(),
- 'z-index': $(input).data("settings").zindex
- }).show();
- }
- }
function show_dropdown() { if (settings.divId !== null) { dropdown.css({ // position: "absolute", // top: token_list.offset().top + token_list.outerHeight(true), // left: token_list.offset().left, // width: token_list.width(), // 'z-index': $(input).data("settings").zindex }).show(); } else { dropdown.css({ position: "absolute", top: token_list.offset().top + token_list.outerHeight(true), left: token_list.offset().left, width: token_list.width(), 'z-index': $(input).data("settings").zindex }).show(); } }
3rd Step:- Initialization or binding the tokenInput to a specific ID property on an HTML element. Add new property as "divId" .
- $("#demo-input-local-custom-formatters").tokenInput(
- AJAX URL, {
- propertyToSearch: "first_name",
- ..........
- ............
- ..............
- divId: "email-list"
- });
$("#demo-input-local-custom-formatters").tokenInput( AJAX URL, { propertyToSearch: "first_name", .......... ............ .............. divId: "email-list" });
4th Step:- Adding the div element in the HTML with same id as mentioned earlier where drop-down to be created.
- <label>Friend email </label>
- {!! Form::input("text", "email", "", array("placeholder" => "EMAIL", "class" => "inputStyle", "id" =>"demo-input-local-custom-formatters")) !!}
- <div id="email-list"></div>
<label>Friend email </label> {!! Form::input("text", "email", "", array("placeholder" => "EMAIL", "class" => "inputStyle", "id" =>"demo-input-local-custom-formatters")) !!} <div id="email-list"></div>
about 7 years ago
Can you help out the community by solving one of the following Javascript problems?
Do activity (Answer, Blog) > Earn Rep Points > Improve Rank > Get more opportunities to work and get paid!
For more topics, questions and answers, please visit the Tech Q&A page.
1 Comment(s)