Autocomplete lijst verticaal weergeven i.p.v. horizontaal

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Junior .NET developer

Functie Jij hebt natuurlijk net jouw Bachelor op zak en gaat nu voor het eerst aan de slag bij een werkgever als junior .NET ontwikkelaar. Waarschijnlijk lijkt het jou spannend om ineens aan de slag te gaan bij klanten in de consultancy. Maak je niet druk, jij komt hier terecht in een warm bad en wordt totaal niet in het diepe gegooid. Zodra jij hier begint wordt jij gekoppeld aan een persoonlijke manager met een persoonlijk ontwikkelplan. Jij krijgt een scala aan trainingen, denk aan trainingen ten behoeve van het opdoen van zelf kennis en gedragscompetenties, maar ook trainingen voor

Bekijk vacature »

Ervaren PHP Software Developer

Functieomschrijving Voor een toffe opdrachtgever in regio Breda zijn wij op zoek naar een medior PHP Developer met affiniteit met Laravel. Je komt te werken bij een uitdagende opdrachtgever met supergave klanten in een specifieke branche. Als PHP ontwikkelaar ben je samen met een vooruitstrevende team van 6 collega’s verantwoordelijk voor de ontwikkeling, beheer en het vernieuwen van informatiesystemen voor een specifieke branche. Je ondersteunt complexe uitdagingen van klanten. Vervolgens breng je hun wensen in kaart en vertaalt deze door naar maatwerk software. Affiniteit met Laravel is een pré. Om de klanten zo goed mogelijk te ondersteunen en snel in

Bekijk vacature »

Senior Airport Developer ( System engineer)

De functie Nice to know (you) De nieuwe A-pier wordt de duurzaamste van Schiphol. Als deze af is ligt er 4000 vierkante meter zonnepanelen op het dak. En de toiletten? Die spoelen door met regenwater. we gaan ervoor: het creëren van de meest duurzame en hoogwaardige luchthavens ter wereld. een toekomstbestendig en duurzaam Schiphol. Daar werken we elke dag hard aan in team Development & Sustainability. Jij bent regisseur, expert én aanjager van de ontwikkeling van Schiphol. Connecting your world Hoe maak je de ambities en doelstellingen van Schiphol concreet in een project? De waarde voor Schiphol naar eisen die

Bekijk vacature »

Medior/senior Fullstack developer

Functie Onder begeleiding van 3 accountmanagers waarvan er 1 binnen jouw expertise je aanspreekpunt zal zijn ga je aan de slag bij diverse opdrachtgevers. Hij of zij helpt je bij het vinden van een passende en uitdagende opdracht. Hierin houden ze uiteraard rekening met jouw situatie, ervaring en (technische) ambities. De opdrachten duren gemiddeld één tot 2 jaar. Hierdoor kun je je ook echt vastbijten in een project en als consultant impact maken. Naast de opdracht ben je regelmatig met je collega’s van de IT-afdeling om bijvoorbeeld onderlinge kennis te delen, of nieuwe trends te bespreken. Ook worden er regelmatig

Bekijk vacature »

Software Programmeur PHP - JAVA

Functie Wil jij bij een platte en informele organisatie werken? Lees dan snel verder! Voor een opdrachtgever in omgeving Boskoop dat zich gespecialiseerd heeft in het realiseren van veilige netwerkverbindingen zijn wij op zoek naar een leuke software developer ter versterking van het huidige team. Hoe kan jouw dag er straks uitzien? Je gaat technische klussen uitvoeren op locatie bij klanten.Je onderhoudt contact met de projectleider om er zeker van te zijn dat een projecten goed verlopen. Je gaat klanten ondersteunen op het gebied van geleverde software en webapplicaties. Je gaat software en webapplicaties ontwikkelen met behulp van de talen

Bekijk vacature »

Laravel / PHP developer

