Forum PHP.pl

mam problem z domyślną szerokością listy wyników skryptu JQuery.autocomplete w darmowym sklepie PrestaShop.
nie udało mi się nigdzie znaleźć informacji jakim parametrem określić szerokość tej listy.
nie mogę jej określić za pomocą CSS. domyślnie zajmuje 502px, tj. 2x więcej niż bym chciał.



ktoś jeszcze spotkał się z takim problemem? szukam rozwiązania.

Ten post edytował ~dNkN! 2.03.2010, 22:41:43

nie wiem skąd zerżnąłeś skrypt ;p ale szerokość ustawia się w pliku autocomplete napisanym w JS nie myl czasem z JQuery. Tam jest deklaracja szerokości itp jak nie ma trzeba dopisać.

po prostu zainstalowałem PrestaShop...

możesz pokazać mi na przykładzie gdzie i jakim parametrem określić szerokość?



nie wiem do czego służy w/w deklaracja szerokości ale dla mnie nie działa (zmieniłem 0->250 i dalej lipa).

Zajrzyj w arkusz CSS i sprawdź co ma ustaloną szerokość na 500 bądź 502px. I zapewne to coś wpływa również na widok listy.

Bo tego nie stylujesz w tym miejscu. To zwykły input o określonym id zapewne, więc zdefiniuj mu szerokość za pomocą CSS, a nie konfiguracji domyślnej plugina, bo ona przecież odpowiada za coś innego.

sprawdziłem arkusz CSS w pierwszej kolejności.

Zapomniałem dodać - nie arkusz od jQuery.autocomplete a swój od strony.

good point, tylko gdzie...

tak autocomplete jest osadzony na stronie

[HTML] pobierz, plaintext 
<!-- Block search module HEADER -->
<link rel="stylesheet" type="text/css" href="http://e-mediapark.info/sklep/css/jquery.autocomplete.css" />
<script type="text/javascript" src="http://e-mediapark.info/sklep/js/jquery/jquery.autocomplete.js"></script>
<!-- Block search module HEADER -->
[HTML] pobierz, plaintext 

to jest chyba tworzenie obiektu INPUT (ID="autocomplete") ?


dalej nie bardzo wiem, co z tym zrobić

Proszę poprawić tag tematu, java != javascript

tym już też się bawiłem i ni-hu-hu.

No to sobie ładnie prześledź "kolejkę" Pozwól, że poprowadzę cię za rękę przyjmując, że to FAKTYCZNIE input odpowiadający z autocomplete.

[JAVASCRIPT] pobierz, plaintext 
var $input = $(input).attr("autocomplete", "off").addClass(options.inputClass);
[JAVASCRIPT] pobierz, plaintext 

Mamy input, któremu nadajemy klasę związaną z opcjami i ukrytą w inputClass

[JAVASCRIPT] pobierz, plaintext 
$.Autocompleter.defaults = {
    inputClass: "ac_input",
    resultsClass: "ac_results",
    loadingClass: "ac_loading",
[JAVASCRIPT] pobierz, plaintext 

No popatrz... Mamy takie pole w defaulcie. Wewnątrz jest odwołanie do klasy ac_input. Mamy taką gdzieś w temacie? Nie widzę I chyba tam powinieneś zerknąć. Jeśli zaś tam nic niema to sobie SAM napisz styl dla tego inputa by zdefiniować jego długość na tyle, ile chcesz.

Ten post edytował thek 2.03.2010, 23:04:55

[JAVASCRIPT] pobierz, plaintext 
$.Autocompleter.defaults = {
inputClass: "ac_input", /* to jest wyłącznie pole wpisywania tekstu */
resultsClass: "ac_results", /* 'jakimś cudem' param width tej klasy nie określa szerokości listy rezultatów */
[JAVASCRIPT] pobierz, plaintext 

[CSS] pobierz, plaintext 
.ac_results {
    width: 250px; /* dopisanie tej deklaracji kompletnie nic nie daje */
    text-align: left;
    padding: 0px;
    border: 1px solid black;
    background-color: white;
    overflow: hidden;
    z-index: 99999;
}
 
.ac_results ul {
    width: 50%; /* wpływa tylko na szerokość barwy tła */
    list-style-position: outside;
    list-style: none;
    padding: 0;
    margin: 0;
}
[CSS] pobierz, plaintext 

oto efekt


kompletnie nic z tego nie rozumiem

A może pokaż cały arkusz swoich styli CSS, nie tylko te wewnątrz #header?

Zmyliło mnie nieco pisanie, stąd myślałem, że chodzi o szerokość samego input Ale skoro chodzi o szerokość wyników to pomyśl o pewnej rzeczy... Nadałeś szerokość 50% elementom listy, a nie całej liście. Z postów powyżej wynika, że testowanie dla całego UL i zmiana width też nie dawały efektów. w takim wypadku zerknij sobie czym jest w kodzie element, który jest dostaje klasę ac_results. Mam na swoich serwisach także autocomplete i wiem, że to jest sobie div, któremu można nadać szerokość Zainstaluj sobie FireBuga a sam zobaczysz. Jeśli nie wiesz gdzie to radzę zajrzeć do kodu autocompleta, który ciągle wałkujemy. Do części $.Autocompleter.Select = function (options, input, select, config), a konkretnie function init(), bo tam masz właśnie definiowanie szerokości. A tam jak byk pisze, że odpowiada za to options.width, które to już poruszono na samym początku tego tematu. Skoro według Ciebie nie działa to spróbuj tam "na pałę" zmienić fragment
if( options.width > 0 )
element.css("width", options.width);
na
element.css("width", 250);
i zobacz jak działa

próbowałem tego jeszcze wczoraj, nie działa
definiowanie elementu 'select' zarówno w globalnym jak i lokalnym pliku CSS autocomplete także nic nie dało.

przeinstalowałem dzisiaj PrestaShop na serwerze, dalej jest to samo.
nie pozostaje mi nic innego jak użycie innego skryptu.

dzięki za starania



cały plik CSS zajmuje ponad 60kB. dostępny jest tutaj: global.css