Autocomplete lijst verticaal weergeven i.p.v. horizontaal
Gewijzigd op 29/08/2017 21:45:19 door - Ariën -
In HTML heb ik eigenlijk geen stijlblokken, want alles gaat via een externe CSS bestand. Ik werk enkel met IDs of Class'.
Momenteel heb ik in HTML de volgende code voor betreffende input field:
Code (php)
Maar wanneer ik het bekijk via de element inspecteer dan zie ik de volgende dingen:
Code (php)
1
<input name="medicinename" id="medicinename" value="" class="ui-autocomplete-input" autocomplete="off" type="text">
En wat moet ik nu verder doen?
De class ui-autocomplete-input heb ik niet aangemaakt...
Of wil je misschien even meekijken via de inspecter en aangeven welke eigenschap de boosdoener is?
Blijkbaar mist je theme dus, waardoor je autocomplete er vreemd uitziet.
De huidige header.php heb ik aangepast naar:
Code (php)
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
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
<head>
<meta charset="utf-8">
<title><?php echo $page_title; ?></title>
<link rel="stylesheet" href="../includes/jquery-ui.min.css">
<link rel="stylesheet" href="../includes/jquery-ui.theme.min.css">
<style>
.ui-autocomplete {
max-height: 300px;
overflow-y: auto; /* prevent horizontal scrollbar */
overflow-x: hidden;
}
</style>
<script src="../includes/jquery-3.2.1.min.js"></script>
<script src="../includes/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#medicinename" ).autocomplete({
source: 'includes/search_medicinename.php'
});
});
$(function() {
$( "#genericname" ).autocomplete({
source: 'includes/search_genericname.php'
});
});
</script>
<link href="../includes/main.css" rel="stylesheet" type="text/css">
</head>
<meta charset="utf-8">
<title><?php echo $page_title; ?></title>
<link rel="stylesheet" href="../includes/jquery-ui.min.css">
<link rel="stylesheet" href="../includes/jquery-ui.theme.min.css">
<style>
.ui-autocomplete {
max-height: 300px;
overflow-y: auto; /* prevent horizontal scrollbar */
overflow-x: hidden;
}
</style>
<script src="../includes/jquery-3.2.1.min.js"></script>
<script src="../includes/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#medicinename" ).autocomplete({
source: 'includes/search_medicinename.php'
});
});
$(function() {
$( "#genericname" ).autocomplete({
source: 'includes/search_genericname.php'
});
});
</script>
<link href="../includes/main.css" rel="stylesheet" type="text/css">
</head>
Ik heb dus alle min bestanden genomen, weet niet of dit wat uitmaakt of niet...
En op de FTP-server heb ik dus staan: http://www.hawarco.co/img/print_screen.png
Toevoeging op 29/08/2017 22:53:36:
Maar het werkt nog steeds niet helaas....:(
Toevoeging op 29/08/2017 22:54:58:
En via inspect element word ik niet echt wijzer om je eerlijk te bekennen..Daarin heb ik alles uitgeschakeld en de resultaten van autocomplete werden nog steeds niet als scrolable weergegeven...
Gewijzigd op 29/08/2017 23:14:29 door - Ariën -
Gisterenavond werd het een beetje laat voor me om hieraan te werken en ben deze morgen direct mee verder gegaan en wel met vol moed ;).
Ik heb ontdekt wanneer ik de code voor het menu uitschakelt, dan wordt het resultaat van autocomplete wel als scrolable weergegeven.
En de code voor mijn menu ziet als volgt uit:
En zoals je ziet wordt een UL en kids ervan direct aangesproken.
Denk je dat ik het huidige probleem kan oplossen door te werken met CLASS of IDs?
Mijns inziens is het output van autcomplete een UL is en daarom niet als scrolable wordt weergegeven, maar wat ik niet begrijp is dat de volgorde van de CSS-bestanden goed staat en blijkbaar heeft dit geen effect op..
Code (php)
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
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
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; }
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; }
Toevoeging op 30/08/2017 08:52:00:
Update:
De oorzaak heb ik gevonden in onderstaande code.
Wanneer ik d.m.v. inspect element float: left uitschakel voor UL LI, dan wordt het resultaat van autocomplete wel als scrolable weergegeven ;-)
Code (php)
1
2
2
ul li {
float: left;
float: left;
En hoe kan ik oplossen dat het menu op mijn website werkt en dat de resultaten van autocomplete als scrolable worden weergegeven?
Toevoeging op 30/08/2017 09:50:58:
Update 2:
Ik heb het probleem opgelost! ;-)
Ik heb wat class toegekend aan het menu en vervolgens in mijn CSS-bestand betreffende tag vervangen door class-naam en het werkt gelukkig.
Heel erg bedankt voor het meedenken!