Functie omschrijving Wij zijn op zoek naar een Medior PHP / Laravel Developer voor een IT-consultancy in de omgeving van Hoofddorp! Ben jij op zoek naar een leuke nieuwe uitdaging binnen een veelzijdige werkomgeving? Lees dan snel verder! Binnen dit bedrijf werk je in een ontwikkelteam, waarin je zeer betrokken bent en meedenkt over softwareoplossingen. Binnen dit Team hou je je bezig met het aanpassen, verbeteren en vernieuwen van de logistieke oplossingen. Je zult je bezig houden met de volgende werkzaamheden: Je gaat aan de hand van de wensen van klanten software ontwikkelen; Je bent bij het gehele proces betrokken;

Bekijk vacature »

Applicatie ontwikkelaar

Functie omschrijving Zelfstandige applicatie ontwikkelaar gezocht voor familiair bedrijf in omgeving Barendrecht! Ben jij op zoek naar een nieuwe uitdaging en zoek jij een informele werkgever waar je zelfstandig kunt werken binnen een leuk IT team, lees dan snel verder want wie weet zijn wij op zoek naar jou! Binnen deze rol houdt jij je met het volgende bezig: Onderhouden en ontwikkelen van de IT systemen; Opzetten van Azure Cloud systemen, denk aan interfaces, hardware op de Cloud, webportalen of BI functies; Werken aan scripts binnen verschillende software applicaties, denk aan ERP en CAD; Ontwikkelen en implementeren van MS PowerApps

Bekijk vacature »

Fullstack developer - medior

Functie omschrijving Ben jij toe aan een nieuwe uitdaging en zou jij graag bij een platte maar informele organisatie willen werken? Voor een mooi softwarebedrijf in omgeving Gorinchem zijn wij op zoek naar versterking. Als Fullstack developer wordt je bij dit bedrijf onderdeel van de volledige ontwikkeling van requirement tot oplevering! Werkzaamheden Jouw focus ligt op de front end en alles wat daarbij komt kijken. Je gaat ontwerpen, ontwikkelen, testen en valideren. Je zult voornamelijk werken met React.js en Typescript. Maar ook Javascript, HTML en CSS komen aanbod. Daarnaast zal je ook regelmatig met de back end werken! Bedrijfsprofiel Onze

Bekijk vacature »

Fasttrack learning & development voor Java dev

Wat je gaat doen: Wij zoeken enthousiaste en ambitieuze junior en medior ontwikkelaars die toe zijn aan de volgende stap in hun carrière. Wij helpen je op je pad naar senior ontwikkelaar door ons fasttrack learning en development programma. Na een kort en intensief programma ga jij aan de slag bij klanten van DPA. Daarnaast krijg je veel ruimte om je te ontwikkelen als persoon en als specialist. De eerste maand gaan we aan de slag om je certificeringen te behalen waaronder OCP (Oracle Certified Professional). Daarnaast nemen we een deepdive in Spring Boot. Ook laten we je kennismaken met

Bekijk vacature »

Medior Java developer (fullstack)

Wat je gaat doen: Of beter nog, wat wil jij doen? Binnen DPA GEOS zijn we dan ook op zoek naar enthousiaste Java developers om ons development team te versterken. Als Java developer werk je in Agile/Scrum teams bij onze klanten en daarbij kun je eventueel ook andere ontwikkelaars begeleiden in het softwareontwikkelproces. Verder draag je positief bij aan de teamgeest binnen een projectteam en je kijkt verder dan je eigen rol. Je gaat software maken voor verschillende opdrachtgevers in jouw regio. Je bent een professional die het IT-vak serieus neemt en kwaliteit levert. Je leert snel vanwege je diepgaande

Bekijk vacature »

Medior Java developer (fullstack)

Wat je gaat doen: Of beter nog, wat wil jij doen? Binnen DPA GEOS zijn we dan ook op zoek naar enthousiaste Java developers om ons development team te versterken. Als Java developer werk je in Agile/Scrum teams bij onze klanten en daarbij kun je eventueel ook andere ontwikkelaars begeleiden in het softwareontwikkelproces. Verder draag je positief bij aan de teamgeest binnen een projectteam en je kijkt verder dan je eigen rol. Je gaat software maken voor verschillende opdrachtgevers in jouw regio. Je bent een professional die het IT-vak serieus neemt en kwaliteit levert. Je leert snel vanwege je diepgaande

