Autocomplete lijst verticaal weergeven i.p.v. horizontaal

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ontwikkelaar / Identity & Access Management

Dit ga je doen Als Identity & Access Management Ontwikkelaar zorg jij er voor dat studenten, medewerkers en docenten de juiste benodigdheden op het juiste moment kunnen gebruiken; Het juist opslaan van onderzoeksdata en het openbaar beschikbaar stellen van publicaties (Open Access); Studenten, collega's en wetenschappers ondersteunen; Agile en Scrum werken; Technisch Applicatiebeheer; Ontwikkelen in One Identity Manager en VB.NET. Hier ga je werken Als Ontwikkelaar kom je terecht in een hecht team die zich richt op wetenschappelijke informatie en ICT. Jij bent degene die er voor zorgt dat alle informatie, uit diverse onderzoeken, bij de juiste personen terecht komt.

Bekijk vacature »

Senior Front-End Developer

As a Senior Front-end Developer you maintain the balance between creativity and functionality for our webshop, and you coach your fellow developers. How do I become a Senior Front-End Developer at Coolblue? As a Front-end Developer you work on the user-friendliness of our webshop for millions of customers. You enjoy working with the UX Designer to pick up stories. You get energy from coming up with creative solutions and are happy to present this within the team. You are also proud of your work and welcome all feedback. Would you also like to become a Senior Front-End Developer at Coolblue?

Bekijk vacature »

Traineeship Full Stack Java developer

Dit ga je doen Start jij op 9 januari bij de Experis Academy dan kickstart jij jouw IT-carrière! We leiden je op tot een gewilde Full Stack Java Developer met alle kennis en vaardigheden die nodig zijn om de arbeidsmarkt te betreden. Wat kun je verwachten, hoe zit een dag in het leven van een Trainee eruit? Periode 1 Als Full Stack Java Developer Trainee volg je vanuit huis een op maat gemaakte onlinetraining die in het Engels wordt gegeven. De tijd die je kwijt bent aan het volgen van de training kun je vergelijken met een fulltime werkweek. In

Bekijk vacature »

.NET ontwikkelaar / Registratiesystemen / Privacy

Dit ga je doen Maken van ontwerpen en ontwikkelen van (web)applicaties; Bouwen van nieuwe functionaliteiten; Maken van koppelingen met databases en systemen; Maken van UI en websites; Oplossen van bugs. Hier ga je werken Onze relatie is een organisatie die zich in een niche markt bevindt. Het is een gecompliceerde business omdat men veel te maken heeft met (veranderende) wet- en regelgeving. Heel veel (grote) klanten maken gebruik van hun software, zoals de Politie, diverse Ministeries, gemeenten, midden-klein bedrijven etc. Dagelijks verwerkt hun bezoekersregistratiesysteem circa 31.000 bezoeken. Ze hebben de bewuste keuze gemaakt om alles (hardware en software) in eigen

Bekijk vacature »

Senior PHP developer

Functie De SaaS-applicatie wordt volledig ontwikkeld in PHP en Symfony. De module bestaat uit een stuk informatie verrijking en intelligentie wat resulteert in een medische check. De logica wordt daarom in de code geïntrigeerd. Je bent onder andere bezig met complexe databases waar meer dan 80.000 medicijnen op verschillende niveaus in staan, die maandelijks worden geactualiseerd. Daarnaast zijn ze bezig met de refactoring van de module, er is al veel gedaan, maar nog niet alles. Als Senior PHP developer wordt er een hoge mate van zelfstandigheid verwacht, maar ook dat je goed opereert in een team waar kennis wordt gedeeld

Bekijk vacature »

Backend Developer PHP JavaScript / Lavarel / 3.200

Samengevat: Wij bouwen weboplossingen. Ben jij een enthousiaste Backend Developer? Heb jij ervaring met MySQL? Vaste baan: Backend Developer PHP JavaScript SQL 3.200 - 4.300 Backend Developer Samen met de klant ontwikkelen wij de mooiste websites, die makkelijk vindbaar zijn. Zij werken voor MKB bedrijven en het grootbedrijf. Zij doen omvangrijke projecten die we bij deze werkgever op kantoor realiseren (geen detachering). Zij werken met state-of-the-art technologie en lopen daarin voorop. Wil jij de diepte in en veel leren, dan is deze baan geknipt voor jou. Zij werken voor grote klanten. Zij doen omvangrijke projecten die we bij deze werkgever

Bekijk vacature »

Web Developer

Dit ga je doen Je komt te werken in een samengesteld projectteam bestaande uit collega developers, testers, een devops engineer, scrum master/ projectleider, een product owner en marketing communicatie/ e-commerce specialisten. In totaal bestaat het team uit ongeveer 8 personen, waarbij je nauw gaat samenwerken met 1 collega developer op de locatie in regio Eindhoven. De rest van het team is gevestigd in het buitenland. Samen met je team ben je verantwoordelijk voor de doorontwikkeling van de branded website en de onlline shops die hieraan gekoppeld zijn (Magento2/Drupal gebaseerd). Het betreft een complexe omgeving met veel maatwerk aanpassingen en koppelingen

