0

Using this Q http://stackoverflow.com/questions/17838380/styling-jquery-ui-autocomplete

I was able to style all auto completes on my site. However I only want to apply WIDTH style to one particular auto-complete text field.

        <script>
  $( function() {
    var availableCountries = [   
 "Country1",
    "Country2",
    "Country3",
    ];
    $("#tbCountries").autocomplete({
      source: availableCountries
    });
  } );
  </script>



<input id="tbCountries" type="text" class="textEntry form-control RegistrationPage-AutoCompleteCountryWidth" maxlength="30">

Ive tried accessing it through the ID of the input and also adding a class

#tbCountries ul
{
     width:14% !important;
}

.RegistrationPage-AutoCompleteCountryWidth ul
{
   width:14% !important;
}

None of these work....BUT...by getting the ID of the ul from the developer tools I can change the desired width to 

#ui-id-1
{
    width:14% !important; WORKING
}

However, isnt this bad coding so to speak as adding or removing more auto completes from my site could change the id of this one?

Any Ideas? Ta

John
  • 3,965
  • 21
  • 77
  • 163

1 Answers1

0

You try to select an ul element as a child of the input. In CSS you select children of an element with spaces between the selectors.

Try this instead (just the ID without ul childselector):

#tbCountries {
     width:14% !important;
}

For further reading: https://css-tricks.com/child-and-sibling-selectors/

Christian Nitsche
  • 1
  • 2