Bekijk vacature »

Back-end PHP Software Developer - Juniorfunctie

Functieomschrijving Wij zijn op zoek naar een PHP Software Developer om ons team te versterken en mee te werken aan de ontwikkeling van eigen IOT-oplossingen. In deze functie ben je verantwoordelijk voor het bouwen van webapplicaties, apps en dashboards voor het uitlezen en managen van sensoren in machines. Je werkt nauw samen met een team van ontwikkelaars en engineers om de beste software-oplossingen te creëren. Jouw werkzaamheden zien er als volgt uit: Je bent in deze rol verantwoordelijk voor het ontwerpen, ontwikkelen en onderhouden van webapplicaties en softwaretoepassingen voor in-house ontwikkelde IOT oplossingen. Je werkt aan complexe databases en back-end

Bekijk vacature »

Senior Organisatieontwikkelaar

Als Organisatieontwikkelaar zorg je ervoor dat we in het magazijn van Coolblue altijd vooruit voetballen op het gebied Medewerker en Organisatie Ontwikkeling. Zo draag je bij aan een toekomstbestendig magazijn waar we klanten én medewerkers elke dag blijven verwonderen. Wat doe je als Senior Organisatieontwikkelaar bij Coolblue? Als Organisatieontwikkelaar werk je voor het magazijn van Coolblue. Je krijgt er energie van om continue te bouwen aan een toekomstbestendige organisatie. Dat doe je samen met 17 collega's in het HR-team, ieder met een eigen specialisme. Je werkt graag zelfstandig en je weet snel je weg te vinden als verandermanager. Ook ben

Bekijk vacature »

C# Developer

Dit ga je doen Je gaat aan de slag in het websites team of portals team waarin je je bezighoudt met concept & design, implementatie en ook een stukje bugfixing en onderhoud; Je werkt met je team volgens de Scrum werkwijze; Zo adviseer je ook de PO & Scrum Master over de technische architectuur, koppelingen en integratie met externe systemen en API’s; Je blijft op de hoogte van de laatste ontwikkelingen en trends op het gebied van C# / .NET en deelt deze kennis binnen de organisatie. Hier ga je werken Onze klant is een internationale organisatie gevestigd in de

Bekijk vacature »

Full Stack C#.NET developer

Functieomschrijving Wij zijn op zoek naar een gepassioneerde Full Stack C#.NET Software Developer. Als Software Developer ben je verantwoordelijk voor het ontwikkelen van webapplicaties, apps en dashboards voor de eigen IOT-oplossingen. Je werkt samen met andere ontwikkelaars en engineers om de sensoren in machines uit te lezen en deze data om te zetten in management informatie voor jullie klanten. Taken en verantwoordelijkheden: Ontwikkelen en onderhouden van webapplicaties, apps en dashboards voor de eigen IOT-oplossingen. Testen en valideren van de ontwikkelde software. Actief deelnemen aan code reviews en bijdragen aan het verbeteren van de kwaliteit van de software. Je gaat aan

Bekijk vacature »

Pagina: 1 2 volgende »

Mohamed nvt

Mohamed nvt

27/08/2017 21:23:13
Quote Anchor link
Hallo allemaal,

Zoals het onderwerp aangeeft, wil ik graag dat de autocomplete de lijst met gegevens verticaal weergeeft i.p.v. horizontaal zoals dat nu gebeurt.

Momenteel gebruik ik jQuery autocomplete op 2 input field op hetzelfde pagina en later worden het 3 input field.
De autocomplete werkt prima, maar de weergave wil ik verticaal hebben.

De volgende versie van autocomplete gebruik ik
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<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>


In het header pagina heb ik dus staan:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
<script>
  $(function() {
    $( "#medicinename" ).autocomplete({
      source: 'includes/search_medicinename.php'
    });
  });
  $(function() {
    $( "#genericname" ).autocomplete({
      source: 'includes/search_genericname.php'
    });
  });
 </script>