Bekijk vacature »

.NET developer

Functie Als senior .NET ontwikkelaar en aankomend lead developer ben jij in één van de drie development teams verantwoordelijk voor het volgende: • Jij hebt een oogpunt op modernisering en bent verantwoordelijk voor de technische staat en architectuur van de applicatie; • Jij bent verantwoordelijk voor het reviewen van de technische haalbaarheid van verschillende onderwerpen; • Jij bent verantwoordelijk voor een goede aansluiting binnen het multidisciplinaire team en de bijbehorende taken; • Jij bent verantwoordelijk voor het aandragen van verbetervoorstellen en ontwikkelstandaarden in zowel de techniek als architectuur; • Jij bent meewerkend voorman en ondersteunt en coacht jouw team op

Bekijk vacature »

Email Front-End Developer

Ben jij de Creatieve Front-ender die de mooiste mails voor Coolblue binnen no time kan bouwen? Wat doe je als Email Front-End Developer bij Coolblue? Droom jij in HTML en CSS? Weet jij als geen ander een ambitieus email design om te bouwen naar de werkelijke email? Zwem jij graag in je code om bestaande templates net weer een beetje beter te maken? Weet jij alles over Email Development? Dan zoeken wij jou! Ook Email Front-end Developer worden bij Coolblue? Lees hieronder of het bij je past. Dit vind je leuk om te doen Samen met een dedicated Email Development

Bekijk vacature »

Integration Developer

Functieomschrijving As integration developer at Randstad Groep Nederland IT you play an integral role in innovating and optimising our processes and way of working. As we continue to move towards a more internationally connected tech environment and build new global platforms, our integration team continues to grow. You will join the APK team (Applicatie Koppelingen), consisting of business analysts, developers, a product owner and scrum master. Together you are responsible for a fundamental aspect of our applications, provinding the basis for our other development teams. As integrations developer you work in an agile way, and are responsible for the continued

Bekijk vacature »

Mobile developer (iOS)

Functie Het komende jaar staat in teken van het vernieuwen van ons platform. We willen onze klanten nog beter helpen en het nóg beter in kaart brengen van de beste deals. Voor deze functie zijn we op zoek naar zowel een Android developer als een iOS developer. We hebben ervoor gekozen om een junior tot medior functie uit te zetten, omdat we kunnen garanderen dat we je voldoende begeleiding kunnen bieden. Het IT-team bestaat uit een gevarieerd team. Zowel man als vrouw, jong en oud. We zoeken een toevoeging in het team die net zoals ons een techneut in hart

Bekijk vacature »

Junior .NET developer

Functie Ons programma is voor afgestudeerde enthousiastelingen die het als een uitdaging zien om met een klein dynamisch team bij de grootste bedrijven van Nederland aan de slag te gaan. Tijdens jouw dienstverband word jij begeleid door een talent manager. Het ontwikkelen van jouw talent staat hierbij centraal. Het programma doorloop je met een team van circa 8 Mede- trainees. De eerste maand start je met een fulltime inhouse opleiding. Deze staat geheel in het teken van de werkzaamheden die jij verder in het programma zult uitvoeren. Na deze opleidingsmaand ga je aan de slag in een dynamische omgeving bij

Bekijk vacature »

C# .NET Core Ontwikkelaar

In het kort Als C# .NET Core ontwikkelaar ga je binnen onze business unit Transport en Logistiek aan de slag complexe maatwerk software voor bedrijf kritische systemen binnen de technische automatisering. Denk bijvoorbeeld een IoT-oplossing voor de logistieke sector waarbij we van ruim 200.000 machines de telemetrie en events verwerken. We zijn actief in de distributielogistiek, havenlogistiek en productielogistiek. Naast C# en .NET Core maken we ook gebruik van Azure technologie. En als trotse Microsoft Gold Partner leren we graag van en met jou. Wil jij jezelf blijven ontwikkelen binnen de technische automatisering met .NET, dan gaan we deze uitdaging

Bekijk vacature »

Front End Developer / React / Vue

Dit ga je doen Meewerken aan de implementaties en ontwikkeling van nieuwe functionaliteiten van de webapplicaties; Ontwikkelen met o.a. React en Vue en HTML/CSS, ook krijg je in verband met de samenwerking ook affiniteit met de backend Ruby on Rails; Ontwikkeling aan de front end voor de koppelingen tussen de diverse systemen; Ontwerpen van interfaces en een bijdrage leveren aan de gebruikerservaring; Zorgdragen voor hoge kwaliteit van code en jezelf (en anderen) blijven verbeteren; Als Senior Front End Developer begeleid je zelf ook FE-development projecten, hierin leid je de projecten en pak jij het initiatief op (bv integratieprojecten). Hier ga

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 »

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

02/10/2022 03:22:42
 
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.
 
Elmar vH

Elmar 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 Elmar 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: info@nergiz.nl
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.