Autocomplete lijst verticaal weergeven i.p.v. horizontaal

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Top Low-Code Developer Gezocht!

Bedrijfsomschrijving Unieke Kansen, Uitstekende Arbeidsvoorwaarden & Inspirerend Team Wij zijn een toonaangevende, internationale organisatie die de toekomst van technologie vormgeeft door het creëren van innovatieve en baanbrekende oplossingen. Ons succes is gebaseerd op een hecht en gepassioneerd team van professionals die altijd streven naar het overtreffen van verwachtingen. Als jij deel wilt uitmaken van een dynamische, vooruitstrevende en inspirerende werkomgeving, dan is dit de perfecte kans voor jou! Functieomschrijving Als Low-Code Developer ben je een cruciaal onderdeel van ons team. Je werkt samen met collega's uit verschillende disciplines om geavanceerde applicaties te ontwikkelen en te optimaliseren met behulp van Low-code

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 »

Software Developer (Junior functie)

Functieomschrijving Wij zijn op zoek naar een Software Developer! Sta jij in de startblokken om je carrière te beginnen en kan je niet wachten om toffe software te gaan ontwikkelen? Kortom, ben je onlangs afgestudeerd of sta je op het punt om je papiertje te behalen? Voor een IT dienstverlener dat gespecialiseerd is in Microsoft technologie zijn wij op zoek naar C#.NET Developers. Het bedrijf heeft meerdere klanten in regio Utrecht waar je permanent kan komen te werken. Kom je liever te werken bij een klein softwarebedrijf of bij een groot consultancy bureau? Dat is helemaal aan jou de keuze!

Bekijk vacature »

Software Developer

Functie omschrijving Veel begeleiding en de kans om je verder te ontwikkelen als software developer. Dat kunnen wij jou bieden bij deelname aan deze leuke traineeship. Je krijgt een mentor toegewezen die jou alle kneepjes van het vak leert. Heb jij al wat ervaring als software developer? Daar worden wij heel blij van! Lees snel verder! Bedrijfsprofiel Als software developer neem je deel aan een trainings programma in de omgeving van Haarlem waar je persoonlijk wordt begeleidt, zodat je alle kneepjes van het vak leert. Aan de hand van jouw kennis en ervaring krijg je een persoonlijk opleidingstraject. Je gaat

Bekijk vacature »

PHP Developer gezocht!

Functie omschrijving Wij zijn op zoek naar een PHP Developer! Ben jij op zoek naar een nieuwe uitdaging? Lees dan snel verder! Voor een organisatie in de regio Utrecht die zich bezighoud met het verbeteren van de medicatieveiligheid zoeken wij een Software Developer. In deze functie zijn wij op zoek naar een slimme en enthousiaste Developer die interesse heeft in farmacie, logistiek en ICT. Daarnaast beschik je over een goed analytisch vermogen en ben je van nature gestructureerd en resultaatgericht. Je moet in deze functie daadkrachtig, flexibel en communicatief goed zijn. Je verantwoordelijkheden bestaan uit: Object georiënteerd programmeren; Werken in

Bekijk vacature »

Software Ontwikkelaar .NET te Zaandam

Bedrijfsomschrijving Je komt hier terecht bij een door-en-door softwarebedrijf, waarbinnen meerdere SaaS pakketten worden ontwikkelt voor diverse sectoren. Hierbij kun je denken aan bijvoorbeeld de logistieke en medische branche. Deze organisatie kenmerkt zich door de hoge mate van complexiteit in de applicaties, wat betekent dat jij je hier niet zal gaan vervelen. Integendeel: Jij gaat hier elke dag ontzettend veel leren en je in razend tempo ontwikkelen als C# .Net Developer met focus op back-end. Het team bestaat uit ongeveer 20 personen personen, waarvan het grootste deel zich richt op software development. De sfeer is informeel en professioneel. De producten

Bekijk vacature »

PHP Developer (junior functie)

Functie omschrijving Wij zijn op zoek naar een PHP Developer! Ben jij een starter en wil je werken bij een jong en leuk bedrijf? Lees dan verder! Wij zijn op zoek naar een PHP Developer binnen een junior functie. Binnen dit bedrijf gaat het om persoonlijke aandacht en ontwikkeling! Je komt te werken voor een leuk communicatiebureau die alles op het gebied van online en offline communicatie doet. Dit doen zij voor verschillende branches, waardoor je aan diverse soorten projecten mag werken, dit maakt deze baan erg leuk! Daarbij werk je aan een door hun zelf ontwikkeld framework welke goed

Bekijk vacature »

Senior .NET developer