Ik heb reeds gezocht op het net en kwam veel zogenaamde oplossingen tegen, maar dit werkt dus niet.
Daarbij wordt aangegeven dat ik d.m.v. CSS het probleem kan oplossen en ik heb de volgende code gebruikt in mijn CSS-code en helaas biedt dat geen soelas:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
.ui-autocomplete {
    max-height: 300px;
    overflow-y: auto;   /* prevent horizontal scrollbar */
    overflow-x: hidden; /* add padding to account for vertical scrollbar */
}

Hopelijk kan iemand mij helpen.

Toevoeging op 28/08/2017 10:36:43:

Update 1:
Ik ben verder gaan zoeken voor een oplossing voor dit probleem, want ik wil het heel graag oplossen ;-)
Ik zie dat bij autocomplete een css-link hoort, nl:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

Wanneer ik dit link verwijder in mijn header.php pagina en aan mijn eigen CSS-bestand voeg ik dan:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
.ui-autocomplete {
    max-height: 300px;
    overflow-y: auto;   /* prevent horizontal scrollbar */
    overflow-x: hidden; /* add padding to account for vertical scrollbar */
}

Dan gebeurt er nog steeds niet veel. Sterker nog de weergave van autocomplete ziet er nog vreemder uit zonder het bijbehorende css link. En het lijkt erop dat autocomplete mijn eigen CSS bestand negeert, terwijl de volgorde goed staat.
Er staat nu in mijn header.php pagina:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<link href="../includes/main.css" rel="stylesheet" type="text/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>
  <script>
  $(function() {
    $( "#medicinename" ).autocomplete({
      source: 'includes/search_medicinename.php'
    });
  });
  $(function() {
    $( "#genericname" ).autocomplete({
      source: 'includes/search_genericname.php'
    });
  });
 </script>

Er wordt eerst mijn CSS-bestand geladen en daarna komen de autocomplete bestanden. En ik heb gezien in hun eigen CSS bestand een CSS-class voor .ui-autocomplete met de volgende eigenschappen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
.ui-autocomplete {
    position: absolute;
    top: 0;
    left: 0;
    cursor: default;
}

Mijn vraag is dus hoe kan ik ervoor zorgen dat autocomplete de weergave van gegevens verticaal laat zien ipv horizontaal...
 
PHP hulp

PHP hulp

28/03/2024 15:42:38
 
Mohamed nvt

Mohamed nvt

29/08/2017 09:44:04
Quote Anchor link
Het is erg rustig in dit deel van het forum, want tot op het heden heb ik geen reactie op mijn topic ontvangen. Ik vraag me af of mijn probleem zo complex is?
En ik vraag me af welke versie van Jquery autocomplete heb ik nodig voor enkel autocomplete? Ik heb reeds op hun website gekeken, maar om eerlijk te zijn door de bomen zie ik het boos niet meer...
 
- Ariën  -
Beheerder

- Ariën -

29/08/2017 09:57:40
Quote Anchor link
Ikzelf gebruik jQueryUI die een autocomplete aan boord heeft.
 
E vH

E vH

29/08/2017 10:00:25
Quote Anchor link
Laat ik dan maar als "eerste" reageren. Ships, Ariën was me net voor.

Je geeft heel veel input, maar eigenlijk geef je ook geen input.
Wat is de output van "source: 'includes/search_medicinename.php'"

Je gaat namelijk van de hak op de tak, terwijl het slechts een CSS weergave is ( als je het aan mij vraagt ).

Geef eens een concreter voorbeeld, heb je iets online staan?
Gewijzigd op 29/08/2017 10:00:46 door E vH
 
Mohamed nvt

Mohamed nvt

29/08/2017 10:28:39
Quote Anchor link
Hallo Elmar vH,

Je kunt het live zien, wat ik allemaal bedoel dat de weergave van de autocomplete lijst niet klopt.
URL: hawarco.co
credentials: [email protected]
test1
Laat je weten als je het heb gecheckt?

