Autocomplete lijst verticaal weergeven i.p.v. horizontaal

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

<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:

<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:

.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.

[size=xsmall]Toevoeging op 28/08/2017 10:36:43:[/size]

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:

<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:

.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:

<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:

.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...