Functie Als Senior .NET ontwikkelaar ga jij aan de slag in ons Research & development team. Ons team bestaat uit 17 collega’s! Wij zijn momenteel druk bezig met het opzetten van een geheel nieuwe architectuur voor een nieuw product. Hierbij maken wij o.a. gebruik van VS2022 en .NET 6.0. Jouw functie is dan ook voornamelijk backend georiënteerd bij ons. Aangezien wij meetapparatuur ontwikkelen voor de chemische industrie is het ook erg belangrijk om kwalitatief hoogwaardige software te ontwikkelen voor de besturing hiervan. Verder ben jij verantwoordelijk voor het designen, implementeren en testen van nieuwe features. Ook zorg jij voor toekomstbestendige

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 »

.NET developer

Functie Als .NET developer werk jij samen in een multidisciplinair ontwikkel team met 1-2 Senior .NET developers, twee front-end developers, Data Scientists en één UX designer. Als team werken jullie aan het ontwikkelen van een Cloud based applicatie en aan het stabieler maken van deze applicatie. Ook unit testing gaat erg belangrijk worden in jouw nieuwe functie. Samen met de Senior .NET ontwikkelaar wordt jij verantwoordelijk voor het ontwikkelen van de API. Jullie werken met veel data en incidenteel komen er ook data vraagstukken en zullen er wat queries gedraaid moeten worden. Dit betekend dat jij veel gaat werken met

Bekijk vacature »

C# Developer Research and Development - Delft

Vacature details Vakgebied: Software/IT Opleiding: Medior Werklocatie: Delft Vacature ID: 6307 Introductie C# Developer Research and Development - Delft - Onze klant is één van de meest innovatieve bedrijven in de region van Delft. Op dit moment zijn ze voor het innovatie centrum. In het innovatie centrum wordt gewerkt aan de nieuwste technieken voor navigatie software. R&D / C# / Pattern Recognition / Algorithms / 3d Data / DotNET Functieomschrijving Als C# Developer kom je te werken in een innovatief scrumteam. We ontwikkelen en door ontwikkelen de nieuwste technieken op het gebied van navigatie software. Deze software wordt onder andere

Bekijk vacature »

Oracle APEX Ontwikkelaar (3.500-6.000 euro)

Bedrijfsomschrijving Ben jij een getalenteerde Oracle APEX ontwikkelaar met minimaal één jaar ervaring in het ontwikkelen van Oracle APEX-applicaties? Ben je gepassioneerd over het ontwikkelen van bedrijfskritische oplossingen en wil je werken bij een toonaangevend consultancybedrijf? Dan zijn wij op zoek naar jou! Deze organisatie beschikt over zowel inhouse als externe projecten, maar bovenal over een sterk team en netwerk van opdrachten waardoor jij jezelf verder kunt ontwikkelen. Het team bestaat uit een aantal junior en medior developers, maar vooral uit senioren. De business unit managers binnen het team zijn mensen die hun vak verstaan en zelf als Oracle APEX

Bekijk vacature »

Medior front-end developer gezocht (€3.300 -

Functie Wat ga je doen? Jij als front-end developer gaat werken binnen de teams van/voor onze klant. Je werkt in een team met starters en ervaren ontwikkelaars met allemaal 1 overeenkomst; passie voor het vak. Maak je een fout? Geen probleem, leer ervan en ga dan weer door. Door de variëteit aan werk kun je in verschillende omgevingen een kijkje nemen en jezelf dus snel ontwikkelen. Wat hebben we jou te bieden? • Uitdagende projecten bij mooie klanten (bij jou in de buurt, of binnenkort intern vanuit ons kantoor!) • Een jonge organisatie met talentvolle collega’s • Veel ruimte voor

Bekijk vacature »

.NET Developer Shared Driving

Bedrijfsomschrijving Onze klant richt zich op het toegankelijker maken van steden, een fantastisch mooi streven. Hoe ze dat doen? Met eigen ontwikkelde software, waarmee vervoersmiddelen gedeeld kunnen worden. Deze inspirerende werkgever maakt een maatschappelijke impact en dat doen ze nu al zo'n 25 jaar! Het bedrijf is gevestigd in het centrum van Rotterdam en kent ongeveer zo'n 90 medewerkers. Het personeel is lekker gewoon gebleven! Iedereen kleedt zich zoals hij of zij dat zou willen en de sfeer is er erg fijn. Een leuke werkgever om voor te werken, en bovendien zijn er voor jou als Software Developer veel mooie

Bekijk vacature »

Java Front-end Developer

Dit ga je doen Ontwikkelen van nieuwe functionaliteiten in Java met tools als Springboot, MS SQL Server (T-SQL) en JavaScript; Het onderhouden van de (web-)applicaties binnen een complexe omgeving; Werken aan de migratie van een monolithisch systeem naar een architectuur gebaseerd op Kubernetes; Code reviews met collega's en actieve kennisuitdelingsessies voeren; Het uitvoeren van unit- en systeemtests Experimenteren met nieuwe tools en technieken. Hier ga je werken Binnen deze organisatie kom je te werken op de afdeling die gegevens verzamelt vanuit het hele land. Denk hierbij aan vertrouwelijke persoonsgegevens. Het team verwerkt al deze data met als doel het waarborgen

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

29/03/2024 10:28:12
 
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.