Toevoeging op 29/08/2017 10:34:48:

Hallo - Ariën -,

Ik wil ook jQueryUI gebruiken en welke versie kan ik het beste gebruiken voor auto complete?
En heb ik alle componenten nodig, die eronder worden aangegeven op http://jqueryui.com/download/#! ?
En als laatste vraag; volgens mij is het beter om de bestanden van jQueryUI op eigen hostingserver te plaatsen i.p.v. te linken naar hun bestanden, toch?
 
- Ariën  -
Beheerder

- Ariën -

29/08/2017 12:29:41
Quote Anchor link
Het ligt eraan welke onderdelen je wilt gebruiken. Maar het kan ook geen kwaad om alles te kiezen. Mocht je ooit nog eens wat uit de 'toolbox' willen zoeken, dan is het in handbereik.
 
Mohamed nvt

Mohamed nvt

29/08/2017 13:03:14
Quote Anchor link
Oke, het is mij nu duidelijk wat ik moet kiezen voor autocomplete. En daarom heb ik besloten om versie 1.12.1 te downloaden met als widget autocomoplete. En voor theme zal ik base kiezen.
Tnx! en volgens mij is het toch beter om deze bestanden zelf te hosten i.p.v. te linken naar hun bestand toch vanuit je pagina's? Dit lijkt me beter voor o.a. meer controle.
 
- Ariën  -
Beheerder

- Ariën -

29/08/2017 13:06:40
Quote Anchor link
Ik raad dat wel aan.
 
Mohamed nvt

Mohamed nvt

29/08/2017 13:39:52
Quote Anchor link
Top!
Ik vraag me of ik autocomplete opnieuw zal implementeren of wachten op feedback van Elmar vH...
 
- Ariën  -
Beheerder

- Ariën -

29/08/2017 14:01:34
Quote Anchor link
Als ik je autocomplete bekijk (een JSfiddle werkt wat makkelijker dan een login die straks niet meer werkt), dan zie ik dus een soort matrix met de items. Is dat wat je bedoelde, en is het gelukt?
 
Mohamed nvt

Mohamed nvt

29/08/2017 14:25:49
Quote Anchor link
Print screen: http://hawarco.co/img/print%20screen.png
Dit is wat ik precies krijg wanneer autocomplete werkt bij mij.
Het resultaat wordt niet verticaal weergegeven, maar als een texarea box dat naar rechts schuift naarmate het voller wordt. En ik wil juist dat het resultaat als een lijst wordt weergegeven en dat je kan scrollen naar beneden door de resultaten...
Snap je nu wat ik bedoel?
Gewijzigd op 29/08/2017 14:30:55 door - Ariën -
 
- Ariën  -
Beheerder

- Ariën -

29/08/2017 14:28:58
Quote Anchor link
Als je wilt scrollen, dan moet je toch de standaard manier gebruiken?
 
Mohamed nvt

Mohamed nvt

29/08/2017 14:29:25
Quote Anchor link
Bizar genoeg kan ik mijn vorig bericht niet meer wijzigen, maar de link:

http://hawarco.co/img/print%20screen.png
 
- Ariën  -
Beheerder

- Ariën -

29/08/2017 14:30:42
Quote Anchor link
Klopt, die link wou ik ook fixxen. En dan blokkeert je bericht.
Maar je wilt dus gewoon dat er onderaan je inputbox een lijst komt te staan? Dus het standaard gedrag?
Gewijzigd op 29/08/2017 14:32:09 door - Ariën -
 
Mohamed nvt

Mohamed nvt

29/08/2017 14:41:15
Quote Anchor link
Jah eigenlijk wel. Dus standaard gedrag ;-)
En niet perse onderaan de inputbox, maar gewoon in hetzelfde inputbox of is dat moeilijk te realiseren?
 
- Ariën  -
Beheerder

- Ariën -

29/08/2017 14:45:05
Quote Anchor link
Je gaf toch al aan dat je de autocomplete in jQuery(UI) gebruikte. Die werkt standaard toch al zo.
Dan hoef je alleen je gemaakte wijzigingen terug te draaien.
 
