autoComplete tag appears on the wrong place

Question

I'm using PrimeFaces and JSF to do my school work and used jQueryUI Theme roller to style it, and the specific tag: <p:autoComplete> has a bug when the CSS is active (when I disable css it works fine), this is how it looks:bug

the autoComplete should be right beside "Modelo:", but it's on the page corner.

I've found this code with "autocomplete":

.ui-autocomplete {
    position: absolute;
    top: 0;
    left: 0;
    cursor: default;
}

This same code also appears in jquery-ui.css and jquery-ui.structure.css. There are also some JavaScript codes with "autocomplete", but they were to big to put in here so I placed them on this link: http://hostcode.sourceforge.net/view/4282

I don't understand much of CSS and Javascript, so I'm asking you guys to help me with this bug.

FYI: I'm using the <p:autocomplete> inside a <p:panelGrid>, also, sorry for the English mistakes :)

Thank you @Venkatraman, but it was far more simple to solve this, I've just changed .ui-autocomplete position in css, from absolute to relative, of course, I've to change in every file that .ui-autocomplete appeared. — João Victor Fiabani, Dec 28 '15 at 18:03
Next time, please create a question with a little less broad tags. You might get non-pf related answers — Kukeltje, Dec 28 '15 at 18:32
Instead of changing library files you could just create your own css class which overrides position attribute and add it where you need it. Changing it globally can cause problems elsewhere. — Geinmachi, Dec 28 '15 at 19:57

score 2 · Answer 1 · answered Dec 30 '15 at 15:05

2

it was far more simple to solve this, I've just changed .ui-autocomplete position in css, from absolute to relative, of course, I've to change in every file that .ui-autocomplete appeared

answered Dec 30 '15 at 15:05

João Victor Fiabani

31
3

This answer is way more applicable than the other one – Kukeltje Dec 30 '15 at 18:00

score 1 · Answer 2 · answered Dec 28 '15 at 17:01

1

Use jQuery and jQuery UI Refer the below Snippet.

Reference URL: https://jqueryui.com/autocomplete/

$(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

answered Dec 28 '15 at 17:01

Venkat.R

7,420
5
42
63

I've got run a method who returns an arrayList in a java class to pull the autoComplete tags, is there a way to put this arrayList in that javascript function? – João Victor Fiabani Dec 28 '15 at 17:21
Yep create this a Rest GET API call – Venkat.R Dec 28 '15 at 17:23
if its hard coded variable from java then refer url on how to add: http://stackoverflow.com/questions/4803906/reading-a-jsp-variable-from-javascript – Venkat.R Dec 28 '15 at 17:31
Wrong answer for a (badly tagged) PrimeFaces question – Kukeltje Dec 28 '15 at 18:29
@Kukeltje, initially this was expected. so suggested angular way autocomplete ! – Venkat.R Dec 28 '15 at 18:30
Angular way? jQuery way you mean – Kukeltje Dec 28 '15 at 19:21

autoComplete tag appears on the wrong place

2 Answers2