Autocomplete lijst verticaal weergeven i.p.v. horizontaal

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ervaren .NET C# ontwikkelaar, inhouse, complex maa

Ben je als ervaren ontwikkelaar op zoek naar een analytische omgeving? Waar hoogopgeleiden en ervaren collega’s jouw kennis naar een hoger niveau kunnen tillen? Waar je met een leuk team samen aan innovatieve producten werkt? Dan zou de deze organisatie wel eens goed bij je kunnen passen. Voor een organisatie in Delft zoeken we momenteel een ervaren .NET C# ontwikkelaar. De organisatie richt zich op innovatieve en complexe maatwerk systemen met een maatschappelijke raakvlak. Hierbij moet je (afhankelijk van je niveau) mee kunnen denken met functionele en architectonische vraagstukken. De projecten kunnen uiteenlopend zijn en het is maar net wat

Bekijk vacature »

Lead Developer

Do you want to work as a Lead Developer? Are you ready for a new challenge with variety and independence in a self-managing team that is responsible for the control apps for the climate in buildings and in greenhouses? The customer has no shortage of ambition and wants to be pioneering within their segment. How do they want to do this? I would like to tell you more about this in a personal conversation. As an experienced Lead Developer you work with your team on web applications for laptop, tablet and smartphone. You write robust, readable and reusable code and

Bekijk vacature »

Solution Developer Power BI Python

Data Engineer Power BI Python SQL DAX (Azure) Full-time Location: Rotterdam Contract Duration: 6months (temp or freelance) Background The Integrated Operations Benelux team consist of various roles that make Excellent Execution a success. One of these roles is a (contract) role of a Business Solutions Developer. Less time spent on Running the Business to reinvest in Growing the Business whilst Improving Customer and Employee Satisfaction is the vision of Integrated operations. Integrated Operations brings Customer Development, Supply Chain and Sales within Benelux together in realizing excellent execution. The 4 principles driving Integrated Operations are: end 2 end ownership, maximized automation,

Bekijk vacature »

Junior PHP Developer

Je maakt een vliegende start van je carrière bij Coolblue, door meteen mee te werken in een team. Hoe word ik Junior PHP Developer bij Coolblue? Als junior PHP developer ben je meteen vanaf de start onderdeel van een van de development teams. Omdat je jezelf graag nog verder wilt ontwikkelen, kijk je veel met je collega’s mee en volg je verschillende trainingen. Maar in de sprints pak je ook je eigen stories op, om meteen Coolblue iedere dag een beetje beter te kunnen maken. “Ook junior developer worden bij Coolblue? Else de Boer legt je uit hoe je dat

Bekijk vacature »

Ervaren .NET C# ontwikkelaar, inhouse, complex maa

Ben je als ervaren ontwikkelaar op zoek naar een analytische omgeving? Waar hoogopgeleiden en ervaren collega’s jouw kennis naar een hoger niveau kunnen tillen? Waar je met een leuk team samen aan innovatieve producten werkt? Dan zou de deze organisatie wel eens goed bij je kunnen passen. Voor een organisatie in Delft zoeken we momenteel een ervaren .NET C# ontwikkelaar. De organisatie richt zich op innovatieve en complexe maatwerk systemen met een maatschappelijke raakvlak. Hierbij moet je (afhankelijk van je niveau) mee kunnen denken met functionele en architectonische vraagstukken. De projecten kunnen uiteenlopend zijn en het is maar net wat

Bekijk vacature »

Back-end Developer SpringBoot APIs

Bedrijfsomschrijving For our client in Rotterdam, we are looking for an experienced back-end developer. Within the Banking domain, you get to work in one of the scrum teams. Your activities are very diverse, but everything comes down to providing a complete customer experience for customers. As a DevOps team, you support other IT teams in the grid, providing them with the integration of applications, deployments, and automation. As a coach and mentor in your team, you ensure that your own and the development of your teammates is part of the sprint planning, so that the team as a whole can

Bekijk vacature »

Java Developer- Spring/ JavaScript/ CI / CD

Java Developer- Spring/ JavaScript/ CI / CD BRAND NEW ROLE AVAILABLE IN THE RANDSTAD, NETHERLANDS, WORKING WITH AN ESTABLISHED IT CONSULTANCY Flevoland location, easily accessible by car and public transport Java/ Open Source/ Agile/ CI / CD Competitive Salary To apply please call +31 (0)208 004 990 or email me; widdowson@searchability.com With our HQ in Almere we a specialist consultancy who are on the lookout for a number of Dutch speaking Java Developers to join the team. We have options for project work across the Randstad. Sourced by: @SearchabilityEU– your 24/7 twitter feed of latest IT vacancies across Europe WHO

Bekijk vacature »

MS Dynamics AX Ontwikkelaar

Functieomschrijving Wij zijn op zoek naar een ambitieuze MS Dynamics AX Ontwikkelaar om ons verder te versterken in het creëren van innovatieve oplossingen binnen de Aftersales. Wil jij de beste worden in je vak en hebt de ambitie om zowel jezelf als onze organisatie continu te ontwikkelen, kom dan snel een kop koffie drinken in ons inspirerende kantoor in Nuth. Wat bieden wij jou Een passend beloningspakket Uitdagende positie in een groeiende organisatie Een dynamische werksfeer en ruimte voor inbreng Meerdere doorgroeimogelijkheden Wie ben jij Minimaal afgeronde Bacheloropleiding richting Informatica/ ICT; Enkele jaren (minimaal 2) ervaring als Ontwikkelaar op het