Mohamed nvt

Mohamed nvt

29/08/2017 14:48:52
Quote Anchor link
Volgens mij gebruik ik ook jQueryUI, maar weet niet zeker helemaal.
En btw; ik heb geen wijzigingen aangebracht.
En als het reeds jQueryUI is, dan werkt het blijkbaar niet standaard bij mij, zie het plaatje of test even zelf met de eerder gemelde credentials..

In mijn header.php heb ik de volgende code staan:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>
  <script>
  $(function() {
    $( "#medicinename" ).autocomplete({
      source: 'includes/search_medicinename.php'
    });
  });
  $(function() {
    $( "#genericname" ).autocomplete({
      source: 'includes/search_genericname.php'
    });
  });
 </script>
Gewijzigd op 29/08/2017 15:03:03 door Mohamed nvt
 
- Ariën  -
Beheerder

- Ariën -

29/08/2017 15:03:18
Quote Anchor link
Als je de CSS-bestanden als eerste inlaadt, dan zou je gewoon het standaardgedrag moeten hebben.
Misschien dat je nu iets hebt dat in de lijn van CSS dit gedrag nu overerft?
 
Mohamed nvt

Mohamed nvt

29/08/2017 15:27:36
Quote Anchor link
De volgorde van CSS bestanden heb ik nu veranderd naar:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
<link href="../includes/main.css" rel="stylesheet" type="text/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>
  <script>
  $(function() {
    $( "#medicinename" ).autocomplete({
      source: 'includes/search_medicinename.php'
    });
  });
  $(function() {
    $( "#genericname" ).autocomplete({
      source: 'includes/search_genericname.php'
    });
  });
 </script>

Zoals je ziet, wordt css jQueryUI CSS geladen en daarna komt mijn eigen CSS, maar dit hielp ook niet helaas.
En mijn eigen css ziet als volgt uit:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
@import url("reset.css");
body {
    margin-top: 0px
    }
#wrapper {
    border:solid 1px;
    border-color:#000000;
    width: 90%;
    margin: 0 auto;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
#header {
    height: 250px;
    padding: 3px;
    background-image: url(../img/bgheader3.jpg);
    background-repeat: no-repeat;
}
#content {
    
    
}
#navigation {
    float: left;
    height: 51px;
    width: 100%;
    background: #FFCC33;
}
#nav{
    float: left;
    }
#search {
    float: left;
    width: 20%;
    padding-top: 25px;
    }
.search{
    display:inline-block;
    }
#profile{
    float: right;
    width: 20%;
    height: 50px;
}
.login {
    text-align: right;
    padding-right: 10px;
    margin: 0px;
}
ul {
    list-style: none;
    }
    ul li {
    float: left;
    padding-right: 1px;
    position: relative;
    }
    ul a {
    display: table-cell;
    vertical-align: middle;
    width: 150px;
    height: 50px;
    text-align: center;
    background: #69C;
    color: #fff;
    text-decoration: none;
    }
    
    ul a:hover {
    background: #09C;
    font-weight: bold;
    text-decoration: underline;
    width:150px;
    }
    li > ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    
    }
    li:hover > ul {
    display: block;
    opacity: 0.8;
    }
    li > ul li {
    padding: 0;
    padding-top: 1px;
    }
    li > ul li > ul {
    left: 100%;
    top: 0px;
    padding-left: 1px;
    }
    li > ul li > ul li {
    width: 100px;
    }
    li:hover > a {
    background: #09C; }
    /*
      1. Get & set the width of your nav (inc. 1px padding-left)
      2. Set the margin to auto (automatically centering the div to the parent, in this case, <body>)
      3. Set overflow to visible (not needed, just a precaution to stop scrolling)
    */
    #nav { width: 50%; overflow: visible; }
#second-content{
    clear: both;
    border: dashed 1px;
    }
.button{
    background-color:#4CAF50;
    border: none;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 24px;
    margin-top: 20px;
    margin-left: 150px;
    margin-bottom: 20px;
    pointer-events: none;
    color: white;
    border-radius: 4px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.buttontwo{
    float: right;
    background-color:#4CAF50;
    border: none;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin-top: 20px;
    margin-left: 150px;
    margin-bottom: 20px;
    pointer-events: none;
    color: white;
    border-radius: 4px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.monthviewtekst, .expiretekst {
    margin-left: 45px;
    margin-top: 45px;
    margin-bottom: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    
}
.expireform{
    margin-left: 45px;
    margin-bottom: 20px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
}
fieldset {
    width: 53%;
}
legend {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 20px;
    background-color:#4CAF50;
    color: #ffffff;
    border: 1px solid #ffffff;
}
label {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding-left: 25px;
}
table {
    border-collapse: collapse;
    margin-bottom: 10px;
    margin-top: 10px;
    width: 92%;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    margin-left: auto;
    margin-right: auto;
}
caption {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    margin-bottom: 10px;
}
tr:nth-child(even) {
    background-color: #f2f2f2;
}
table, td {
    border: solid thin #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}
td {
    border-bottom: none;
    border-left: none;
    border-right: solid 1px grey;
    text-align: left;
    padding: 8px;
}
th {
    border: solid 1px #AFAFAF;
    text-align: left;
    height: 40px;
    background-color: #4CAF50;
    color: #ffffff;
    width: 5%;
    text-align: left;
    padding: 8px;
}
.monthtable, .expiretable{
    border-collapse: separate;
    border-spacing: 0px;
    border-bottom-right-radius: 7px;
    border-bottom-left-radius: 7px;
}
.monthtable {
    
}
#footer {
    clear:both;
    border-top:solid 1px;
    height: 51px;
}
.footertekst {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    text-align: center;
    padding-top: 25px;
}

Eigenlijk niet veel bijzonder...

Toevoeging op 29/08/2017 20:01:59:

Hallo - Ariën -,

Ik heb jQueryUI gedownload met autocomplete widget, en heb vervolgens uitgepakt:

URL: http://hawarco.co/img/print_screen.png
En nu vraag ik me af welke bestanden ik moet allemaal uploaden naar het hostingsbedrijf voor de werking van autocomplete?
En nog belangrijker: naar welke bestanden moet ik in mijn header.php precies naar linken?
Op http://jqueryui.com/autocomplete/ staat er een voorbeeld en daarin wordt naar 3 bestanden verwijzen, nl: 1x jQueryUI.js, 1x jQueryUI.CSS en 1x jQuery.js en ik heb nu alleen maar jQueryUI.js of jQueryI.CSS, nadat ik het heb uitgepakt...
Gewijzigd op 29/08/2017 20:21:45 door Mohamed nvt
 
- Ariën  -
Beheerder

- Ariën -

29/08/2017 21:28:31
Quote Anchor link
Je hebt ook jQuery nodig. Omdat jQueryUI een uitbreiding erop is.
 
Mohamed nvt

Mohamed nvt

29/08/2017 21:36:30
Quote Anchor link
Hallo - Ariën -,

Het is mij gelukt om jQueryUI - autocomplete vanaf scratch te maken en het werkt. Helaas loop ik nog steeds tegen hetzelfde probleem aan, nl dat de resultaten niet scrolable worden weergeven.
De oorzaak heb ik ook kunnen achterhalen en dat is nl mijn eigen CSS-style bestand. Wanneer ik dit uitschakel, dan worden de resultaten van autocomplete wel scrolable weergeven.

Het insertformulier, waar de input field gebruik maakt van autocomplete, bevat een table. En, ik heb alle CSS regels voor tabel uitgeschakeld, maar helaas het hielp niet.

Zou je of iemand een kijkje willen werpen op mijn eigen CSS-bestand hierboven om te kijken welke regels in conflict zijn met autocomplete CSS.
Overigens, de volgorde heb ik als volgt:
Autocomplete CSS
Wat extra eigenschappen van autocomplete
Mijn eigen CSS
Helaas helpt dit allemaal niet...
 

Pagina: 1 2 volgende »



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.