Bekijk vacature »

Mobile App Developer

Ons Mobile ontwikkelteam zoekt een fanatieke Mobile App Developer. Ben jij creatief en heb je passie voor het ontwikkelen van apps? Dan zijn wij op zoek naar jou! Jouw baan ChipSoft heeft al diverse apps uitgebracht en het aantal gebruikers hiervan neemt snel toe. De apps doen het erg goed bij de zorginstellingen. Je kunt hierbij denken aan apps verpleegkundigen, thuiszorgmedewerkers, de logistieke dienst en - natuurlijk - de artsen zelf. Door jouw hands-on mentaliteit, eigenwijsheid en technisch inzicht kun je nauwkeurig herbruikbare software schrijven. Die software sluit naadloos aan op onze ‘back end’ (HiX, onze ICT-totaaloplossing voor de zorg).

Bekijk vacature »

Medior Front-End Developer

Als medior Front-End Developer bij Coolblue verbeter je de gebruiksvriendelijkheid van onze webshop voor miljoenen klanten. Hoe word ik Medior Front-end Developer bij Coolblue? Als Medior Front-end Developer werk je aan de gebruiksvriendelijkheid van onze webshop voor miljoenen klanten. Je vindt het leuk om samen te werken met de UX designer om stories op te pakken. Je krijgt energie van het bedenken van creatieve oplossingen en presenteert dit graag binnen het team. Ook ben je trots op je werk en verwelkomt alle feedback. ‘’Ook Medior Front-end Developer worden bij Coolblue? Else de Boer legt je uit hoe je dat doet.’’

Bekijk vacature »

Frontend developer voor een prachtige sector

Bedrijfsomschrijving Deze jonge en informele organisatie laat zich graag omschrijven als een websitebouwer die de grenzen opzoekt. Met een ambitieus en gedreven groep van web enthousiastelingen worden hier niet alleen goed werkende sites maar ook mooi ogende sites ontwikkeld voor een steeds groter wordende klantenkring. De cultuur hier is zeer ontspannen. De gemiddelde leeftijd ligt midden twintig en de communicatie is open. Passie voor het web is een absolute must om je hier thuis te voelen. Ze zijn per direct op zoek naar een Front-end Developer die de lopende webshops en andere e-commerce uitingen naar zijn hand zet. Functieomschrijving We

Bekijk vacature »

Fullstack .NET developer voor het onderwijs

Bedrijfsomschrijving Dit mooie bedrijf helpt onderwijsinstellingen beter en efficiënter te werken. Ze hebben hiervoor een aantal applicaties bedacht en ontwikkelt. De applicaties zijn SAAS oplossingen die allemaal middels .NET zijn gebouwd en hoewel er al veel expertise in huis is, zou een aanvulling met jou zeer wenselijk zijn. Er wordt gewerkt met moderne technieken en ook mag, en kan, je pionieren met nieuwe technieken. Zowel backend- als fullstack webdevelopers zijn meer dan welkom te reageren. Functieomschrijving Onze klant bouwt SAAS oplossingen voor het onderwijs en ze hebben inmiddels een aantal innoverende applicaties in de markt staan. Je gaat samen met

Bekijk vacature »

Team Lead PHP

Als Tech Lead zorg voor een glimlach op het gezicht van onze klanten door geweldige software af te leveren. Hoe word ik Team Lead PHP bij Coolblue? Als Team Lead PHP bouw en leid je een team dat uitblinkt in het leveren van hoogwaardige en kostenefficiënte software. Je ondersteunt teamleden bij het afbakenen van hun doelen en met de aanpak om ze te behalen. Als Tech Lead zorg voor een glimlach op het gezicht van onze klanten door geweldige software af te leveren en een effectief team op te bouwen. ‘’Ook Team Lead PHP worden bij Coolblue? Else de Boer

Bekijk vacature »

.NET Developer / C#

Bedrijfsomschrijving werken bij een organisatie waar je met het volgende in aanraking komt: High-intensity dataverkeer, meer dan 2,7 miljard berichten per jaar; Development aan .NET applicaties die maandelijks miljoenen euro's verwerken; Salaris als developer tot bijna 70.000 euro op jaarbasis; Geen partij in de omgeving van Tilburg die zo'n complex .NET applicatielandschap heeft; Werken aan meer dan 50 diensten, verdeeld over 10 Scrum teams; Focus op o.a.: C# en ASP.NET in een Agile organisatie; Elk kwartaal een week lang verplicht met nieuwe technieken/tooling werken; Meer dan 40 ervaren .NET ontwikkelaars als collega's; Mogelijkheid om 32 of 36 uur te gaan

Bekijk vacature »

Fullstack ontwikkelaar

Bedrijfsomschrijving Bij het accepteren van dit aanbod kom je terecht binnen een veelzijdige organisatie waar een goede sfeer hangt. Zij zijn gewend dagelijks met elkaar te lunchen en ruimte is voor een potje Mario. Als Fullstack ontwikkelaar ga je je op projectbasis bezighouden met het ontwikkelen van content voor diverse opdrachtgevers. De projecten waar je aan gaat werken zullen verschillende qua omvang. Hierbij kan je rekening houden met een gemiddelde doorlooptijd van een half jaar, waarbij er meerdere projecten naast elkaar kunnen lopen. De nadruk zal liggen op ontwikkeling aan de front-end, maar ook op het gebied van ontwikkeling 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

26/01/2021 23:46:39
 
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.